HTML5中的智能表单
2016-04-24 17:04
591 查看
新增类型
在html5中给表单新添加了一些类型 ,大致可以分为以下几种:数字类型
跟数字强相关的类型,其中number、range在移动端开发时,会弹出数字键盘,而range是一个范围滑动块。
<input type='number'> <!--用于比较精确的纯数字输入类型--> <input type='range'> <!--用于不是很精确的数字范围--> <input type='tel'> <!--用于电话号码-->
日期和时间类型
web表单常见的字段就是日期和时间,html5以此来收集这类信息
<input type='time'> <input type='date'> <input type='month'> <input type='week'> <input type='datetime'> <input type='datetime-local'>
其他类型 :email、url、color、search
其中一些类型在不同的设备上都会有不同的显示。
<input type='email'> <input type='url'> <input type='color'> <input type='search'>
如果我们只需要其语义,而不用其样式,那么我们可以用css来给它做兼容。如下,我们用search来举例。css结构:
input[type=search]{ -webkit-appearance:none; } input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button { display:none; }
最后这些新的类型,比如number,url,email等类型,会在表单提交的时候校验格式,如果格式不对的话,会阻止表单的提交。
新增属性
html5中新增了一些属性,可以让表单制作更轻松placeholder 占位符文本,以前我们用js来模拟,获得焦点的时候,文本消失,失去焦点并且内容为空时,文本重现,现在html5自带了这一项功能。
html结构:
<input id='search' type='text' placeholder='search your goods'>
如果想要修改placeholder中的文本样式,那么我们只要给浏览器设置一些样式即可,css结构:
::-webkit-input-placeholder{ color:red; font-size:14px; } ::-moz-placeholder{ color:red; font-size:14px; }
注意上面两个样式要分开写,才会有效,不能用逗号合并写成一个。
我们不用placeholder,我们用js来实现上述功能:
<input id='myInput' type='text' value='请输入...'> <script> var input = document.getElementById('myInput'); input.onfocus = function() { this.value=this.value.replace(/^\s+|\s+$/g,''); if(this.value=='请输入...'){ this.value = ''; } } input.onblur = function() { this.value=this.value.replace(/^\s+|\s+$/g,'') if(!this.value){ this.value = '请输入...' } } </script>
上面有个小bug,如果用户输入了 ‘请输入…’这三个字符 ,那么在失去焦点时也会变成空,不过这个不影响使用,也几乎没有用户会这样做。但是我们可以提供一个解决方案:我们再给它增加一个颜色,用值和颜色一起判断,兼容谷歌的颜色得用rgb的格式,如果用户输入的颜色,就深些,这样,我们都可以区分开是用户输入的,还是自动生成的了。详情请查看:https://github.com/johnnynode/placeholder-js
autofocus 自动聚焦 ,autofocus属性可以让表单在加载完成时,会有一个表单域被默认聚焦或者选中,但是尽量不要在一个页面上在多个表单域上使用autofocus,在一些低版本浏览器上会默认聚焦最后一个含有autofocus的表单域,在大多数浏览器中会聚焦第一个含有autofocus的表单域,这会造成跨浏览器的混乱。还有我们通常用空格键来滚动页面,如果页面上有autofocus的表单域会阻止这一浏览器的默认行为。
我们只需要在html中,加入autofocus属性就可以了
<input type='text' autofocus>
在此之前,我们用js的focus方法来使表单聚焦。
<input id='myInput' type='text'> <script> document.getElementById('myInput').focus(); </script>
autocomplete 自动完成,很多浏览器默认提供自动完成功能,帮助用户输入上次提交过的内容,autocomplete有两个必备的条件才能够工作,一是一定要有form元素,二个是表单域上必须要有name属性和name属性值。但是,有些时候我们为了保护隐私,需要避免自动完成这项功能,我们开启和关闭这项功能,只需给它赋值on或者off ,如果不赋值,默认就是on,表示功能开启。
我们来开启自动完成功能 ,html结构为:
<form> <input type='text' name='myInput' autocomplete> <input type='submit' value='submit'> </form>
我们关闭此项功能html结构为:
<form> <input type='text' name='myInput' autocomplete=off> <input type='submit' value='submit'> </form>
如果我们想给整个表单都设置,我们只需要在form元素上加这个属性就行了
<form autocomplete='off'> <input type='text' name='myInput'> <input type='submit' value='submit'> </form>
required 必填字段,如果表单内存在表单域有这个属性,会在表单提交的时候做校验,如果没有内容,则会阻止提交,当然在低版本的浏览器中有兼容问题。
<input type='text' id='theInput' name='myInput' required>
我们可以通过下面的JavaScript代码来检测浏览器是否支持 required 属性
var isRequiredSupported = document.getElementById('theInput').required;
pattern 通过正则表达式来定义表单域的数据格式。
下面是来验证英文名的示例 html 结构:
<input name='name' pattern="([a-zA-z]{3,30}\s*)+[a-zA-Z]{3,30}" placeholder='Dwight Schultz' required>
检测浏览器是否支持可以用下面的代码:
isPatternSupported = 'pattern' in document.createElement("input");
novalidate 告诉表单不进行验证
可以在form上设置novalidate属性,可以告诉表单不进行验证
<form novalidate> <input type='email' name='email'> <input type='submit' value='submit' > </form>
也可以用javascript设置表单不验证
<form> <input type='email' name='email'> <input type='submit' value='submit' > </form> <script> document.forms[0].noValidate = true; </script>
如果有多个提交按钮,为了指定点击某个按钮提交验证,而某一个不去验证,那么可以在相应的按钮上设置 formnovalidate属性
<form> <input type='email' name='email'> <input type='submit' value='验证' > <input type='submit' value='不去验证' formnovalidate> </form>
multiple 上传多文件
指定 multiple属性来设置多个文件上传
<form> <input type='file' name='file' multiple> </form>
min max 限制值的范围,但是不会再输入时限制,提交时校验,step设置的是每次加减的增量,主要使用在number range datepicker上
html结构:
<input type='number' min='10' max='100' step='5' name='num'> <input type='range' min='10' max='1000' value='50' step='100'> <input type='date' max='2015-12-25' min='2015-11-25' step='2'>
等等还有其他属性,这里就不一一列举了,用到的时候再去查。
新增元素
html5 中新增加了一些元素,扩展了一些功能智能感应 list属性 和 datalist元素,智能感应需要给input设置一个属性为list,list属性值是datalist元素的id,两者配合使用,并且datalist元素内的option可以套在select里面,这样为了老版本浏览器提供降级方案。智能感应出来的目的就是为了便利的给用户添加输入提示功能,增强用户体验。
html代码结构如下:
<input type='text' name='myInput' list='choose'> <datalist id='choose'> <select> <option value='Best Picture'></option> <option value='11111'></option> <option value='11222'></option> </select> </datalist>
在w3c上可以亲自试试: http://www.w3school.com.cn/html5/html5_datalist.asp
秘钥生成表单字段keygen
<keygen>字段,并非<input>类型,但是这个表单字段来生成公共和私人密钥对,并提交公共秘钥,当浏览器提交了<keygen>元素的表单时,私人秘钥被保存于本地秘钥储存中,公共秘钥被打包发送至服务器。下面是简单的测试:
<form> <keygen name='pubkey' challenge='random-characters'> <input type='submit' name='createcertificate' value='Generate'> </form>
此元素被除 IE之外的所有主流浏览器支持,在移动端使用时一个很好的选择。
还有一些不是很常用的元素包括<meter>、<progress>、<output>、<menu>、<command>等等
相关文章推荐
- 初识Html5
- HTML5中的数据集dataset和自定义属性data-*
- 不只是Canvas和拖放——HTML5新特性一览
- 使用ajax实现用户登录验证(升级版)
- 简单谈谈如何利用h5实现音频的播放
- 简单谈谈如何利用h5实现音频的播放
- html5游戏开发之-----祖玛小游戏<原创>
- 简单谈谈如何利用h5实现音频的播放
- html5 web缓存localStorage和sessionStorage
- HTML5脚本扩展---新增小型API
- table 单行 超出打点
- HTML5中与类相关的扩充classList
- html5背景视频使用总结
- html5的关于布局的研究(1)
- 使用HTML5中的classList操作CSS类
- h5上传图片及预览
- webkit移动开发笔记:html5中video与audio标签之无法自动播放的audio元素
- 解决C:\fakepath路径加密问题,图片上传之前的预览功能的实现,html5 实现图片预览功能
- HTML5 图形组件-拓扑图等
- 浅谈:html5和html的区别