【表单】select和option
坑军之王
199
<select>元素表示提供选项菜单的控件，其一般情况一<option>共同使用，使用示例如下：
<label for="pet-select">Choose a pet:</label>
<select name="pets" id="pet-select">
<option value="">--Please choose an option--</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="hamster">Hamster</option>
<option value="parrot">Parrot</option>
<option value="spider">Spider</option>
<option value="goldfish">Goldfish</option>
</select>针对对选项的分组，可以用<optgroup>将选项包裹住，示例如下：
<label for="dino-select">Choose a dinosaur:</label>
<select id="dino-select">
<optgroup label="Theropods">
<option>Tyrannosaurus</option>
<option>Velociraptor</option>
<option>Deinonychus</option>
</optgroup>
<optgroup label="Sauropods">
<option>Diplodocus</option>
<option>Saltasaurus</option>
<option>Apatosaurus</option>
</optgroup>
</select>接下来对这三个标签的属性进行说明：
首先是select标签
当然，全局属性也是可以在它里面生效
|
属性 |
属性值 |
说明 |
|
autocomplete |
/ |
|
|
autofocus |
on/off |
是否页面加载完成后自动聚焦 |
|
disabled |
true/false |
用户是否能进行交互 |
|
form |
自定义 |
与对应form元素进行绑定 |
|
multiple |
/ |
让用户在select中能够进行多选 |
|
name |
自定义 |
规定了控件的名称 |
|
require |
/ |
强制选定后才可提交，否则会报错 |
然后是option标签
|
属性 |
属性值 |
说明 |
|
disabled |
true/false |
定义选项是否可选 |
|
label |
|
表示选项含义的文本 |
|
selected |
|
定义选项一开始是否为选中状态 |
|
value |
|
定义提交给表单的值 |
最后是optgroup标签：
|
属性 |
属性值 |
说明 |
|
disabled |
true/false |
定义选项组内的选项是否可选 |
|
label |
|
选项组的名字，浏览器用以在用户界面中标记选项。使用这个元素时必须加上这个属性 |