下拉菜单 | 学习笔记

简介: 快速学习下拉菜单

开发者学堂课程【零基础学前端 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 的下拉框

image.png

增加 selected

<option value= “1971” selected>1971</option>

可以看到默认值为 1971

image.png

此外 <option></option>中的内容是显示给用户看的, <option value= “1970” >1970</option>

中间的 1970 是不被提交的,真正提交的是 value 的值。若 value 值分别为 1、2、3,则用户看到的是 1970、1971、1972,但是提交的是 1、2、3

相关文章
N..
|
2月前
|
开发框架 前端开发 UED
Bootstrap下拉菜单与选项卡
Bootstrap下拉菜单与选项卡
N..
16 1
|
6月前
|
前端开发 JavaScript Java
Layui的选项卡及菜单
Layui的选项卡及菜单
85 0
|
前端开发
bootstrap 组件之轮播图 折叠面板 下拉菜单 学习总结
bootstrap 组件之轮播图 折叠面板 下拉菜单 学习总结
|
前端开发
bootstrap 组件 警告框 徽章 面包屑导航 按钮 按钮组 学习总结
bootstrap 组件 警告框 徽章 面包屑导航 按钮 按钮组 学习总结
|
前端开发 开发者
复选框| 学习笔记
快速学习复选框。
128 0
复选框| 学习笔记
html+css实战38-下拉菜单
html+css实战38-下拉菜单
64 0
html+css实战38-下拉菜单
|
前端开发
Bootstrap教程(19)--下拉菜单、按钮式下拉菜单
本文目录 1. 概述 2. 下拉菜单 2.1 普通下拉菜单 2.2 更换颜色 2.3 更换尺寸 2.4 添加分割线 2.5 菜单分组 2.6 上拉菜单 3. 按钮式下拉菜单 4. 小结
317 0
Bootstrap教程(19)--下拉菜单、按钮式下拉菜单
|
Web App开发
怎样保持下拉菜单并截图?如何快速截图二级菜单?
怎样保持下拉菜单并截图?如何快速截图二级菜单?
482 0
怎样保持下拉菜单并截图?如何快速截图二级菜单?
|
Web App开发
Bootstrap学习笔记--下拉菜单,折叠,菜单,标签,Pills
下拉菜单: 下拉菜单是比较常见的 直接看源码: .dropdown表示下拉框 按钮和下拉框都要放在dropdown类的div下 要打开下拉菜单,请使用按钮或具有属性的类.
3194 0