HTML <select>和<option>的用法（附带实例）

菜单列表类的控件主要用来选择给定选项中的一种，这类控件往往给定的选项比较多，使用单选按钮比较浪费页面空间。可以说，菜单列表类的控件主要是为了节省页面空间而设计的。

HMTL 中，菜单和列表分别通过 <select> 标记和 <option> 标记来实现。

菜单是一种最节省页面空间的控件，正常状态下用户只能看到一个选项，单击按钮打开菜单后才能看到全部的选项。

列表可以显示一定数量的选项，如果超出了这个数量，会自动出现滚动条，用户可以通过拖动滚动条来查看各选项。具体语法如下：

<select name='select_name' size=select_size multiple>
    <option value="option_value" selected>选项</option>
    <option value="option_value" >选项</option>
</select>

菜单和列表属性如下表所示：

表：菜单和列表属性

取值	描述
name	菜单和列表的名称
size	显示的选项数量
multiple	可同时选择列表中的多个项目
value	选项值
selected	默认选项

【实例 1】利用 <select> 标记创建一个用于学生业余生活调查的表单页面。代码如下：

<form>
    <h3>学生业余生活调查</h3>
    调查人姓名：<input type="text" name="username" size="10" /><br><br>
    爱好的体育运动：<select name="hobby">
        <option value="游泳" selected>游泳</option>
        <option value="足球">足球</option>
        <option value="篮球">篮球</option>
        <option value="跑步">跑步</option>
    </select><br><br>
    周末一般都在做什么：<br><br>
    <select name="where" size="4">
        <option value="在家" selected>在家</option>
        <option value="去逛街">去逛街</option>
        <option value="去访友">去访友</option>
        <option value="去郊游">去郊游</option>
    </select>
</form>

运行效果如下图所示：