HTML5 <datalist> Tag

Topic: HTML5 Tags Reference« Prev|Next »

Description

The <datalist> element specifies a set of pre-defined options for an <input> element. It can be used to provide the quick choices for an input field like an "autocomplete" feature. Its not only saves the time of a user but also reduces errors, because the user has less likelihood of making a spelling mistake. The list attribute of the input element is used to bind it together with a datalist element.

The following table summarizes the usages context and the version history of this tag.

Placement: Block
Content: <option> elements
Start/End Tag: Start tag: required, End tag: required
Version: New in HTML5

Syntax

The basic syntax of the <datalist> tag is given with:

HTML / XHTML: <datalist> ... </datalist>

The example below shows the <datalist> tag in action.

  • <p>Enter your favorite browser name:</p>
  • <input type="text" list="browsers">
  • <datalist id="browsers">
  •     <option value="Firefox">
  •     <option value="Chrome">    
  •     <option value="Internet Explorer">
  •     <option value="Opera">
  •     <option value="Safari">
  • </datalist>

Tag-Specific Attributes

The <datalist> tag doesn't have any specific attribute.


Global Attributes

Like all other HTML tags, the <datalist> tag supports the global attributes in HTML5.


Event Attributes

The <datalist> tag also supports the event attributes in HTML5.


Browser Compatibility

The <datalist> tag is supported in all major modern browsers.

Browsers Icon

Basic Support—

  • Firefox 2+
  • Google Chrome 4+
  • Internet Explorer 9+
  • Apple Safari 3.1+
  • Opera 9+

Further Reading

See tutorial on: HTML Forms.

Related tags: <input>, <option>.

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.