<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>