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
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.
|Datalist||Contains a set of option elements that will be displayed as suggestions as the user types in the text box.|
|Keygen||Used for public/private key pair generation during form submission.|
|Meter||Used to display a measurement within a range.|
|Output||Displays the results of a calculation within the page.|
|Progress||Used 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" />
<option value="Internet Explorer"/>
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.
<input type="number" name="x" value="50"> +
<input type="number" name="y" value="50"> =
<output name="z" for="x y"></output>
Used to represent the progress of a task.
Progress: <progress value="60" max="100">60%</progress>
Recommended Books & Training Resources