HTML5 Form Elements

« Previous Next Chapter »

HTML5 New Form Elements

HTML5 has several new elements and attributes for forms.

This chapter covers the new form elements:

  • datalist
  • keygen
  • output

Browser Support

Attribute IE Firefox Opera Chrome Safari
datalist No No 9.5 No No
keygen No No 10.5 3.0 No
output No No 9.5 No No


datalist Element

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

The list is created with option elements inside the datalist.

To bind a datalist to an input field, let the list attribute of the input field refer to the id of the datalist:

Example

Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Tutors" value="http://www.w3tutors.com" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

Try it yourself »

Tip: The option elements should always have a value attribute.


keygen Element

The purpose of the keygen element is to provide a secure way to authenticate users.

The keygen element is a key-pair generator. When a form is submitted, two keys are generated, one private and one public.

The private key is stored on the client, and the public key is sent to the server. The public key could be used to generate a client certificate to authenticate the user in the future.

Currently, the browser support for this element is not good enough to be a useful security standard.

Example

<form action="demo_form.php" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>

Try it yourself »


output Element

The output element is used for different types of output, like calculations or script output:

Example

<output id="result" onforminput="resCalc()"></output>

Try it yourself »


« Previous Next Chapter »