HTML5 introduces these new elements, which are often associated with forms:
We covered the
output element earlier in this lesson.
The others are covered below.
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
option tags denoting the values to suggest to the user. It is only supported by:
<!DOCTYPE HTML> ---- 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"> </datalist> ---- 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:
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:
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:
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: