html5新增的type类型
来源:互联网 发布:水冷的热仿真软件 编辑:程序博客网 时间:2024/05/17 06:49
html5新增了很多的input类型,省去了前端开发者写javascript,调用插件等一系列麻烦的操作,下面介绍一些新增的类型。注释直接写在HTML代码里了:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>H5中新增的input标签</title></head><body><form action="test.php" method="get">/*search类型专用于“搜索”,可以在输入后点击“X”直接清空输入框*/search----<input type="search" name="hehehe"><br>/*tel类型用于输入电话号码,在pattern里写正则,title写提示错误信息*/tel----<input type="tel" pattern="^\d{11}$" title="请输入11位数字" name="phone"><br>/*url类型用于匹配url,要求输入须为http://或https://开头*/url----<input type="url" name="url"><br>/*email类型要求输入必须是邮箱格式,使用required属性则要求必填,multiple属性则允许输入多个,输入多个时使用西文字符,分割*/email----<input type="email" multiple="true" required name="email"><br>/*datetime类型貌似各浏览器暂不支持,按照H5规范应该是输入时间日期类型,可以自己写个正则去验证*/datetime----<input type="datetime" name="datetime" title="请填写日期时间格式" pattern="^\d+-\d+-\d+ \d+:\d+:\d+$"><br>/*date类型要求输入年月日,不用使用插件,可以调用出选择年月日的面板*/date----<input type="date" name="date"><br>/*month类型要求输入年月,同上*/month----<input type="month" name="month"><br>/*week类型要求输入X年第X周,同上*/week----<input type="week" name="week"><br>/*time类型要求输入X时X分,同上*/time----<input type="time" name="time"><br>/*number类型要求输入整数,用min和max控制大小,step控制“跳数”*/number-----<input min="1" max="10" step="2" type="number" name="num"><br>/*range类型提供了一个滑动条,以step为跳数,max和min控制大小,根据匹配的output标签的id来控制默认的大小,看下面的图就明白了*/range----<input type="range" onchange="ttt.value=value" name="range" max="100" min="0" step="5"><output id="ttt">50</output><br>/*color类型要求输入颜色,会自动调用颜色选择窗,很方便*/color----<input type="color" name="color"><br>/*file类型可以使用multiple控制是否选择多个,accept控制选择的文件类型*/file----<input type="file" multiple accept="image/*" name="file"><br><input type="submit" value="提交"></form></body></html>
这些新增的input类型在chrome和opera浏览器里支持得比较好,但是各浏览器表现出来可能各有差异。这些类型大部分时为移动端服务等 像这些input 验证 在小屏幕终端 就能直接呼出不同的键盘,提交表单前验证节省流量
另外:form标签还有一个属性:formnovalidate。使用该属性可以取消该表单里的所有验证,个人感觉没什么用。在H5规范里input标签里有个novalidate属性,可以单独地取消某个input的验证,然后各浏览器并不支持,移动端现在也不支持,当初w3c写在了H5的规则里希望能有这种属性,可能以后会支持吧,个人感觉好像没什么卵用。
1 0
- html5新增的type类型
- html5新增的元素类型
- HTML5新增的INPUT输入类型
- html5新增加的input类型元素
- HTML5中input标签新增的类型
- HTML5新增input元素的类型
- HTML5新增input类型
- HTML5的新增和废弃的各个类型
- HTML5中新增的Input类型有哪些
- 新增的8类 HTML5 INPUT输入类型介绍
- html5 中新添加的标签以及新增表单类型
- HTML5中新增的input类型及其属性
- HTML5学习(5) 新增input type
- HTML5--表单标签input新增type值
- HTML5新增的特性
- Html5新增的元素
- HTML5的新增标签
- HTML5的新增标签
- error C2664: “CButton::Create”: 不能将参数 1 从“const char [1]”转换为“LPCTSTR
- intellij idea 添加动态 user library(java.lang.VerifyError)
- 导入第三方细节
- mvp模式
- Variable ‘time_zone’ can’t be set to the value of ‘NULL’解决方法
- html5新增的type类型
- Python学习手册 - 07
- SSH网上商城环境配置—浅析Hibernate
- 2015年大二上-数据结构-树和二叉树-2-(4)中序线索化二叉树
- React Native for Android 实战(一):配置和起步
- vagrant 的下 nginx
- 史上最高能评论,语文老师先哭一会
- 深入理解Java虚拟机 JVM基本框架
- Android6.0系统权限那些事