<datalist>, <meter> <progress> and <output> tests

← Index page

These tests are to show the <datalist>, <meter>, <progress> and <output> in action.

The <datalist> element

This element contains a set of <option> elements that represent the permissible or recommended options available to choose from within other controls.

Code

<form action="#">
  <label for="abc">Choose a flavor:</label>
  <input id="abc" list="xyz">
  <datalist id="xyz">
    <option value="Chocolate"></option>
    <option value="Coconut"></option>
    <option value="Mint"></option>
    <option value="Strawberry"></option>
    <option value="Vanilla"></option>
  </datalist>
</form>

Dummy link before

The <meter> element

This element represents either a scalar value within a known range or a fractional value.

Code

<form action="">
  <label for="fuel">Fuel level:</label>
  <meter
    id="fuel"
    min="0"
    max="100"
    low="33"
    high="66"
    optimum="80"
    value="50"
  >
  at 50/100
  </meter>
</form>

Dummy link before

The <progress> element

This element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

Code

<form action="">
  <label for="file">File progress:</label>
  <progress id="file" max="100" value="70">70%</progress>
</form>

Dummy link before

The <output> element

This element is a container element into which a site or app can inject the results of a calculation or the outcome of a user action.

Code

<form action="">
  <input type="range" id="b" name="b" value="50" /> +
  <input type="number" id="a" name="a" value="10" /> =
  <output for="b a">60</output>
</form>

← Index page