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,后者返回符合筛选条件的所 ...
随机推荐
- PHP学习总结(8)——PHP入门篇之WAMPServer集成环境安装和配置
WampServer就是Windows Apache Mysql PHP集成安装环境,即在window下的apache.php和mysql的服务器软件.WampServer是一款由法国人开发的Apac ...
- easy-ui采坑事件
新用户首次登陆修改密码 imput标签中使用easyui自带的class="easyui-passwordbox"可以是密码隐藏变成黑点但是无法禁用输入法,然后果断的加了一个typ ...
- [SharePoint]2013装过WindowsServerAppFabricSetup_x64_6.1导致安装不能继续
还是不要自己手动安装2013支持组件.让他自己慢慢下吧. 浪费一个星期的时间. 特此纪念! 令解http://www.cnblogs.com/jianyus/p/3287625.html
- HDU 4341
分组背包而已.注意的是,每个时间T,要把一组的全加进去比较一次. #include <iostream> #include <cstdio> #include <cstr ...
- tomcat内存大小设置
tomcat内存大小设置 如果安装为windows服务,需要进行内存设置的时候,选择configure...界面, 在Java Tab页面内可以进行内存参数的设置. 学习了:http://elf884 ...
- ZooKeeper分布式集群部署及问题
ZooKeeper为分布式应用系统提供了高性能服务,在许多常见的集群服务中被广泛使用,最常见的当属HBase集群了,其他的还有Solr集群.Hadoop-2中的HA自己主动故障转移等. 本文主要介绍了 ...
- 【iOS开发系列】UIDevice设备信息
[1] 推断是否是横向屏: BOOL b=UIDeviceOrientationIsLandscape([UIDevice currentDevice].orientation); 获取设备uniqu ...
- 刚接触Joomla,写一下瞎折腾的初感受~
我这几天一直在苦苦寻找一款能够长期投靠的CMS产品,要求的是 1)必须支持命名空间 2)必须OOP + MVC分层 3)丰富分文档和使用群体,至少是出名的.免得哪一天他们解散了 4)-- 一開始我把目 ...
- poj--1236--Network of Schools(scc+缩点)
Network of Schools Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 14062 Accepted: 56 ...
- hdoj--1495--非常可乐(搜索+隐式图)
非常可乐 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submi ...