This chapter describes all HTML form elements.
The <input> Element
The form element can be considered as the most important is <input> element.
The <input> element varies in different ways, based on the type attribute.
All details regarding HTML input types are explained in next chapter.
The <select> Element (Drop-Down List)
The <select> element is used to define 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 is used to define the options to select.
The list will usually by default shows the first item before getting selected.
You have the option to add a selected attribute for defining a predefined option.
Example
<option value="fiat" selected>Fiat</option>
The <textarea> Element
The <textarea> element is used to define 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 manner in which the HTML code above will be shown in a browser:
The <button> Element
The <button> element is used to define a clickable button:
This is manner in which the HTML code above will be shown in a browser:
HTML5 Form Elements
HTML5 added the following form elements:
Note: Browsers will not be displaying unknown elements. New elements which are not supported by your older browsers will not "destroy" your web page.
HTML5 <datalist> Element
The <datalist> element is used to specify a pre-defined options list for an <input> element.
Users will be seeing a drop-down list with pre-defined options as during the data input.
The list attribute belonging to the <input> element, must be refering to the id attribute belonging to the <datalist> element.
Example
An <input> element having pre-defined values belonging to a 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 <keygen> element is used for providing a secure way to authenticate users.
The <keygen> element is used to specify a form's key-pair generator field.
during the submission of the form, two keys will be generated i.e one private and one public.
The private key is used for storing locally, and the public key is used for sending to the server.
The public key is used for generating a client certificate for authenticating the user in the future.
Example
A form having 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 is used for representing a calculations result (like one performed by a script).
Example
Performing a calculation and showing the result in an
<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
HTML Form Elements
| 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 |