What is the usage of html5 datalist tag? Here are usage examples of the datalist tag-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

What is the usage of html5 datalist tag? Here are usage examples of the datalist tag

寻∝梦

Sep 03, 2018 pm 05:33 PM

html5

This article mainly tells you about the usage of html5 datalist tag and usage examples of html5 datalist tag. This article talks about two examples of commonly used option boxes for everyone to choose from. Let’s take a look at this article together

Let’s first take a look at the usage of the html5 datalist tag:

tag defines a list of options. Please use this element in conjunction with the input element to define the possible values of the input.

The datalist and its options will not be displayed, it is just a list of legal input values.

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

Availability: datalist: A list that can be selected and input (more convenient than the select drop-down list, only)

Now let’s look at an example of the html5 datalist tag:

The following is an input element, its possible values are described in the datalist:

<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="PHP中文网">
  <option value="html">
  <option value="寻梦">
</datalist>

Copy after login

This is displayed in the browser as follows:

What is the usage of html5 datalist tag? Here are usage examples of the datalist tag

This It has no action effect. It is an input box. Now let’s take a look at the effect of clicking after moving the mouse up:

What is the usage of html5 datalist tag? Here are usage examples of the datalist tag

Look, the effect is coming out. This is the basic usage of html5 datalist tag.

The list attribute value of the input input box is the id of the datalist, so that the datalist can be associated with the input input box. The datalist itself does not display, it will only be automatically displayed when it needs to be matched with input input.

Another usage example of the html5 datalist tag:

In Web design, automatic drop-down prompts such as input boxes are often used, which will greatly facilitate users. enter. In the past, if you want to implement such a function, you must require developers to use some Javascript skills or related frameworks to make ajax calls, which requires a certain amount of programming work. But as HTML5 slowly becomes more popular, developers can use the new datalist tag to quickly develop very beautiful autocomplete component effects

html5 Code example of datalist tag:

<!DOCTYPE html>
<html>
<head>
<title>HTML5 datalist tag</title>
<meta charset="utf-8">
</head>
<p>
        浏览器版本：<input list="words">
</p>
<datalist id="words">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
<option value="Sogou">
<option value="Maxthon">
</datalist>
</body>
</html>

Copy after login

The effect is as shown in the picture:

What is the usage of html5 datalist tag? Here are usage examples of the datalist tag

This is the effect after clicking. Isn’t this option box very good? It is a frequently used option. frame.

Okay, that’s the introduction to the html5 datalist tag. If you have any questions, you can ask below.

【Editor’s Recommendation】

How to write html space code? Summary of the expression of html space code

How to center the Chinese characters in the col tag in html? Basic use of html col tag (examples included)

The above is the detailed content of What is the usage of html5 datalist tag? Here are usage examples of the datalist tag. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn