BBM Tutor
BBM Tutor

HTML5 Tag - <datalist> Element

Definition & Uses of HTML5 <datalist> Element

The HTML5 <datalist> tag is a new tag, introduced in HTML5.

Syntax of HTML5 <datalist> Tag

<datalist id="value">>
<option value="value">Predefined Option1<option>
<option value="value">Predefined Option2<option>
<datalist>

What is HTML5 <datalist> Tag?

  • The datalist element represents a set of option elements that represent predefined options for other controls.
  • For example, if a user began entering some text into a text field, a list would drop down with prefilled values that they could choose from.
  • The datalist element contains <option> elements much like the <select> element, though <datalist> itself is not an independent control. Instead it is added or attached to an <input> element using list attribute.
  • The contents of the element represents fallback content for legacy user agents, intermixed with <option> elements that represent the predefined options.
  • It should be closed properly with its end tag.

Where to use HTML5 <datalist> Tag?

  • The <datalist> tag is used to provide an "autocomplete" feature on <input> elements. When the users double click the input field, they will see a drop-down list of pre-defined options as the input data.
  • The <datalist> tag can be used in conjunction with an <input> element.
  • This is the best feature to use where the users doesn't know what to fill in the input box.
  • It can be used with,
    1. <input type="text" />
    2. <input type="url" />
    3. <input type="tel" />
    4. <input type="color" />
    5. Data & Time (including Month etc.), Range and more.

Tips & Notes

  • Note that the options cannot be grouped with the <optgroup> tag.
  • The <datalist> tag is supported in Internet Explorer 10, Firefox, Opera, and Chrome. (It is not supported in Internet Explorer 9 and earlier versions, or in Safari.

Simple HTML5 Example

If your browser does not support the <datalist> tag, the options will be displayed as fallback content.

<!DOCTYPE HTML>
<html>
<head>
<title> HTML5 <datalist> - HTML5 Tags Tutor </title>
</head>
<body>
<article>
<p>
<h3>Ur Favorite Language:</h3>
<input list="lang">
<datalist id="lang">
<option value="PHP">PHP<option>
<option value="HTML5">HTML<option>
<option value="CSS">CSS<option>
<option value="ASP">ASP<option>
<option value="ASP.NET">ASP.NET<option>
<datalist>
</p>
</article>
</body>
</html>

Output Screen

Ur Favorite Language

Attributes

  • Attributes are the features added to a tag to provide the browser with more information about how the tag should appear or behave.
  • There are 3 type attributes a tag can have. They are Global Attributes, Event Attributes and Element-Specific Attributes.
  • The <datalist> tag is also capable of supporting the Global Attributes and Event Attributes in HTML5.

Element-Specific Attributes

Attributes

Description

Sample HTML5 Example#2

If your browser does not support the <datalist> tag, the options will be displayed as fallback content.

<!DOCTYPE HTML>
<html>
<head>
<title> HTML5 <datalist> - HTML5 Tags Tutor </title>
</head>
<body>
<article>
<p>
<h3>Ur Favorite Color:</h3>
<input type="color" list="color">
<datalist id="color">
<option value="#0000FF">#0000FF<option>
<option value="#FF0099">#FF0099<option>
<option value="#66CCFF">#66CCFF<option>
<option value="#999FFF">#999FFF<option>
<option value="#FFCC00">#FFCC00<option>
<datalist>
</p>
</article>
</body>
</html>

Output Screen

Ur Favorite Color:

Sample HTML5 Example#3

If your browser does not support the <datalist> tag, the options will be displayed as fallback content.

<!DOCTYPE HTML>
<html>
<head>
<title> HTML5 <datalist> - HTML5 Tags Tutor </title>
</head>
<body>
<article>
<p>
<h3>Ur Favorite Day:</h3>
<input type="date" list="days">
<datalist id="days">
<option label="New Year">2013-01-01<option>
<option label="Valendines Day">2013-02-14<option>
<option label="Fools Day">2013-04-01<option>
<option label="Labor Day">2013-05-01<option>
<datalist>
</p>
</article>
</body>
</html>

Output Screen

Usage of datalist tag with [type=date]

BBM Invoice
 
Disclaimer: Use of this website signifies your agreement to the Terms of Use and Online Privacy Policy.