Use Datalist Tag to Specify Pre-defined Text for Input Element

By Stephen Bucaro

The HTML5 <datalist> element allows the designer to provide a list of suggested values for a text input box. If the user doesn't like any of the items in the list, they can still type their own text into the text box. Example code for a datalist is shown below.

<datalist id="autobrand">
  <option value="Fiat-Chrysler">
  <option value="Ford Motor Company">
  <option value="General Motors">
  <option value="Tesla Motors">
  <option value="Toyota Motor Company">
</datalist>

<label for="autobrand">Auto Brand <input type="text" list="autobrand" name="autobrand"></label>

Use the list attribute in the <input> element to associate it with the id of its respective datalist.

Note the datalist is similar to the select list, except the select list does not allow the user to enter a value not in the list.

More HTML Code:
• 
• HTML abbr and acronym Tag
• Meta Tag Basics
• HTML5 Spinbox Control
• Easy Form Design
• The Font Tag
• HTML Textarea Basics
• HTML Select List Basics
• Line Break Basics
• Using col and colgroup to Apply Attributes to a Table Column

 Follow @Stephen Bucaro

 General Web Design
 HTML Quick Reference
 CSS Quick Reference
 Java Script Quick Reference
 HTML Design
 Graphics Design
 Easy Cascading Style Sheets
 Easy Java Script Code
 Web Design Tools
 Coding Issues