16.10　创建选择框

16.10　创建选择框

选择框非常适合向访问者提供一组选项，从而允许他们从中选取。它们通常呈现为下拉菜单的样式。如果允许用户选择多个选项，选择框就会呈现为一个带滚动条的项目框，如图16.10.1、图16.10.2和图16.10.3所示。

创建选择框的步骤

如果需要，输入描述菜单的文本。
输入。
输入name="label"，这里的label用于在收集的数据发送至服务器时对数据进行识别。
输入id="idlabel"，这里的idlabel是用于让对应的标签和JavaScript识别输入字段的文本。
如果需要，输入size="n"，这里的n代表选择框的高度（以行为单位）。
如果需要，输入multiple="multiple"，从而允许访问者选择一个以上的菜单选项（选择的时候需按住Control键或Command键）。
输入>。
输入。
如果需要，输入selected="selected"，指定该选项被默认选中。
输入value="label"，这里的label用于在该选项被选中时对将要发送至服务器的数据进行识别。
如果需要，输入label="menu option"，这里的menu option是应该出现在菜单里的选项文字。
输入>。
输入希望出现在菜单中的选项名称。
输入。
对每个选项重复第8步至第14步。
输入。

如果有一个选项很多的特别大的菜单，可能需要对这些选项进行分组，分别放入不同的类别。

对选择框选项进行分组

根据“创建选择框的步骤”，创建所需的选择框。
在希望放在同一子菜单中的第一组选项中的第一个option元素之前，输入。
输入label="submenutitle">，这里的submenutitle是子菜单的标题（如图16.10.4和图16.10.5所示）。
在该组的最后一个option元素之后，输入。
对每个子菜单重复第2步至第4步。

<label for="state">State:</label>
<select id="state" name="state">
     <option value="AL">Alabama</option>
     <option value="AK">Alaska</option>
     ...
</select>

图16.10.1　选择框由两种HTML元素构成：select和option。通常，在select元素里设置name属性，在每个option元素里设置value属性

select {
    font-size: 100%;
}

图16.10.2　我们再次使用CSS对字体大小进行调整。可以使用CSS对width、color和其他的属性进行调整，不过，不同的浏览器呈现下拉菜单列表的方式略有差异

16.10　创建选择框 - 图1

图16.10.3　除非设置了size属性，否则访问者就必须选择菜单中的某个选项。默认的选择是菜单中的第一个选项，或者是在HTML中指定了selected的选项

<label for="referral">Where did you find out about us?</label>
<select id="referral" name="referral">
<optgroup label="On-line">
     <option value="social_network">Social Network</option>
     <option value="search_engine">Search Engine</option>
</optgroup>
<optgroup label="Off-line">
     <option value="postcard">Postcard </option>
     <option value="word_of_mouth">Word of Mouth</option>
</optgroup>
</select>

图16.10.4　每个子菜单都有一个标题（在optgroup开始标记的label属性中指定）和一系列选项（使用option元素和常规文本定义）

16.10　创建选择框 - 图2

图16.10.5　浏览器通常不会创建真正的子菜单，而是对菜单项目进行分组显示

提示　如果添加了size属性，那么选择框看起来会更像一个列表，且没有自动选中的选项（除非设置了selected）。

提示　如果size大于选项的数量，访问者就可以通过点击空白区域让所有的选项处于未选中状态。

16.10 创建选择框