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

2023-11-18 17:18:40 浏览数 (2)

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

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

语法

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

代码语言：javascript复制
<select name=” “ id=””>
   <option value=” “>
   </option>
</select>

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

属性

价值

描述

禁用

禁用

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

标签

发短信

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

选择

选择

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

价值

发短信

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

倍数

倍数

通过使用，可以一次选择多个属性选项。

名字

名字

它用于在下拉列表中定义名称

必填

必填

通过使用此属性，用户在提交表单之前选择一个值。

大小

数

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

价值

发短信

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

自动对焦

自动对焦

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

例

以下示例在HTML的下拉列表中添加一个选项

代码语言：javascript复制
<!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> 标记的不同属性的使用。

代码语言：javascript复制
<!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> 标签在列表中添加选项 -

代码语言：javascript复制
<!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>
html webview 访问控制列表

0 人点赞