<form>
<fieldset> <div> <label>Text input with datalist</label> <input type="text" value="" list="fav-color" placeholder="Type your favorite color" /> <datalist id="fav-color"> <option value="Red"></option> <option value="Orange"></option> <option value="Yellow"></option> <option value="Green"></option> <option value="Blue"></option> <option value="Purple"></option> </datalist> </div> <div> <label>Range input with datalist</label> <input id="number_input" type="range" value="0" min="0" max="100" list="number" /> <output for="number_input">0</output> <datalist id="number"> <option>25</option> <option>50</option> <option>75</option> </datalist> <script> if (document.querySelector) { document.querySelector('#number_input').onchange = function(e) { e.target.nextElementSibling.innerText = e.target.value; } } </script> </div> <div> <label>Color input with datalist</label> <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> </div> <div> <label>Date input with datalist</label> <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> </div> <div> <label>Time input with datalist</label> <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> </div> <div> <label>Datetime-local input with datalist</label> <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> </div> <div> <label>Month input with datalist</label> <input type="month" list="months" /> <datalist id="months"> <option label="End of last century">2000-12</option> <option>2010-01</option> <option>2011-01</option> <option>2012-01</option> <option>2013-01</option> </datalist> </div> <div> <label>Week input with datalist</label> <input type="week" list="weeks" /> <datalist id="weeks"> <option label="First week of 2013">2013-W01</option> <option label="Second week of 2013">2013-W02</option> <option label="13th week of 2013">2013-W13</option> <option label="The last week of 2013">2013-W52</option> </datalist> </div> </fieldset>
</form>