Article introduction of Wulin.com (www.vevb.com): Datalist generally does not go alone, it needs to be used with the input tag, just like the label tag and the input tag. Since it is used with the input tag, there must be a "special relationship" between these two tags, otherwise the input and datalist will not recognize each other. So how can they establish this relationship? At this time we need
Note: In some other tutorials or materials, the datalist tag is called a drop-down list. I think this name is not accurate enough and I cannot understand this tag at once. For example, some time ago: A friend asked me if datalist is a select that can customize the style? , I later learned that some books or tutorials call drop-down lists, which lead to beginners' misunderstandings. So how does this tag call it appropriate? After we have read the following cases, I will explain:datalist tag:
Datalist introduction:
Datalist generally does not go alone, it needs to be used with the input tag, just like label tags and input tags. Since it is used with the input tag, there must be a special relationship between these two tags, otherwise the input and datalist will not recognize each other. So how can they establish this relationship? At this time, we need a new attribute list (note, not for). List is the same as for. The value of list is set to the id of the form element, so that they will be automatically associated.
Chrome does not support this tag, Firefox and Opera can support it well
Datalist function:
We often see in the search box online that when you enter a character, the keywords you entered will be automatically listed below the input box, such as Google or Baidu searches, as shown in the figure below:
This effect is not implemented with HTML5 datalist technology
datalist case:
datalist description:
I personally think it is more appropriate to call datalist an automatic completion list because it is not a drop-down list.