HTML5 Form Elements
HTML5 New Form Elements
HTML5 has the following new form elements:
<datalist>
<keygen>
<output>
Note: Not all browsers support HTML5 new form elements, but you can use them. Even if the browser does not support form attributes, they can still be displayed as regular form elements.
HTML5 <datalist> Element
The <datalist> element specifies a list of options for the input field.
The <datalist> attribute specifies that the form or input field should have an auto-completion function. When the user starts typing in the autocomplete field, the browser should display the filled-in options in the field:
Use the list attribute of the <input> element to bind to the <datalist> element.
Example
The <input> element uses the predefined values of <datalist>:
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
HTML5 <keygen> Element
The purpose of the <keygen> element is to provide a reliable method of authenticating users.
The <keygen> tag specifies the key pair generator field used in the form.
When the form is submitted, two keys will be generated, one is the private key and the other is the public key.
The private key is stored on the client, and the public key is sent to the server. The public key can be used to verify the user's client certificate later.
Example
Form with keygen field:
<form action="demo_keygen.asp" method="get">
User name: <input type="text" name="usr_name">
Encryption: <keygen name="security">
<input type="submit">
</form>
HTML5 <output> Element
The <output> element is used for different types of output, such as calculation or script output:
Example
Display the calculation result in the <output> element:
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>
HTML5 New Form Elements
Tag | Description |
---|---|
<datalist> | The <input> tag defines a list of options. Please use this element in conjunction with the input element to define the possible values of the input. |
<keygen> | The <keygen> tag specifies the key pair generator field used in the form. |
<output> | The <output> tag defines different types of output, such as script output. |