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,后者返回符合筛选条件的所 ...
随机推荐
- java的值传递与引用传递
一. 经常搞不清楚,当一个对象做为参数传入到方法中时,为啥有时候值能被改变,有时候又不会改变,以下说明原因: 1.当传入的参数,在方法中能被改变的为 引用传递 2.当传入的参数,在方法中没被改变的为 ...
- windows系统中软件开发常用的软件
1.windwos快速打开控制面板:热键+r打开运行框,输入control就打开windows的控制面板了 2.windows自带的远程桌面控制系统:mstsc -Microsoft terminal ...
- [Linux]第一部分-认识Linux及Linux主机规划与安装
ctrl + alt + f1~f6 切换六个终端ctrl + alt + f7 图形化界面 startx 开启x-window桌面 ls -al /root 列出root目录 date日期 +%y/ ...
- [ASP.NET]asp.net动态加载用户控件
用户控件 // 用户控件源码 namespace wzjr.control { public partial class Topic : System.Web.UI.UserControl { pub ...
- Android 自己定义View学习(2)
上一篇学习了基本使用方法,今天学一下略微复杂一点的.先看一下效果图 为了完毕上面的效果还是要用到上一期开头的四步 1,属性应该要有颜色,要有速度 <?xml version="1.0& ...
- jQuery取得循环列表的第一列值
有例如以下的表格: <table class="list_tab" id="personalDetail"> <tr class=" ...
- #定位系统性能瓶颈# perf
perf是一个基于Linux 2.6+的调优工具,在liunx性能測量抽象出一套适应于各种不同CPU硬件的通用測量方法,其数据来源于比較新的linux内核提供的 perf_event 接口 系统事件: ...
- 【为小白菜打call】
作为本校的竞赛生,我必须为我大OJ打call caioj,小白菜oj,顾名思义,就是为刚踏进OI的“小白菜”们准备的网站,里面包含了许多专题内容,各种模版和讲解视频 而且对于刚学习C++的同学,更有帮 ...
- UESTC--1264--人民币的构造(数学规律)
人民币的构造 Time Limit: 1000MS Memory Limit: 65535KB 64bit IO Format: %lld & %llu Submit Status D ...
- 杂项-公司:YKK
ylbtech-杂项-公司:YKK YKK的全称为Yoshida Kogyo Kabushikigaisha.YKK是拉链行业的鼻祖,代表着行业标准,因为采用日本精确的工艺,原料和管理方法,YKK价格 ...