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.
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>
For range type, datalist suggests recommended value as ticks. Chrome snaps to those ticks when moving slider.
<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>
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>
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>
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>
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>
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>
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>
Find out the latest compatibility at "When can I use".
datalist specification can be found here.