如何在HTML中包含下拉列表选项？

在HTML中创建下拉列表，我们使用<select> 命令，它通常用于表单中收集用户输入。要提交后引用表单数据，我们使用name属性。如果没有name属性，则不会有下拉列表的数据。

要将下拉列表与标签关联；需要id属性。要定义下拉列表中的选项，我们必须在<select> 元素内使用<option> 标签。

语法

以下是HTML中<select>标签的用法：

<select name=" " id="">
   <option value=" ">
   </option>
</select>

HTML <option> 标签还支持以下附加属性：

属性

值

描述

Disabled

disabled

禁用输入控件。按钮不会接受用户的更改。它也不能接收焦点，并且在按Tab键时会被跳过。

Label

text

标签文本 定义使用时的标签.

Selected

selected

定义页面加载时要选择的默认选项。

值

text

指定要发送到服务器的选项的值

Multiple

multiple

使用multiple属性可以一次选择多个选项。

Name

name

用于定义下拉列表中的名称

Required

required

使用此属性，用户在提交表单前必须选择一个值。

Size

number

此属性用于定义下拉列表中可见选项的数量

值

text

指定要发送到服务器的选项的值

Autofocus

Autofocus

用于在页面加载时自动获取下拉列表的焦点

示例

以下示例在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>

更新于：2023年11月18日

1K+ 次浏览

启动您的职业生涯

完成课程获得认证

开始学习
广告