Community Learn Tools Library Leisure
search
English
Home > Web Front-end > H5 Tutorial > How to use the Datalist element tag in HTML5

How to use the Datalist element tag in HTML5

藏色散人
Release： 2018-12-05 09:43:37
Original
5667 people have browsed it



## 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.

How to use the Datalist element tag in HTML5

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>
Copy after login

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:

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!

Related labels：
Datalist元素
source：php.cn
Previous article：What does html5 mean? Next article：How to draw text using HTML5 canvas
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
Latest Articles by Author
Latest Issues
How to make floated elements stack vertically instead of horizontally in CSS? I'm trying to make a webpage with two columns, with main content on one side and additiona...
From 2024-04-06 20:45:26
0
2
386
Unable to get input element from website So I'm trying to get an input element from Twitter, but when I run it it keeps giving me a...
From 2024-04-06 18:59:57
0
1
442
Top-level method to replace a string with HTML code (generated from an array) Given a string like this...$htmlPattern="Usernameis:#name#andusercompanyis#company#&q...
From 2024-04-06 17:40:41
0
2
410
Invalid React child element (found: Object with key {clientVersion}). If you want to render a collection of child elements, use an array instead I have a multi-step form and when I try to submit it shows this error. However, if I use c...
From 2024-04-06 16:25:39
0
1
346
JavaScript hover events on vendor-specific pseudo-elements I have the following htmlinput tag. $("input[type='range']::-webkit-slider-thumb"...
From 2024-04-06 15:35:24
0
1
274
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template