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>

 Try It! 

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>

 Try It! 

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>

 Try It! 

HTML5 New Form Elements