HTML Reference Manual

HTML Tag大全

HTML: <datalist> Tag

The HTML <datalist> element contains a set of <option> elements, which represent the optional values for other form controls; The <datalist> tag is an HTML5element, which defines the suggested value list for the <input> tag. These suggested values will be displayed as a dropdown list in the input control, and the available options will be filtered when the user enters data into the input control. This tag is also commonly referred to as <datalist&

Online Example

Below is an <input> element, where the possible values are described in the <datalist>:

Example

!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5　datalist tag usage (Basic Tutorial Website　oldtoolbag.com)</title>
</head>
<body>
　label for="tutorial_choice">Tutorials:　</label>
　　input list="tutorial_types" name="tutorial_choice" id="tutorial_choice">
　　datalist id="tutorial_types">
　　　　<option value="HTML">
　　　　<option value="CSS">
　　　　<option value="SQL">
　　</datalist>
</body>
</html>

Test and see ‹/›

In this HTML5In the document example, we used the <datalist> tag to create a suggested value list for the <input> tag. It is recommended to use3values (HTML, CSS, and SQL), which will be displayed as a dropdown list for user selection.

Browser Compatibility

The <datalist> tag has basic support in the following browsers:

IEFirefoxOperaChromeSafari

Definition and usage instructions of the tag

The HTML <datalist> element is located within the <body> tag. The <datalist> tag is usually located within the <form> tag.

The <datalist> tag contains a set of <option> tags that provide possible values for the associated <input> tag.

The <datalist> tag specifies the list of possible options for the <input> element.

The <datalist> tag is used to provide the "auto-complete" feature for the <input> element. Users can see a dropdown list with pre-defined options, which will be used as input data for the user.

Please use the list attribute of the <input> element to bind the <datalist> element.

HTML 4.01 with HTML5differences

<datalist> tag is a part of HTML5 and the new tags.

Global attributes

Support for <datalist> tag Global attributes of HTML.

Event attributes

Support for <datalist> tag HTML event attributes.

HTML: <dd> Tag HTML: <command> Tag