datalist experiment

By using <datalist>, you can define a list of suggestions you want the user to select from. Users can optionally select from your suggestions as well as typing it by themselves.

Options can be tagged with datalist and referenced from the input element using list attribute by its id. See examples below.

Examples

input[type=text] datalist

For text type, datalist simply suggests list of words.

<input type="text" value="" list="fruits" />
<datalist id="fruits">
  <option value="Apple"></option>
  <option value="Orange"></option>
  <option value="Peach"></option>
  <option value="Melon"></option>
  <option value="Strawberry"></option>
</datalist>

input[type=range] datalist

For range type, datalist suggests recommended value as ticks. Chrome snaps to those ticks when moving slider.

0
<input type="range" value="0" min="0" max="100" list="number" />
<datalist id="number">
  <option>10</option>
  <option>15</option>
  <option>30</option>
  <option>50</option>
  <option>90</option>
</datalist>

input[type=color] datalist

For color type, datalist suggests the recommended color on the swatch palette. You can optionally pick arbitorary color from the color palette.

<input type="color" value="#000000" list="color" />
<datalist id="color">
  <option>#ff0000</option>
  <option>#0000ff</option>
  <option>#00ff00</option>
  <option>#ffff00</option>
  <option>#00ffff</option>
</datalist>

input[type=date] datalist

For date type, datalist suggests a list of recommended dates. You can also specify labels for those dates by giving label attribute to option tags.

<input type="date" list="days" />
<datalist id="days">
  <option label="Independence Day">2013-07-04</option>
  <option label="Labor Day">2013-09-02</option>
  <option label="Columbus Day">2013-10-14</option>
</datalist>

input[type=time] datalist

For time type, datalist suggests a list of recommended times. You can also specify labels for those times by giving label attribute to option tags.

<input type="time" list="times" />
<datalist id="times">
  <option label="Midnight">00:00</option>
  <option>06:00</option>
  <option label="Noon">12:00</option>
  <option>18:00</option>
</datalist>

input[type=datetime-local] datalist

For datetime-local type, datalist suggests a list of recommended datetime-locals. You can also specify labels for those datetime-locals by giving label attribute to option tags.

<input type="datetime-local" list="datetime-locals" />
<datalist id="datetime-locals">
  <option label="Santa Visit">2012-12-24T23:59</option>
  <option label="Chrismas party">2012-12-25T18:00</option>
  <option>2012-12-30T00:00</option>
  <option label="Happy New Year">2013-01-01T00:00</option>
</datalist>

input[type=month] datalist

For month type, datalist suggests a list of recommended months. You can also specify labels for those months by giving label attribute to option tags.

<input type="month" list="months" />
<datalist id="months">
  <option label="Eiji's birthday">1976-02</option>
  <option label="End of last century">2000-12</option>
  <option>2010-01</option>
  <option label="Now">2012-11</option>
</datalist>

input[type=week] datalist

For week type, datalist suggests a list of recommended weeks. You can also specify labels for those weeks by giving label attribute to option tags.

<input type="week" list="weeks" />
<datalist id="weeks">
  <option label="First week of 2012">2012-W01</option>
  <option label="Second week of 2012">2012-W02</option>
  <option label="13th week of 2012">2012-W13</option>
  <option label="The last week of 2012">2012-W52</option>
</datalist>

Compatibility

Find out the latest compatibility at "When can I use".


Learn more

datalist specification can be found here.