New Form Elements

Contact Us or call 1-877-932-8228
New Form Elements

New Form Elements

HTML5 introduces these new elements, which are often associated with forms:

  1. output
  2. datalist
  3. progress
  4. meter

We covered the output element earlier in this lesson.

The others are covered below.


The datalist element combined with the list attribute is used to provide a list of suggestions for an input field. It differs from the select element in that the associated input can accept values that are not included in the datalist. To use it, add a list attribute to an input, giving the attribute a value corresponding to the id of the datalist tag you want associated with the input; the datalist contains option tags denoting the values to suggest to the user. It is only supported by:

  1. Opera
  2. Firefox
  3. Chrome

Code Sample:

---- C O D E   O M I T T E D ----
<label for="color">Color: </label>
<input type="color" name="color" id="color" list="color-list">
<datalist id="color-list">
	<option value="#ff0000">
	<option value="#0000ff">
	<option value="#00ff00">
	<option value="#ffff00">
	<option value="#ffa500">
---- C O D E   O M I T T E D ----

Here's what it looks like in Firefox:

And here's what it looks like in Chrome; note that, because Chrome supports inputs of type color and because the datalist options are given as hex colors, the suggested values appear as a color picker:

progress and meter

HTML5 introduces the new progress and meter elements. They sometimes get confused, so we'll illustrate with an example.

We use both progress and meter in our HTML5 Cards application as shown below: Progress and Meter demo

The progress element is used to show the progress through some action. In this case, through completing the "deck" of flash cards. Another example would be a file download or completion of a form.

The meter element, according to the spec, "represents a scalar measurement within a known range". So the meter element is only used when you know the minimum and maximum values. We use it in the above HTML5 cards example to show the user's current score (between 0% and 100%). This is different from progress, which shows how much of the deck has been completed. The HTML markup for the two tags is shown below:

Progress: <progress id="amountComplete" max="100" value="0"><span>0</span>%</progress> Score: <meter id="score" max="100" value="0"><span>0</span>%</meter>

Only Chrome, Firefox, Safari, and Opera support the progress and meter tags, so we use the nested <span> tags in combination with JavaScript to provide similar functionality in other browsers. For example, here's what we show in IE9:Progress and Meter demo - IE9

The Form Element's change Event Handler

The progress and meter elements can be updated using the new change event handler on the form, rather than capturing changes on each individual form element: