HTML5 Form Elements

Tuesday, October 16, 2012


HTML5 brings us new form elements that you can use to help validate user input as well as how to present the form in the browser. As HTML5 is being developed, one of the considerations has been making forms on the web easier to use with built-in features without the need for extra JavaScript. The new HTML5 form elements, as of this writing, is not supported by all of the major browsers. Chrome, Opera, and Safari have the most support. Each item below is tested for support in the current browser. In the items below, green indicates that your current browser should support the element while red indicates that it does not. Please note that the HTML5 specification is still being developed, so this information can change. On the right side of this text, you will notice that this page has detected your browser version.

HTML5 Form Elements

The following is a list of new HTML5 form elements.

Form ElementDescription
DatalistContains a set of option elements that will be displayed as suggestions as the user types in the text box.
KeygenUsed for public/private key pair generation during form submission.
MeterUsed to display a measurement within a range.
OutputDisplays the results of a calculation within the page.
ProgressUsed to represent the progress of a task.


The <datalist> element is used to provide an "autocomplete" feature on <input> elements. Users will see a drop-down list of pre-defined options as they input data.

Select a Browser: <input list="browsers" />
<datalist id="myDatalist">
  <option value="Internet Explorer"/>
  <option value="Firefox"/>
  <option value="Chrome"/>
  <option value="Opera"/>
  <option value="Safari"/>


The purpose of the <keygen> element is to provide a security. This element specifies a key-pair generator field in a form. When the form is submitted, two keys are generated, one private and one public. The private key is stored locally, 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.

Key: <keygen name="security">


The meter element represents a scalar measurement within a known range, or a fractional value. There are six attributes allowed with the meter element: value, min, max, high, low, and optimum. If the value is below or above the low and high attribute, the color of the meter is styled accordingly.

Your score is: <meter value="75" min="0" max="100" low="50" high="95" optimum="100">75</meter>


Used to display a measurement within a range.

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


Used to represent the progress of a task.

Progress: <progress value="60" max="100">60%</progress>

Did you find the page informational and useful? Share it using one of your favorite social sites.

Recommended Books & Training Resources

Head First HTML5 Programming: Building Web Apps with JavaScript HTML5: The Missing Manual Murachs HTML5 and CSS3