HTML Form Elements

Page 1 of 10

w3schools.com

THE WORLD'S LARGEST WEB DEVELOPER SITE

HTML

CSS

TUTORIALS

HTML Form Elements

Previous

Next Chapter

This chapter describes all HTML form elements.

The <input> Element

The most important form element is the <input> element.

The <input> element can vary in many ways, depending on the type attribute.
All HTML input types are covered in the next chapter.

The <select> Element (Drop-Down List)

The <select> element defines a drop-down list:

Example
<select name="cars">
<option value="volvo">Volvo</option>
http://www.w3schools.com/html/html_form_elements.asp

02-08-2016

HTML Form Elements

Page 2 of 10

<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Try it Yourself
The <option> elements defines the options to select.
The list will normally show the first item as selected.
You can add a selected attribute to define a predefined option.

Example
<option value="fiat" selected>Fiat</option>
Try it Yourself

The <textarea> Element

The <textarea> element defines a multi-line input field (a text area):

Example
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
Try it Yourself
This is how the HTML code above will be displayed in a browser:

http://www.w3schools.com/html/html_form_elements.asp

02-08-2016

HTML Form Elements

Page 3 of 10

The cat was playing in the

garden.

The <button> Element

The <button> element defines a clickable button:

Example
<button type="button" onclick="alert('Hello World!')">Click Me!
</button>
Try it Yourself
This is how the HTML code above will be displayed in a browser:
Click Me!

HTML5 Form Elements

HTML5 added the following form elements:

<datalist>
<keygen>
<output>
By default, browsers do not display unknown elements. New elements will not
destroy your page.

http://www.w3schools.com/html/html_form_elements.asp

02-08-2016

HTML Form Elements

Page 4 of 10

HTML5 <datalist> Element

The <datalist> element specifies a list of pre-defined options for an <input>

element.
Users will see a drop-down list of pre-defined options as they input data.
The list attribute of the <input> element, must refer to the id attribute of the
<datalist> element.

Example

An <input> element with pre-defined values in a <datalist>:

<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
Try it Yourself

HTML5 <keygen> Element

The purpose of the <keygen> element is to provide a secure way to authenticate

users.
The <keygen> element specifies a key-pair generator field in a form.
When the form is submitted, two keys are generated, one private and one public.

http://www.w3schools.com/html/html_form_elements.asp

02-08-2016

HTML Form Elements

Page 5 of 10

The private key is stored locally, and the public key is sent to the server.
The public key could be used to generate a client certificate to authenticate the user
in the future.

Example

A form with a keygen field:

<form action="action_page.php">
Username: <input type="text" name="user">
Encryption: <keygen name="security">
<input type="submit">
</form>
Try it Yourself

HTML5 <output> Element

The <output> element represents the result of a calculation (like one performed by
a script).

Example

Perform a calculation and show the result in an <output> element:

<form action="action_page.asp"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>

http://www.w3schools.com/html/html_form_elements.asp

02-08-2016

HTML Form Elements

Page 6 of 10

<input type="submit">
</form>
Try it Yourself

Test Yourself with Exercises!

Exercise 1

Exercise 2

Exercise 3

HTML Form Elements

= new in HTML5.

Tag

Description

<form>

Defines an HTML form for user input

<input>

Defines an input control

<textarea>

Defines a multiline input control (text area)

<label>

Defines a label for an <input> element

<fieldset>

Groups related elements in a form

<legend>

Defines a caption for a <fieldset> element

<select>

Defines a drop-down list

<optgroup>

Defines a group of related options in a drop-down list

<option>

Defines an option in a drop-down list

<button>

Defines a clickable button

<datalist>

Specifies a list of pre-defined options for input controls

<keygen>

Defines a key-pair generator field (for forms)

http://www.w3schools.com/html/html_form_elements.asp

02-08-2016

HTML Form Elements

<output>

Page 7 of 10

Defines the result of a calculation

Previous

Next Chapter

COLOR PICKER

http://www.w3schools.com/html/html_form_elements.asp

02-08-2016

HTML Form Elements

Page 8 of 10

LEARN MORE

HTML Cards
Google Maps
Animated Buttons
Modal Boxes
Modal Images
Tooltips

Loaders
Filter List
JS Animations
Progress Bars
Dropdowns
Slideshow

Side Navigation
Top Navigation
HTML Includes

SHARE

CERTIFICATES

HTML, CSS, JavaScript, PHP, jQuery, Bootstrap and XML.

Read More

http://www.w3schools.com/html/html_form_elements.asp

02-08-2016

HTML Form Elements

Page 9 of 10

REPORT ERROR
PRINT PAGE
FORUM
ABOUT

Top 10 Tutorials
HTML Tutorial
CSS Tutorial
JavaScript Tutorial
W3.CSS Tutorial
Bootstrap Tutorial
SQL Tutorial
PHP Tutorial
jQuery Tutorial
Angular Tutorial
XML Tutorial

Top 10 References
HTML Reference
CSS Reference
JavaScript Reference
W3.CSS Reference
Browser Statistics
PHP Reference
HTML Colors
HTML Character Sets
jQuery Reference
AngularJS Reference

http://www.w3schools.com/html/html_form_elements.asp

02-08-2016

HTML Form Elements

Page 10 of 10

Top 10 Examples
HTML Examples

CSS Examples
JavaScript Examples
W3.CSS Examples
HTML DOM Examples
PHP Examples
ASP Examples
jQuery Examples
Angular Examples
XML Examples

Web Certificates
HTML Certificate
HTML5 Certificate
CSS Certificate
JavaScript Certificate
jQuery Certificate
PHP Certificate
Bootstrap Certificate
XML Certificate

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve
reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid
errors, but we cannot warrant full correctness of all content. While using this site, you agree to have
read and accepted our terms of use, cookie and privacy policy. Copyright 1999-2016 by Refsnes Data. All
Rights Reserved.
Powered by W3.CSS.

http://www.w3schools.com/html/html_form_elements.asp

02-08-2016