下拉菜单 | 学习笔记

简介: 快速学习下拉菜单

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

相关文章
|
5月前
|
前端开发
导航条下拉菜单的实现及思路
本文介绍了导航条下拉菜单的实现方法和思路,包括HTML结构的搭建和CSS样式的编写,通过使用hover伪类来控制下拉菜单的显示与隐藏。
导航条下拉菜单的实现及思路
|
7月前
|
前端开发 JavaScript
Elementplus如何使面包屑往左边移动,右边头像下拉菜单如何写,下拉菜单如何靠中一点,下拉菜单出现文字不对齐怎么办,如何设置鼠标样式,如何使用阿里妈妈icon,如何点击icon全屏
Elementplus如何使面包屑往左边移动,右边头像下拉菜单如何写,下拉菜单如何靠中一点,下拉菜单出现文字不对齐怎么办,如何设置鼠标样式,如何使用阿里妈妈icon,如何点击icon全屏
Elementplus如何使面包屑往左边移动,右边头像下拉菜单如何写,下拉菜单如何靠中一点,下拉菜单出现文字不对齐怎么办,如何设置鼠标样式,如何使用阿里妈妈icon,如何点击icon全屏
|
算法 前端开发
下拉选择框
下拉选择框
118 1
html+css实战38-下拉菜单
html+css实战38-下拉菜单
98 0
html+css实战38-下拉菜单
|
前端开发
Bootstrap教程(19)--下拉菜单、按钮式下拉菜单
本文目录 1. 概述 2. 下拉菜单 2.1 普通下拉菜单 2.2 更换颜色 2.3 更换尺寸 2.4 添加分割线 2.5 菜单分组 2.6 上拉菜单 3. 按钮式下拉菜单 4. 小结
376 0
Bootstrap教程(19)--下拉菜单、按钮式下拉菜单
|
C# C++
C# WPF 左侧菜单右侧内容布局效果实现
原文:C# WPF 左侧菜单右侧内容布局效果实现 我们要做的效果是这样的,左侧是可折叠的菜单栏,右侧是内容区域,点击左侧的菜单项右侧内容区域则相应地切换。 wpf实现的话,我的办法是用一个tabcontrol,修改tabcontrol的样式模板,首先将控件的TabStripPlacement设置为left使tabcontrol的item header部分靠左内容靠右,然后用一个Expander将TabPanel包住实现可折叠菜单效果,最后就是把用到的控件样式修改一下即可。
5116 0
4款侧边栏弹出效果
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.
891 0
|
Web App开发 JavaScript