HTML入门教程
HTML入门教程
    • 请登录查看
    阅读(2194)

    HTML 表单选择

    最后一次修改 2017年08月04日

    HTML表单选择

    select 元素创建用户选择的选项列表。

    select 具有局部属性: name，disabled，form，size，multiple，autofocus，required 。它可以包含 contentsoption和 optgroup 元素。

    HTML5中的form，autofocus 和 required属性是新增的。

    name，disabled，form，autofocus 和 required 属性与输入元素的工作方式相同。

    size 属性指定要向用户显示的选项数。

    multiple属性允许用户选择多个值。

    您可以使用option元素来定义要向用户显示的选项。

    例1

    以下代码显示如何使用select和option元素。

    <!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="fave"> Favorite Fruit: 
      <select id="fave"name="fave">
          <option value="A" selected label="Apples">Apples</option>
          <option value="B" label="Batch">Batch</option>
          <option value="C" label="C">C</option>
          <option value="S" label="SQL">SQL</option>
      </select>
      </label>
    </p>
    <input type="submit" value="Submit" />
  </form>
</body>
</html>

    例2

    您可以使用select元素上的size属性向用户显示多个选项，并使用multiple属性允许用户选择多个选项。

      <!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="fave" style="vertical-align: top"> Favorite
        Fruit: <select id="fave" name="fave" size="5" multiple>
          <option value="a" selected label="Apples">Apples</option>
          <option value="o" label="Oracle">Oracle</option>
          <option value="c" label="C">C</option>
          <option value="p" label="Pascal">Pascal</option>
      </select>
      </label>
    </p>
    <input type="submit" value="Submit" />
  </form>
</body>
</html>

    选择结构

    您可以使用select元素上的 size 属性向用户显示多个选项，以及允许用户的多个属性以选择多个选项。...

    它具有局部属性:label，disabled和包含option元素。

    您可以使用 optgroup 元素将option元素分组在一起。

    label 属性允许您为已分组的选项创建标题。

    disabled 属性使选项元素不可选。

    以下代码显示正在使用的optgroup元素。

    <!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="fave" style="vertical-align: top"> Favorite
        Fruit: <select id="fave" name="fave">
          <optgroup label="Top  Choices">
            <option value="apples" label="Apples">Apples</option>
            <option value="oranges" label="Oranges">Oranges</option>
          </optgroup>
          <optgroup label="Others">
            <option value="cherries" label="Cherries">Cherries</option>
            <option value="pears" label="Pears">Pears</option>
          </optgroup>
      </select>
      </label>
    </p>
    <input type="submit" value="Submit" />
  </form>
</body>
</html>

    optgroup 标签仅用于结构;用户不能选择这些值作为值。

    例3

    以下代码显示了如何使用disabled选项创建选项组。

    <html>
<body>
  <form action="" method="get" name="frmInfo">
    Please select the product you are interested in:<br /> <select
      name="selInformation">
      <option disabled="disabled" value="">-- Hardware --</option>
      <option value="Desktop">Desktop computers</option>
      <option value="Laptop">Laptop computers</option>
      <option disabled="disabled" value="">-- Software --</option>
      <option value="OfficeSoftware">Office software</option>
      <option value="Games">Games</option>
      <option disabled="disabled" value="">-- Peripherals --</option>
      <option value="Monitors">Monitors</option>
      <option value="InputDevices">Input Devices</option>
      <option value="Storage">Storage</option>
    </select> <br />
    <br />
    <input type="submit" value="Submit" />
  </form>
</body>
</html>
    ← HTML 表单输入类型
    HTML 表单文本域 →
    提交