HTML Tutorial · HTML5 Features · Lesson 25 of 34

HTML5 Form Elements

Suggest values with datalist, show results with output, and display progress and measurements with progress and meter.

datalist: suggestions for an input

A <datalist> gives an input a list of suggestions while still allowing free text. Connect them with the input's list attribute.

Suggestions with datalistTry it yourself

<label for="browser">Favourite browser</label>
<input id="browser" list="browsers" name="browser">
<datalist id="browsers">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Safari">
  <option value="Edge">
</datalist>

output: show a calculation

<output> displays the result of a calculation or user action, and is announced by screen readers when it changes. Its for attribute lists the inputs it depends on.

A live total with outputTry it yourself

<form id="calc">
  <label>Price <input type="number" id="price" value="20"></label> x
  <label>Quantity <input type="number" id="qty" value="3" min="1"></label> =
  <output name="total" for="price qty">60</output>
</form>
<script>
  const form = document.getElementById("calc");
  form.addEventListener("input", () => {
    form.elements.total.value = (form.elements.price.valueAsNumber || 0) * (form.elements.qty.valueAsNumber || 0);
  });
</script>

progress and meter

<progress> shows how much of a task is done (an upload, a multi-step form). Without value it shows an indeterminate "busy" state.
<meter> shows a measurement within a known range (disk usage, password strength), with low, high and optimum to colour it.

progress and meterTry it yourself

<p><label>Upload <progress value="70" max="100">70%</progress></label></p>
<p><label>Working <progress>Working...</progress></label></p>
<p><label>Disk usage <meter value="0.92" low="0.6" high="0.85" optimum="0.2">92%</meter></label></p>
<p><label>Password strength <meter value="3" min="0" max="4" low="2" high="3" optimum="4">strong</meter></label></p>

Test yourself

Which element should show password strength on a scale from weak to strong?

<progress>
<meter>
<output>
<datalist>

Show answer

Answer: <meter>

meter shows a measurement within a range; progress shows completion of a task.