每天15min-HTML5(12)-表单(下)
来源:互联网 发布:张维为 知乎 编辑:程序博客网 时间:2024/06/05 20:48
主要内容
1、下拉列表标签
2、label标签使用方法
3、filedset和legend标签的使用方法
下拉列表标签
在网页当中经常会需要让用户在一系列当中的选项当中选择一个,这个功能的需求有点像我们之前为大家介绍的单选按钮。但是有些时候选项太多,例如让用户选择自己的出生年份,按照今年来说这个选项至少应该提供从1950至2016,这么多选项如果都使用单选按钮列出来,肯定非常的不美观,所以说需要使用一种名为下拉列表的标签。
下拉列表标签名为select,每向网页当中插入一个select标签,就会在网页当中插入一个下来菜单,该标签有一种子标签名为option,option标签的作用就是在下拉列表当中插入一个选项,有多少个选项就需要有多少个option标签。
label标签的使用方法
在一个表单当中可能存在有多个输入标签,有的需要用户输入用户名,有的需要用户输入密码,有的需要用户输入邮箱,那么我们应当让用户明确这些控件的用途呢?
这个时候就需要使用label标签了,大家可以简单的理解它的作用就是给控件起一个名字。同时结合label标签的for属性和控件的id属性,还可以方便用户的操作。
获取鼠标焦点:
<label for="username">userName</label><input type="text" name="username" id="username">
filedset和legend标签的使用方法
在有些网站上可能会用到比较大的表单,这个时候的为了方便用户查看,就需要将表单当中的控件进行分组显示。此时就需要使用filedset标签和legend标签。
fieldset标签可以将表单内的相关元素分组,浏览器可以采用比较特殊的方式显示他们,比如加上边框,或者是3D效果等等。
而legend标签则可以给这些分好组的空间进行命名,让整个表单的结构看起来更加的清晰~
源代码:
<!DOCTYPE html><html><head><title>form02</title><meta charset="utf-8"></head><body><form action="" method=""><select name="year"><option value="1994">1994</option><option value="1995">1995</option><option value="1996">1996</option><option value="1997">1997</option></select><br/><label for="username">userName:</label><input type="text" name="username" id="username"><fieldset><legend>Name</legend><label for="firstName">firstName</label><input type="text" name="firstName" id="firstName"><label for="lastName">lastName</label><input type="text" name="lastName" id="lastName"></fieldset><br/><fieldset><legend>Name</legend><label for="firstName">firstName</label><input type="text" name="firstName" id="firstName"><label for="lastName">lastName</label><input type="text" name="lastName" id="lastName"></fieldset></form></body></html>
自学Mars老师的HTML5视频教程第一季第十二集--表单(下)。
代码地址:https://github.com/HXQWill/Quan_Mars_HTML/blob/master/form02.html
- 每天15min-HTML5(12)-表单(下)
- 每天15min-HTML5(10)-表单(上)
- 每天15min-HTML5(11)-表单(中)
- 每天15min-HTML5(1)-学习方法
- 每天15min-HTML5(3)-文本标签
- 每天15min-HTML5(2)-第一个HTML程序
- HTML5表单(下)(20160811-0011)
- (HTML5)表单样式
- HTML5表单属性(一)
- HTML5表单属性(二)
- HTML5表单属性(三)
- HTML5表单属性(四)
- html5表单元素(中)
- HTML5:学习(3)表单
- HTML5表单
- html5表单
- html5 表单
- HTML5:表单
- CI框架源码研读(整体架构)
- Emacs Auctex 设置编译方式
- I_DIRTY_SYNC与I_DIRTY_DATASYNC
- JavaFX和可视化信息抽取
- java日期格式的转换
- 每天15min-HTML5(12)-表单(下)
- 表单增强与验证——提交表单(处理submit事件以及获取表单的值)
- pip在配置文件中使用国内的源
- Android从摄像头或相册中获取照片
- 安卓中自定义view控件代替radiogroup实现颜色渐变效果的写法
- CI框架源码研读(路由解析)
- Core Java Volume I Coding Practices
- Java中3DES加密解密调用示例
- instruments学习笔记