Datalist and output

Learn <datalist> and <output>.

Ready suggestions with datalist

Sometimes you want to offer ready suggestions for a field: city, category, language. <datalist> is for that. You place <option value="..."> tags inside it; the browser shows these suggestions in a drop-down as the user types.

The key part: the input's list attribute must point to the datalist's id. The user can still type something else; datalist suggests, it does not force.

Calculation results with output

To show the result of a calculation on the page you use the <output> tag. Its value is changed by JavaScript; HTML alone does not compute.

The output's for attribute lists the ids of the inputs used in the calculation, separated by spaces. This tells the screen reader which fields feed the result and helps accessibility. The user then sees the result tied to its sources.

Exercise Write a city suggestion box

Add an <input type="text"> to the form; give it name of sehir and set list to sehirler. Then add a <datalist id="sehirler"> with at least two <option value="..."> inside (values do not matter). Close the datalist with its closing tag.

Show example solution

<form>
  <input type="text" name="sehir" list="sehirler">
  <datalist id="sehirler">
    <option value="London"></option>
    <option value="Paris"></option>
  </datalist>
</form>

Test yourself

Which statement is correct?
- datalist restricts the user's choice
- the output tag collects text from the user
- output shows a calculation result on the page
- the list attribute links to output
Show answer

output shows a calculation result on the page — Correct. output shows the calculation result on the page; JavaScript updates its value.

What should the id of a datalist with two city suggestions be?

<datalist id="____">
  <option value="Istanbul"></option>
  <option value="Ankara"></option>
</datalist>

Show answer

<datalist id="cities">
  <option value="Istanbul"></option>
  <option value="Ankara"></option>
</datalist>

Match each tag and attribute to its role

datalist

Offers suggestion list
output

Shows calculation result
list

Links input to datalist
value

Value of an option

Next lesson: Progress and meter

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies