阅读(2071)

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>