数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学在HTML中创建可选择的列表
<select>标签用于在HTML文档中创建下拉列表。我们只需要在<select>元素中添加“multiple”属性。现在，为了选择多个选项，我们使用以下语法：
<select name=” “> <option value=” “ > text </option> </select>
HTML <option>标签还支持以下附加属性：
属性 |
值 |
描述 |
|---|---|---|
Disabled |
disabled |
禁用输入控件。按钮将不接受用户的更改。它也无法接收焦点，并且在按Tab键时会被跳过。 |
Label |
text |
在使用<optgroup>时定义要使用的标签。 |
Selected |
selected |
定义页面加载时要选择的默认选项。 |
值 |
text |
指定要发送到服务器的选项的值 |
Multiple |
multiple |
使用multiple属性可以一次选择多个选项。 |
Name |
name |
用于在下拉列表中定义名称 |
Required |
required |
使用此属性，用户必须在提交表单之前选择一个值。 |
Size |
number |
此属性用于定义下拉列表中可见选项的数量。 |
Autofocus |
Autofocus |
用于在页面加载时自动获取下拉列表的焦点。 |
示例
以下是使用HTML中<select>标签的示例：
<!DOCTYPE html>
<html>
<head>
<title>HTML select Tag</title>
</head>
<body>
<h1>TutorialsPoint</h1>
<h2>selectable list in HTML</h2>
<form action="/cgi-bin/dropdown.cgi" method="post">
<select name="dropdown">
<option value="Data Structures" selected>Data Structures</option>
<option value="Data Mining">Data Mining</option>
</select>
<br>
<br>
<input type="submit" value="Submit" />
</form>
</body>
</html>
示例
在下面的示例中，我们尝试使用<optgroup>标签在HTML中创建一个可选择的列表：
<!DOCTYPE html>
<html>
<body>
<h1>Inserting optgroup in select element</h1>
<p>It is used to group related options in a drop-down list:</p>
<form action="/action_page.php">
<label for="class">Choose Grade:</label>
<select name="class" id="class">
<optgroup label="Grade 1">
<option value="A">A Section</option>
<option value="B">B Section</option>
<option value="C">C Section</option>
</optgroup>
<optgroup label="Grade 2">
<option value="A">A Section</option>
<option value="B">B Section</option>
<option value="C">C Section</option>
</optgroup>
</select>
<br>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
示例
再考虑另一个例子：
<!DOCTYPE html>
<html>
<body>
<h1>Drop-Down List using Select Command</h1>
<p>The select element is used to create a drop-down list.</p>
<form method="get" action="#">
<label for="cities"> Choose City:</label>
<select name="cities" id="cities">
<option value="hyd">Hyderabad</option>
<option value="Chennai">Chennai</option>
<option value="bang">Banglore</option>
<option value="Mumbai">Mumbai</option>
</select>
<br>
<br>
<input type="submit" value="Choose city">
</form>
</body>
</html>
更新于：2023年10月10日
3K+ 浏览量
广告