在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+ 浏览量

启动你的职业生涯

完成课程获得认证

开始学习
广告