HTML5 form elements

New HTML5 Form Elements

HTML5 includes the following new form elements:

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

Note:Not all browsers support the HTML5 new form elements, but you can still use them, even if the form attributes are not supported, they will still be displayed as regular form elements.

HTML5 <datalist> Element

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

The <datalist> element specifies the form or input element that should have auto-complete functionality. When the user starts typing in an auto-complete element, the browser should display the filled options in that element:

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

OperaSafariChromeFirefoxInternet Explorer

instance

Use the <datalist> element to define the predefined values of the <input> element:

<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 out »

HTML5 <keygen> Element

The <keygen> element provides a reliable method for users to authenticate.

The <keygen> tag defines a field for a key pair generator in a form.

When the form is submitted, two keys are generated: a private key and a public key.

The private key is stored on the client, while the public key is sent to the server. The public key can be used to verify the client certificate (client certificate) later.

This element is deprecated and is no longer recommended for use. Alternatives include:

  1. Using the Web Cryptography API to generate keys in JavaScript

  2. Using specialized encryption libraries

OperaSafariChromeFirefoxInternet Explorer

instance

A form with a <keygen> field:

<form action="demo_keygen.asp" method="get">Username:<input type="text" name="usr_name">Keygen:<keygen name="security"> <input type="submit"> </form>

Try it out »

HTML5 <output> Element

The <output> element is used for different types of output, such as calculations or script output:

OperaSafariChromeFirefoxInternet Explorer

instance

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

Try it out »

New HTML5 Form Elements

tag description
<datalist> The <input> tag defines an option list. Use this element in conjunction with the input element to define possible values for the input.
<keygen> The <keygen> tag defines a field for a key pair generator in a form.
<output> The <output> tag defines different types of output, such as script output.
Other Extensions