每天15min-HTML5(12)-表单(下)
2016-06-12 21:50
429 查看
主要内容
1、下拉列表标签
2、label标签使用方法
3、filedset和legend标签的使用方法下拉列表标签
下拉列表标签名为select,每向网页当中插入一个select标签,就会在网页当中插入一个下来菜单,该标签有一种子标签名为option,option标签的作用就是在下拉列表当中插入一个选项,有多少个选项就需要有多少个option标签。
这个时候就需要使用label标签了,大家可以简单的理解它的作用就是给控件起一个名字。同时结合label标签的for属性和控件的id属性,还可以方便用户的操作。
获取鼠标焦点:
<label for="username">userName</label> <input type="text" name="username" id="username">
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
相关文章推荐
- HTML最新标准HTML5小结
- HTML5中canvas实现矩形颜色渐变
- h5开发中常见的问题汇总
- HTML+CSS3-》第2阶段:HTML5基础和HTML语义化 上
- 基于canvas的图片轮播(h5)
- ionic、cordova点击拨打电话的实现
- HTML5通用接口详解
- Web前端教程-02.04.HTML5样式、链接和表格
- Web前端教程-02.03.HTML5元素、属性、格式化
- Web前端教程-02.02.HTML5特性简介
- H5 canvas 笔记 一
- Web前端教程-02.01.HTML5开发前的准备
- HTML5中canvas画图之绘制数据图表
- 每天15min-HTML5(11)-表单(中)
- html5调用摄像头,录音功能
- H5调用讯飞语音接口实现在线语音听写测评
- HTML5与HTML4的区别
- HTML5学习之FileReader接口
- HTML5中canvas画图之绘制方格图
- HTML5:Canvas