Module 11: Advanced HTML Forms and Validation
datalist, output, progress, and meter
Use specialized elements for suggestions, calculated results, task progress, and scalar measurements.
HTML includes several elements for displaying values or offering suggestions. datalist provides suggestions for an input. The visitor can usually type a value that is not in the list, so it is not the same as a select.
<label for="browser">Browser</label>
<input id="browser" name="browser" list="browsers">
<datalist id="browsers">
<option value="Firefox">
<option value="Chrome">
<option value="Safari">
</datalist>
output represents the result of a calculation or user action. A script can update it when the input changes. progress represents progress toward completing a task, while meter represents a scalar value within a known range, such as storage usage or a score.
<label for="upload">Upload progress</label>
<progress id="upload" value="45" max="100">45%</progress>
<label for="disk">Disk usage</label>
<meter id="disk" min="0" max="100" value="72">72%</meter>
Do not use progress as a generic percentage bar when no task is being completed. Do not use meter for a value that has no meaningful range. The element’s meaning should match the information being shown.