W3Schools.com

HTML5 Form Elements

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

Tag IE Firefox Opera Chrome Safari
<datalist> No 4.0 9.5 No No
<keygen> No 4.0 10.5 3.0 No
<output> No 4.0 9.5 10.0 5.1

<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="W3Schools" value="http://www.w3schools.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.asp" 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

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" name="a" value="50" />100
+<input type="number" name="b" value="50" />
=<output name="x" for="a b"></output>
</form>

Try it yourself »

HTML5 New Form Elements

Tag Description
<datalist> Defines a list of options for an input field
<keygen> Defines a key-pair generator field
<output> Represents the result of a calculation


WEB HOSTING
Best Web Hosting
PHP MySQL Hosting
Best Hosting Coupons
UK Reseller Hosting
Cloud Hosting
Top Web Hosting
$7.95/mo SEO Hosting
Premium Website Design
WEB BUILDING
XML Editor - Free Trial!
FREE Website BUILDER
Free Website Templates Free CSS Templates
Make Your Own Website
W3SCHOOLS EXAMS
Get Certified in:
HTML, CSS, JavaScript, XML, PHP, and ASP
W3SCHOOLS BOOKS
New Books:
HTML, CSS
JavaScript, and Ajax
STATISTICS
Browser Statistics
Browser OS
Browser Display
SHARE THIS PAGE