如何在HTML的下拉列表中包含选项？
导读：为了在HTML中创建下拉列表，我们使用<select>命令，它通常用于收集用户输入的表单。为了在提交后引用表单数据，我们使用 name 属性。如果没有 name 属性，则下拉列表中将没有数据。用于将下拉列表与标签相关联;id 属...
为了在HTML中创建下拉列表，我们使用select> 命令，它通常用于收集用户输入的表单。为了在提交后引用表单数据，我们使用 name 属性。如果没有 name 属性，则下拉列表中将没有数据。
用于将下拉列表与标签相关联; id 属性是必需的。要在下拉列表中定义选项，我们必须在 select> 元素中使用 option> 标签。
语法
以下是 HTML 中 select> 标签的用法 -
select name=” “ id=””>
option value=” “>
/option>
/select>
HTML option> 标签还支持以下附加属性：
属性 | 价值 | 描述 |
|---|---|---|
禁用 | 禁用 | 禁用输入控件。该按钮不会接受用户的更改。它也无法接收焦点，并且在 Tab 键时将被跳过。 |
标签 | 发短信 | 标签文本 定义使用时要使用的标签 |
选择 | 选择 | 定义页面加载时要选择的默认选项。 |
价值 | 发短信 | 指定要发送到服务器的选项的值 |
倍数 | 倍数 | 通过使用，可以一次选择多个属性选项。 |
名字 | 名字 | 它用于在下拉列表中定义名称 |
必填 | 必填 | 通过使用此属性，用户在提交表单之前选择一个值。 |
大小 | 数 | 此属性用于定义下拉列表中可见选项的数量 |
价值 | 发短信 | 指定要发送到服务器的选项的值 |
自动对焦 | 自动对焦 | 它用于在页面加载时自动获取下拉列表的焦点 |
例
以下示例在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>
例
下面是另一个示例，演示了 option> 标记的不同属性的使用。
!DOCTYPE html>
html>
head>
title>
Form Validation/title>
/head>
body>
h1>
Form Validation /h1>
form>
label>
Choose validation option:/label>
select name="credentials" id="credentials" onchange="displayField()">
option value="select">
Select/option>
option value="pwd">
Password Validation/option>
option value="pin">
Pin Validation/option>
option value="mob">
Mobile Validation/option>
/select>
br />
br />
div id="1" hidden>
label>
Enter your password: /label>
input type="text" id="pwd" />
/div>
div id="2" hidden>
label>
Enter your pin: /label>
input type="number" id="pin" />
/div>
div id="3" hidden>
label>
Enter your mobile number: /label>
input type="number" id="mob" />
/div>
button onclick="validate()" />
OK/button>
/form>
/body>
/html>
例
在以下示例中，我们尝试使用 select> 标签和 optgroup> 标签在列表中添加选项 -
!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>
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 如何在HTML的下拉列表中包含选项？
本文地址： https://pptw.com/jishu/573696.html