Home > Web Front-end > Front-end Q&A > What are the tags used to implement drop-down lists in html5

What are the tags used to implement drop-down lists in html5

青灯夜游
Release: 2021-12-15 18:22:33
Original
9184 people have browsed it

html5 implements drop-down list tags such as "<select>" and "<option>", and the syntax is "<select><option>list option value..."; the select tag is used to build the drop-down list frame, and the option tag is used to define the list options.

What are the tags used to implement drop-down lists in html5

The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.

In HTML5, if you want to implement a drop-down list, you need to use <select></select> and <option></option> together. Syntax:

<select>
    <option>列表选项值</option>
    .....
</select>
Copy after login

Among them, the <select> tag is used to create a drop-down list, and the <option> tag represents each item (entry) in the drop-down list.

Example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>

	<body>
			喜欢的水果:
			<select>
				<option>请选择选项</option>
				<option>苹果</option>
				<option>梨子</option>
				<option>桃子</option>
				<option>香蕉</option>
				<option>李子</option>
				<option>菠萝</option>
				<option>榴莲</option>
			</select>
	</body>
</html>
Copy after login

What are the tags used to implement drop-down lists in html5

It can be seen that the drop-down list will display the first item first by default, so what if a certain item is pre-selected? You can use the selected attribute of the <option> tag.

After setting the selected attribute for the <select> tag, you can pre-select an item through selected="selected" of the <option> tag. The specific usage method is as follows:

喜欢的水果:
<select>
	<option>请选择选项</option>
	<option>苹果</option>
	<option>梨子</option>
	<option>桃子</option>
	<option selected="selected">香蕉</option>
	<option>李子</option>
	<option>菠萝</option>
	<option>榴莲</option>
</select>
Copy after login

What are the tags used to implement drop-down lists in html5

Recommended tutorial: "html video tutorial"

The above is the detailed content of What are the tags used to implement drop-down lists in html5. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
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 Issues
html5 validation for symfony 2.1
From 1970-01-01 08:00:00
0
0
0
The difference between HTML and HTML5
From 1970-01-01 08:00:00
0
0
0
html5 show hide
From 1970-01-01 08:00:00
0
0
0
Can PDF files run HTML5 and Javascript?
From 1970-01-01 08:00:00
0
0
0
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template