开发者学堂课程【零基础学前端 HTML+CSS:下拉菜单】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/398/detail/5121
下拉菜单
内容介绍:
一、下拉单选框
二、示例
一、下拉单选框
下拉单选框一次能选择一个选项。用 < select > 标签描述,每一个选项用子标签 < option > 描述。
例:
<select name="select" id="select">
<option value="010">北京</option>
<option value="021" selected="selected">上海
</option>
</select>
上海
北京
上海
下拉菜单一次选择一个选项,由 select 和 option 两个标签组成,option 里放选择的内容
select 标签的属性︰
name 属性︰指定下拉单选框的名字,自行定义,用英文字母定义即可。
option 标签的 type 属性
value 属性︰指定该选项的值
selected 属性∶该属性固定值为 selected,表示选中该选项
二、示例
继续上节代码输入:
<tr>
<td>
选择出生日期:
<select name= “d1”>
<option value= “1970”>1970</option>
<option value= “1971”>1971</option>
<option value= “1972”>1972</option>
</select>
</td>
</tr>
运行如图可以看到 1970、1971、1972 的下拉框
增加 selected
<option value= “1971” selected>1971</option>
可以看到默认值为 1971
此外 <option></option>
中的内容是显示给用户看的, <option value= “1970” >1970</option>
中间的 1970 是不被提交的,真正提交的是 value 的值。若 value 值分别为 1、2、3,则用户看到的是 1970、1971、1972,但是提交的是 1、2、3