HTML 5 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

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</title> 
</head>
<body>
	
<form action="demo-form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<input type="submit">
</form>

<p><strong>note:</strong> Internet Explorer 9 (earlier IE version), Safari does not support datalist tags.</p>

</body>
</html>

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

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</title> 
</head>
<body>

<form action="demo_keygen.php" method="get">
  username: <input type="text" name="usr_name">
  encryption: <keygen name="security">
  <input type="submit">
</form>

<p><strong>note:</strong> Internet Explorer does not support keygen tags.</p>

</body>
</html>

HTML5 <output> element

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

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</title> 
</head>
<body>

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

<p><strong>note:</strong> Edge 12 and earlier IE browsers do not support the output element.</p>

</body>
</html>

HTML5 new form elements

Label Description
<datalist>

The <input> tag defines a list of options. Please use this element in conjunction with the input element to define the possible values ​​of the input.

<keygen>

The <keygen> tag specifies the key pair generator field used in the form.

<output>

The <output> tag defines different types of output, such as script output.