HTML5 Form Elements

New Form Elements in HTML5

HTML5 introduces the following new form elements:

• <datalist>
• <keygen>
• <output>

Note: Not all browsers support the new HTML5 form elements, but you can still use them. Even if the browser does not support these form attributes, they will still display as regular form elements.

HTML5 <datalist> Element

The <datalist> element specifies a list of options for an input field.

The <datalist> attribute specifies that a form or input field should have autocomplete functionality. When the user starts typing in the autocomplete field, the browser should display the filled options in that field:

Use the list attribute of the <input> element to bind it with the <datalist> element.

Example

The <input> element uses a <datalist> to predefine values:

<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 <keygen> element provides a secure way to authenticate users.

The <keygen> tag specifies a key-pair generator field for forms.

When the form is submitted, two keys are generated, one private and one public.

The private key (private key) is stored on the client-side, and the public key (public key) is sent to the server. The public key can be used to verify the client certificate at a later time.

Example

Form with a keygen field:

<form action="demo_keygen.asp" method="get">
Username: <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 the result of a calculation or a script:

Example

Display the result of a calculation 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>

New Form Elements in HTML5