Did you find this useful?
Socialize it today.


HTML5 Form Elements

Tuesday, October 16, 2012

browser

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.

Datalist

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"/>
</datalist>

Keygen

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

Meter

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

Output

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>
</form>
+ = 100

Progress

Used to represent the progress of a task.

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

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

Head First HTML5 Programming: Building Web Apps with JavaScript HTML CSS and JavaScript The Definitive Guide to HTML5