HTML Tutorials

Using a data list

The list attribute allows you to specify the id value of a datalist element, which will be used to suggest options to the user when they enter data into the text box. The datalist element is new in HTML5 and allows you to define a set of values that assist the user in providing the data you require. Different types of input elements use the datalist element in slightly different ways. For the text type, the values are presented as autocomplete suggestions. You specify the values you want to give to the user through the option element.

Using the datalist element
    <meta name="author" content="Adam Freeman"/>
    <meta name="description" content="A simple example"/>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <form method="post" action="http://titan:8080/form">
        <label for="name">
          Name: <input placeholder="Your name" id="name" name="name"/>
        <label for="city">
          City: <input placeholder="Where you live" id="city" name="city"/>
        <label for="fave">
          Fruit: <input list="fruitlist" id="fave" name="fave"/>
      <button type="submit">Submit Vote</button>
    <datalist id="fruitlist">
      <option value="Apples" label="Lovely Apples"/>
      <option value="Oranges">Refreshing Oranges</option>
      <option value="Cherries"/>

Each option element contained inside of the datalist represents a value that you want to propose to the user. The value attribute specifies the data value that will be used in the input element if that option is selected. You can use a different label to describe the option by using the label attribute or by defining content within the option element. You can see that we have done this for the Apples and Oranges option elements in code.