html5-表单
2016-03-30 10:10
253 查看
html5 表单
<input> html5新增类型
邮件输入框 <input type="email"> 输入E-mail地址的文本框
在表单提交前,并不检查"email"类型的文本框内容是否为空;而是在不为空的情况 下,检查其内容是否符合标准的E-mail 格式;如果将multiple=true,则允许用户输入一
串用逗号分隔的E-mail地址
web地址输入框 <input type="url"> 输入URL地址的文本框
可以有效检测并不判断输入框的内容是否为空,而是针对非空内容进行检测
数字输入框 <input type="number"> 输入数字的文本框,可以设置输入值的范围
在页面中以输入框加微调控件显示max,min,step,value ,step 表示步长,默认值为1, 如不需要上限,则可不设置max
数字滑动条 <input type="range"> 通过拖动滑动条改变一定范围内的数字
在页面中以滑动条展示数字,通过滑动实现数字的改变
日期选择器 <input tpe="date"> 选择日期(包括年,月,日星期)的文本框
展示类型:"date" "time";"month" "week";"datetime" "datetime-local"
搜索输入框 <input type="search"> 输入搜索关键字操作的文本框
ps:目前,上述控件只能在Opera浏览器可以很好的支持,其它浏览器只能显示常规的文本框
input 公共属性
autofocus <input autofocus="true"> 页面加载完后,光标是否自动锁定<input>元素,即是否使元素 自动获取元素(但是需要通过按空格键滚动页面时,而焦点还在表单的输入文本框,因此, 输入的空格只能显示在文本内,并不能实现页面的滚动)
pattern <input pattern="正则表达式"> 使用正则表达式验证<input>元素的内容,是<input>元素的 验证属性,使用该属性中的正则表达式,可以验证文本输入框中的内容。
placeholder <input placeholder="默认内容"> 设置文本输入框中的默认内容;成为“占位”属性,其属性 值称为“占位文本”,显示在文本框中的提示信息,当输入框获取焦点时,该提示自动消 失,当输入框失去焦点时,提示又重新显示
requireed <input required="true"> 是否检测文本输入框中的内容是否为空
novalidate <input novalidate="true"> 是否验证文本输入框中的内容
新增表单元素
<datalist> 是html5新增元素,该元素的功能是辅助表单中文本框的数据输入。<datalist>本身是隐藏的,与表 单文本框的"list"属性绑定,即将"list"属性值设置为<datalist>元素的"id"号,绑定成功后,用户单击 文本框准备输入内容时。当用户选中列表中的某个选项后,<datalist>元素将自动隐藏,同时,文
本框显示所选择的内容。
<input type="text" list="isWork" />
<datalist id="isWork">
<option>程序开发员</option>
<option>系统架构师</option>
<option>数据维护员</option>
</datalist>
(chrome 点击选择某项后,文本框中显示选中的,后面有一个小三角,而IE,选择后,文本框显示选 择的,后面出现 叉号)
output 是html5新增元素,该元素必须从属于某个表单,或通过属性指定某个表单,该元素的功能是在页面中 显示不同类型表单元素的内容;为了获取需要的值,需要设置<output>
元素的"onFormInput"事 件。在表单输入框中录入内容,触发该事件,从而十分方便的实时观察到表单中各元素的输入内容。
<input id="num1" type="number"/>*<input id="num2" type="number"/> =
<output onFormInput="value=num1.value*num2.value"></output>
keygen 是html5新增元素,用于生成页面的密钥。一般情况下,如果在表单中创建该元素,在表单提交时, 该元素将生成一对密钥:一个保存在客户端,称为私密钥,另一个发送至服务器,有服务器进行保 存,称为公密钥,公密钥可以用于客户端证书的验证。
验证方法及属性
checkValidity 显示验证法 表单中的各个元素除了可以利用pattern,required 进行验证,还可以通过一个公用 方法checkValidity(),判断是否与验证条件匹配,如果一致,返回true,否则,返回false.开发人员 可以编写js代码调元素的该方法,将验证结果显示出来,因此,这种方法又称为”显示验法“。
setCustomValidity 在表单与相应规则验证时,由于使用的是系统内置的验证方法,因此,出错提示信息也是 由系统自带的,一般情况下不能进行修改。但有时,为了与系统出错信息的格式一致,需 要修改验证出错信息内容,实现的方法是调用元素或表单的setCustomValidity()方法,该
方法括号中的内容就是修改后的错误提示信息
$("#id").setCustomValidity("x,两次密码输入不一致");
novalidate 用于取消表单全部元素的验证,在表单提交时,通常需要逐个验证元素的内容是否与既定的规 则一致,如果所有元素都相符,才能进行表单的提交,否则,提示出错信息。但有时,并不需 要元素进行验证,这时,如果是单个元素,可以动态设置其验证方法,但如果是表单,设置该
属性来实现(不仅表单具有该属性,大部分的文本输入框元素 tex,search,url,email等都支持该属 性)
<input> html5新增类型
邮件输入框 <input type="email"> 输入E-mail地址的文本框
在表单提交前,并不检查"email"类型的文本框内容是否为空;而是在不为空的情况 下,检查其内容是否符合标准的E-mail 格式;如果将multiple=true,则允许用户输入一
串用逗号分隔的E-mail地址
web地址输入框 <input type="url"> 输入URL地址的文本框
可以有效检测并不判断输入框的内容是否为空,而是针对非空内容进行检测
数字输入框 <input type="number"> 输入数字的文本框,可以设置输入值的范围
在页面中以输入框加微调控件显示max,min,step,value ,step 表示步长,默认值为1, 如不需要上限,则可不设置max
数字滑动条 <input type="range"> 通过拖动滑动条改变一定范围内的数字
在页面中以滑动条展示数字,通过滑动实现数字的改变
日期选择器 <input tpe="date"> 选择日期(包括年,月,日星期)的文本框
展示类型:"date" "time";"month" "week";"datetime" "datetime-local"
搜索输入框 <input type="search"> 输入搜索关键字操作的文本框
ps:目前,上述控件只能在Opera浏览器可以很好的支持,其它浏览器只能显示常规的文本框
input 公共属性
autofocus <input autofocus="true"> 页面加载完后,光标是否自动锁定<input>元素,即是否使元素 自动获取元素(但是需要通过按空格键滚动页面时,而焦点还在表单的输入文本框,因此, 输入的空格只能显示在文本内,并不能实现页面的滚动)
pattern <input pattern="正则表达式"> 使用正则表达式验证<input>元素的内容,是<input>元素的 验证属性,使用该属性中的正则表达式,可以验证文本输入框中的内容。
placeholder <input placeholder="默认内容"> 设置文本输入框中的默认内容;成为“占位”属性,其属性 值称为“占位文本”,显示在文本框中的提示信息,当输入框获取焦点时,该提示自动消 失,当输入框失去焦点时,提示又重新显示
requireed <input required="true"> 是否检测文本输入框中的内容是否为空
novalidate <input novalidate="true"> 是否验证文本输入框中的内容
新增表单元素
<datalist> 是html5新增元素,该元素的功能是辅助表单中文本框的数据输入。<datalist>本身是隐藏的,与表 单文本框的"list"属性绑定,即将"list"属性值设置为<datalist>元素的"id"号,绑定成功后,用户单击 文本框准备输入内容时。当用户选中列表中的某个选项后,<datalist>元素将自动隐藏,同时,文
本框显示所选择的内容。
<input type="text" list="isWork" />
<datalist id="isWork">
<option>程序开发员</option>
<option>系统架构师</option>
<option>数据维护员</option>
</datalist>
(chrome 点击选择某项后,文本框中显示选中的,后面有一个小三角,而IE,选择后,文本框显示选 择的,后面出现 叉号)
output 是html5新增元素,该元素必须从属于某个表单,或通过属性指定某个表单,该元素的功能是在页面中 显示不同类型表单元素的内容;为了获取需要的值,需要设置<output>
元素的"onFormInput"事 件。在表单输入框中录入内容,触发该事件,从而十分方便的实时观察到表单中各元素的输入内容。
<input id="num1" type="number"/>*<input id="num2" type="number"/> =
<output onFormInput="value=num1.value*num2.value"></output>
keygen 是html5新增元素,用于生成页面的密钥。一般情况下,如果在表单中创建该元素,在表单提交时, 该元素将生成一对密钥:一个保存在客户端,称为私密钥,另一个发送至服务器,有服务器进行保 存,称为公密钥,公密钥可以用于客户端证书的验证。
验证方法及属性
checkValidity 显示验证法 表单中的各个元素除了可以利用pattern,required 进行验证,还可以通过一个公用 方法checkValidity(),判断是否与验证条件匹配,如果一致,返回true,否则,返回false.开发人员 可以编写js代码调元素的该方法,将验证结果显示出来,因此,这种方法又称为”显示验法“。
setCustomValidity 在表单与相应规则验证时,由于使用的是系统内置的验证方法,因此,出错提示信息也是 由系统自带的,一般情况下不能进行修改。但有时,为了与系统出错信息的格式一致,需 要修改验证出错信息内容,实现的方法是调用元素或表单的setCustomValidity()方法,该
方法括号中的内容就是修改后的错误提示信息
$("#id").setCustomValidity("x,两次密码输入不一致");
novalidate 用于取消表单全部元素的验证,在表单提交时,通常需要逐个验证元素的内容是否与既定的规 则一致,如果所有元素都相符,才能进行表单的提交,否则,提示出错信息。但有时,并不需 要元素进行验证,这时,如果是单个元素,可以动态设置其验证方法,但如果是表单,设置该
属性来实现(不仅表单具有该属性,大部分的文本输入框元素 tex,search,url,email等都支持该属 性)
相关文章推荐
- HTML5中在客户端验证文件上传的大小
- html5 web数据存储
- Canvas 在高清屏下绘制图片变模糊的解决方法
- 原生js结合html5制作小飞龙的简易跳球
- HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
- 三个不常见的 HTML5 实用新特性简介
- 低版本IE正常运行HTML5+CSS3网站的3种解决方案
- js+HTML5实现canvas多种颜色渐变效果的方法
- javascript+HTML5的Canvas实现Lab单车动画效果
- javascript+html5实现绘制圆环的方法
- javascript html5实现表单验证
- HTML5实现微信拍摄上传照片功能
- JavaScript+html5 canvas制作的百花齐放效果完整实例
- jQuery+HTML5加入购物车代码分享
- jQuery mobile 移动web(6)
- 基于Jquery和html5的7款个性化地图插件
- 实现音乐播放器的代码(html5+css3+jquery)
- 2014 HTML5/CSS3热门动画特效TOP10
- jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码