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

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.

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] is not available on your browser 10 15 30 50 90 <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] is not available on your browser #ff0000 #0000ff #00ff00 #ffff00 #00ffff #f00 red <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] is not available on your browser 2013-07-04 2013-09-02 2013-10-14 <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] is not available on your browser 00:00 06:00 12:00 18:00 <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] is not available on your browser <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] is not available on your browser 1976-02 2000-12 2010-01 2012-11 <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>