HTML5 form element
New form elements for HTML5
HTML5 has the following new form elements:
<datalist><keygen><output>
Note: not all browsers support HTML5’s new form elements, but you can use them again, even if browsers don’t support form attributes, they can still be displayed as regular form elements.
HTML5 < datalist > element
<datalist> element specifies a list of options for the input field.
<datalist> attribute regulation form or input the domain should have autocomplete capabilities. When the user starts typing in the autocomplete field, the browser should display the filled-in options in that field:
Use <input> the list attribute of the element is the same as that of the <datalist> element binding.
Example
<input> element usage <datalist> predefined value:
<inputlist="browsers"><datalistid="browsers"><optionvalue="Internet
Explorer"><optionvalue="Firefox"><optionvalue="Chrome"><optionvalue="Opera"><optionvalue="Safari"></datalist>
HTML5 <keygen> element
<keygen> the purpose of the element is to provide a reliable way to authenticate the user.
<keygen> the label specifies the key pair generator field used for the form.
When the form is submitted, two keys are 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 validate the user’s client certificate later.
Example
With keygen form for the field:
<formaction="demo_keygen.asp"method="get">user name:<inputtype="text"name="usr_name">encryption:<keygenname="security"><inputtype="submit"></form>
HTML5 <output> element
<output> elements are used for different types of output, such as calculation or script output:
Example
Display the calculation results in the <output> elements:
<formoninput="x.value=parseInt(a.value)+parseInt(b.value)">0<inputtype="range"id="a"value="50">100
+<inputtype="number"id="b"value="50">=<outputname="x"for="a
b"></output></form>
HTML5 New form element
Label |
Description |
|---|---|
< datalist > |
The < input > tag defines the list of options. Use this element with the input element to define possible values for input. |
< keygen > |
The < keygen > tag specifies the key pair generator field used for the form. |
< output > |
The < output > tag defines different types of output, such as the output of a script. |