在 HTML 中创建可选列表

<select> 标签用于在 HTML 文档中创建下拉列表。我们只需在 <select> 元素中添加"multiple"属性即可。现在，为了选择多个选项，我们使用以下语法 −

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

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

示例

以下是在 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>

相关文章

• HTML DOM 输入按钮对象
• HTML 画布 shadowBlur 属性
• HTML DOM address 对象
• HTML 画布 shadowColor 属性
• 使用 onmouseover 属性更改网页背景颜色
• HTML 画布 fillStyle 属性
• HTML frame 框架标签
• HTML Canvas clearRect() 方法
• HTML body 标签
• HTML optgroup 标签

有用资源

• html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/