表单元素三

下拉列表

<select>元素用来创建下拉列表。

<option>标签定义下拉列表中的一个选项（一个条目）

xxxxxxxxxx
<form name="input" action="url" method="get">
    <select>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>
</form>

<optgroup>标签经常用于把相关的选项组合在一起。

如果你有很多的选项组合, 你可以使<optgroup> 标签能够很简单的将相关选项组合在一起。

xxxxxxxxxx
<form name="input" action="url" method="get">
    <select>
        <optgroup label="Swedish Cars">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
        </optgroup>
        <optgroup label="German Cars">
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
        </optgroup>
    </select>
</form>

多行文本框

<textarea>标签定义一个多行的文本输入控件。文本区域中可容纳无限数量的文本。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性

xxxxxxxxxx
<form name="input" action="url" method="get">
    <textarea rows="10" cols="30">我是一个文本框</textarea>
</form>

label

<label>标签为 input 元素定义标注（标记）。

label元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同

温馨提示

for属性可把 label绑定到另外一个元素。请把 for 属性的值设置为相关元素的 id属性的值

实时效果反馈

1.下列实现一个下拉列表，划横线处应该填写内容是：

xxxxxxxxxx
<form name="input" action="url" method="get">
    ___
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    ___
</form>

A <option></option>

B <textarea></textarea>

C <label></label>

D <select></select>

答案

1=>D