HTML Form Elements
HTML form on a web page allows a user to enter data that is sent to a server for processing. Forms can resemble paper or database forms because web users fill out the forms using checkboxes, radio buttons, or text fields.
For example, forms can be used to enter shipping or credit card data to order a product, or can be used to retrieve search results from a search engine.
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>
<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.
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:
The <button> Element
The <button> element defines a clickable button:
This is how the HTML code above will be displayed in a browser:
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.
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.
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>
<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) |
<output> | Defines the result of a calculation |