What is the use of HTML5 DataList tags? Here are examples of usages of DataList tags

This article is mainly about the use of HTML5 DataList tags and the use of HTML5 DataList tag examples. This article says two commonly used options box examples for everyone to choose to watch, let's look at this article together

Let's take a look at the usage of the HTML5 DataList tag:

<datalist> tags define a list of options. Use this element in conjunction with the INPUT element to define the possible values for input.

DataList and its options are not displayed, it is just a valid list of input values.

Use the List property of the input element to bind the DataList.

Availability: DataList: Selectable list can be entered (easier than select drop-down list, only)

Now let's look at an example of a HTML5 DataList tag:

The following is an INPUT element that describes its possible values in DataList:

<input id= "MyCar" list= "Cars"/><datalist id= "Cars" >  <option value= "topic.alibabacloud.com" >  <option value= "html" >  <option value= "Dream Quest" ></datalist>

This is shown in the browser as follows:

This is not the effect of any action, is an input box, now let's take a look at the mouse to move up after the Click Effect:

You see, the effect came out. This is the basic usage of the HTML5 DataList tag.

The List property value of the input box is the ID of DataList so that DataList can be associated with the input box. The DataList itself does not appear, and is automatically displayed only when it needs to mate with input inputs.

Let's get another HTML5. Examples of usage of DataList tags:

In the web design, the automatic drop-down prompt, such as the input box, is often used, which greatly facilitates the user's input. In the past, if you were to implement such a feature, you would have to ask developers to use some JavaScript techniques or related frameworks for Ajax calls, which required a certain amount of programming effort. But with HTML5 's popularity, developers can use the new DataList tag to quickly develop a very beautiful AutoComplete component.

HTML5 code examples for DataList tags:

<! DOCTYPE html>
Effect:


This is the effect after the click, so the option box is not very good and is a frequently used option box.

Well, the above is the introduction of the HTML5 DataList label, the problem can be asked below.