HTML5: Your visual blueprint™ for designing rich web pages and applications

CREATE A DROP-DOWN LIST FOR TEXT INPUT SUGGESTIONS

If you have a text input field that supports text input and you want to provide a subtle list of suggested values, you can create a drop-down list of suggestions that will appear immediately under the form input as the user starts typing.:

<input type='text' ... list='listid'>
 <datalist id='listid'>
   <option label='label1' value='value1'>
   <option label='label2' value='value2'>
   ...
</datalist>

The type attribute can be a text-based input type, such as text, telephone, email, and search. In the input element, add a new attribute, list, and assign it an identifier. The datalist element must have a matching id attribute value, binding the datalist’s options to that input element. Within datalist ...