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

原创

SEO-juper

发布于 2023-11-18 17:18:40

23.1K0

文章被收录于专栏：文章分享文章分享

为了在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>

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

html