Home > Article > Web Front-end > How to use the Datalist element tag in HTML5

How to use the Datalist element tag in HTML5

藏色散人Original: 2018-12-03 15:28:145612browse

##fc86e7b705049fc9d4fccc89a2e80ee3 tag is a new tag in HTML 5. This element is used in forms to retrieve data from the user. Receiving data, it can display options for the user to select.

Recommended study: "

HTML5 Tutorial"

Below we will introduce it to you through specific code examples.

<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
    <title>Datalist元素使用示例</title>
</head>
<body>
<input name="section" list="scripts" />
<datalist id="scripts">
    <option value="PHP" />
    <option value="JavaScript" />
    <option value="java" />
    <option value="Go" />
    <option value="python" />
    <option value="c++" />
</datalist>
</body>
</html>

The effect is as shown below:

How to use the Datalist element tag in HTML5

#It has an auto-complete function to help users enter content in the text box, with a drop-down list box or radio button Differently, the user can write any text without being restricted by the options given by datalist. Datalist is bound (or linked) via the input element list attribute.

Note:

fc86e7b705049fc9d4fccc89a2e80ee3 tag defines the option list. Use this element in conjunction with an input element to define the possible values of the input.

The datalist and its options are not displayed, it is just a list of legal input values. You need to use the list attribute of the input element to bind the datalist.

This article is an introduction to the usage of the Datalist element in HTML5. It is simple and easy to understand. I hope it will be helpful to friends in need!

The above is the detailed content of How to use the Datalist element tag in HTML5. For more information, please follow other related articles on the PHP Chinese website!

Statement：

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

Previous article：What does html5 mean?Next article：What does html5 mean?

See more

How to use the Datalist element tag in HTML5

Related articles