H5新增的标签总结
1:便于排版的Form表单
HTML5为了方便排版,可以使form的表单标签脱离form的嵌套。
方法:form指定id,所有的标签标签都添加form= id属性。
例如:
<form action="" method="post" id="register"></form>
<input type="text" name="user" value="" form="register" />
<input type="password" name="pwd" value="" form="register" />
2:form新类型
type = "email" 邮箱(自带格式校验)
type = "url" 网址,必须带协议(自带格式校验)
type = "date" 日期选择器
type = "time" 时间选择器
type = "month" 月份选择器
type = "week" 周选择器
type = "number" 数字选择器
type = "range" 滑动条
max属性
step属性(验证合法性) step="2",例如从0开始,只能选择0-2-4-6-8
type = "search" 搜索框
results="n"谷歌浏览器可用,显示搜索图标。
type = "color" 颜色选择器
3:新增的表单属性
required="required" 设置必填项
placeholder = "我是默认值" 设置默认值,不会提交到后台
autofocus = "autofocus" 自动聚焦
pattern="\d{3}" 自定义正则表达式
4:自动填充表单
<input type="text" name="auto" value="" list="movie" />
<datalist id="movie">
<option>人在囧途</option>
<option>车在囧途</option>
<option>泰囧</option>
</datalist>
5:output标签
<form action="" method="post"
oninput="result.value=parseInt(no1.value)+parseInt(no2.value)">
<input type="number" name="no1" value="" />
<input type="number" name="no2" value="" />
<output name="result"></output>
</form>
H5新增的标签总结的更多相关文章
- h5新增html标签语义
H5新增常用标签<body> <header>...</header> <nav>...</nav> <article> < ...
- H5新增的标签和属性
声明 Web 世界中存在许多不同的文档.只有了解文档的类型,浏览器才能正确地显示文档. HTML 也有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML ...
- H5新增的标签以及改良的标签
1>OL标签的改良 start type reversed:翻转排序 2>datalist标签自动补全的使用 3>progress标签的使用:进度条 4>meter标签的应用 ...
- H5新增input标签
1.电子邮件 <input type="email" name="email"/> 默认正则:输入内容必须有@符号,@后面必须有内容 2.搜索框 & ...
- h5新增标签及css3新增属性
- h5新增的标签 新增元素 说明 video 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 source 为video和audio提供数据源 track 为vi ...
- web语义化与h5新增标签
Web语义化就是html告诉我们也告诉机器这一块是什么内容,例如:“这行是一个标题,这几行组成一个段落,这是一个列表,那是一个链接.” Web语义化有三个阶段: 1.h1~h6.thead.ul. ...
- h5废弃的标签和属性及新增的标签和属性
一.废弃的标签和属性 1.表现性元素 a) basefont b) big c) center d) font e) strike f) tt 2.框架类元素 a) frame b) frameset ...
- H5新增特性之语义化标签
H5新增特性之语义化标签 语义化标签顾名思义标签有自己的含义,浏览器或者程序员一看就知道是什么.在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式 ...
- H5新增API
H5新增API 选择器 querySelector()和querySelectorAll(),参数都是css选择器,前者返回符合条件的第一个匹配的元素,如果没有则返回Null,后者返回符合筛选条件的所 ...
随机推荐
- Ubuntu中的Docker搭建Tensorflow环境
一.docker环境安装 1)更新.安装依赖包 sudo apt-get update sudo apt-get install apt-transport-https ca-certificates ...
- 洛谷 U5737 纸条
U5737 纸条 题目背景 明明和牛牛是一对要好的朋友,他们经常上课也想讲话,但是他们的班级是全校纪律最好的班级,所以他们只能通过传纸条的方法来沟通.但是他们并不能保证每次传纸条老师都无法看见,所以他 ...
- POJ 1091
这题确实是好. 其实是求x1*a1+x2*a2+....M*xn+1=1有解的条件.很明显,就是(a1,a2,...M)=1了.然后,可以想象,直接求有多少种,很难,所以,求出选择哪些数一起会不与M互 ...
- Android框架简要介绍
1. Android架构直观图 下图展示了Android系统的主要组成部分: 总体上而言,Android系统结构由5个部分组成.从上到下,别人是Applications (Android应用 ...
- python的range()函数使用方法
python的range()函数使用非常方便.它能返回一系列连续添加的整数,它的工作方式类似于分片.能够生成一个列表对象. range函数大多数时常出如今for循环中.在for循环中可做为索引使用.事 ...
- ChrisRenke/DrawerArrowDrawable源代码解析
转载请注明出处http://blog.csdn.net/crazy__chen/article/details/46334843 源代码下载地址http://download.csdn.net/det ...
- 巧用select延时
在LINUX用户态的情况下.假设想要延时的话.用sleep是最合适的,可是,在有些情况下,须要更小单位的延时,ms us 也是要的.用循环获取到的延时是不精确的. 幸好,select函数巧用的话,是 ...
- VC 6.0中添加库文件和头文件 【转】
本文转载自:http://blog.sina.com.cn/s/blog_9d3971af0102wxjq.html 加头文件包含 VC6.0中: VC6.0默认include包含路径:Tools&g ...
- UESTC--1262--Memory(dfs)
Memory Time Limit: 1000MS Memory Limit: 65535KB 64bit IO Format: %lld & %llu SubmitStatus De ...
- Java-杂项:Java数组Array和集合List、Set、Map
ylbtech-Java-杂项:Java数组Array和集合List.Set.Map 1.返回顶部 1. 之前一直分不清楚java中的array,list.同时对set,map,list的用法彻底迷糊 ...