HTML Tutorial | Getting Started with HTML5 | Other HTML5 Elements

Various Input-Related Elements Added in HTML5

The various input-related elements newly added in HTML5 are as follows.

datalist Element

The datalist element provides a predefined list of options for an input element.
Users can either type text directly or select one of the predefined options from a drop-down menu.

To connect them, the value of the input element’s list attribute must match the id attribute value of the datalist element.

What is your favorite fruit?
<input list="fruits" name="fruit">
<datalist id="fruits">
   <option value="apple">
   <option value="strawberry">
   <option value="banana">
   <option value="grape">
</datalist>

Run code

The datalist element is not supported in versions earlier than Internet Explorer 10.

keygen Element

The keygen element generates keys for public-key encryption from user-entered data and submits the form. When the form is submitted, a private key and a public key are generated at the same time. The private key is kept on the client side, and the public key is sent to the server side.

This is mainly used for user authentication.

<form>
  Enter the value below and press the submit button to send it encrypted.
  <input type="text" name="username">
  <keygen name="security">
  <input type="submit" value="Submit"> 
</form>

The keygen element is not supported in Internet Explorer.

output Element

The output element immediately displays the result of a calculation performed by a script.

<form oninput="total.value=parseInt(val1.value) + parseInt(val2.value)">
  0<input type="range" id="val2" value="50" min="0" max="100">100
  + <input type="number" id="val1" value="20">
  = <output name="total" for="val1 val2"></output>
</form>

Run code

The for attribute lists the ids of elements related to the result, separated by spaces.

The output element is not supported in Internet Explorer.