HTML5新增的表单验证功能
一、HTML5表单的特点:
- HTML5 表单增加了许多内置的控件和控件属性
- XHTML 中需要放在 form 之中的诸如 input/button/select/textarea 等标签元素,在 HTML 5 中完全可以放在页面任何位置,并通过新增的 form 属性指向元素所属表单的 ID 值,即可关联起来。
二、HTML5新增的控件类型:
- email输入类型:
<input type="email" name="email" />
要求输入格式正确的 email 地址,否则浏览器不允许提交,同时会提示错误信息
- url输入类型:
<input type="url" />
要求输入格式正确的 URL 地址,Opera 中会自动在开始处添加 http:// - 日期时间相关输入类型:
<input type="date" />
<input type="time" />
<input type="month" />
<input type="week" />
目前 MS 只有
Opera/Chrome 新版本支持,且展示效果也不一样 - number输入类型:
<input type="number" />
要求输入格式正确的数字
- range类型:
<input type="range" step="2" min="0" max="10" value="2" />
显示一个可拖动的滑块条,通过设定 max/min/step 值限定拖动范围,拖动时会反馈给value一个值
- search输入类型:
<input type="search" />
输入一个搜索关键字,通过 results=s 可显示一个搜索小图标
- tel输入类型:
<input type="tel" />
要求输入一个电话号码,但实际上并没有特殊的验证,与 text 类型没什么区别
- color输入类型:
<input type="color" />
可让用户通过颜色选择器选择一个颜色值,并反馈到value中
三、HTML5新增的表单属性:
- placeholder属性:
<input type="text" placeholder="点击我会清除" />
实现点击清除表单初始值,MS 除了 Firefox,其他标
准浏览器都能很好的支持 - require/pattern属性:
<input type="text" name="require" required="" />
<input type="text" name="require1" required="required" />
<input type="text" name="require2" pattern="^[1-9]\d{5}$" />
表单验证属性require 类型时,若输入值为空,则拒绝提交并出现提示,注意在 Opera 中必须指定 name 值,否则无效果。
- autofocus属性:
<input type="text" autofocus="true" />
默认聚焦属性,可在页面加载时聚焦到一个表单控件,类似于 JS 的 focus()
- list属性:
<input type="text" list="ilist">
<datalist id="ilist">
<option label="a"></option>
<option label="b"></option>
<option label="c"></option>
</datalist>
</input>需要与datalist属性共用,datalist是对选择框的记忆,而list属性可以为选择框自定义记忆的内容
- max/min/step属性:
<input type="range" max="100" min="1" step="20" />
限制值的输入范围,以及值的输入渐进程度,比如可在 number 设定输入最大值最小值,或在 range 中设定拖动阶梯
- autocomplete属性:
<input type="text" autocomplete="on" />
此属性是为表单提供自动完成功能,如果该属性为打开状态可很好地自动完成,一般来说,此属性必须启动浏览器的自动完成功能
- data属性:
<select data="http://XX.com/"></select>
HTML5 支持 data 属性,为 select 控件外联数据源,可以在 select 下拉别表动态的添加来自数据库的各组选项, 比如说国家、省市列表等等。
- XML Submission编码格式:
常见的是 Web Form 的编码格式是 application/x-www-form-urlencoded。 这种格式将数据送到服务器端,可以方便的存取。HTML5 提供一种新的数据格式:XML Submission,即 application/x-www-form+xml。简单的举例说,服务器端将直接接收到 XML 形式的表单数据。
HTML5新增的表单验证功能的更多相关文章
- [H5表单]html5自带表单验证体验优化及提示气泡修改
慕课网之前录制的视频,js/jquery各种宽高的理解和应用,最近终于上线了.还有一个html5左侧导航没有上线!最近慕课网系列课程让我录制一个html5表单验证的课程.今天就稍微说一下表单验证!另外 ...
- html5自带表单验证
起因:今天无意中发现chrome的input框自带表单验证!于是就去试试firefox,惊奇的发现也有自带的验证提示,只不过两者的样式不一样 chrome中的样子: firefox中的样子: 发散:具 ...
- (译) 在AngularJS中使用的表单验证功能【转】
验证功能是AngularJS里面最酷炫的功能之一,它可以让你写出一个具有良好用户体验的Web应用. 在AngularJS中,有许多用于验证的指令.我们将先学习几个最流行的内置指令,然后再创建一个自定义 ...
- (译) 在AngularJS中使用的表单验证功能
验证功能是AngularJS里面最酷炫的功能之一,它可以让你写出一个具有良好用户体验的Web应用. 在AngularJS中,有许多用于验证的指令.我们将先学习几个最流行的内置指令,然后再创建一个自定义 ...
- HTML5 web Form表单验证实例
HTML5 web Form 的开发实例! index.html <!DOCTYPE html> <html> <head> <meta charset=&q ...
- html5自带表单验证-美化改造
神奇的代码 暂且叫做html5.css /* === HTML5 validation styles === */ .myform select:required, .myform input:req ...
- 表单验证—html5新特性表单验证
一.表单 <body> <section id="register"> <div><img src="images/logo.j ...
- 用html5自带表单验证 并且用ajax提交的解决方法(附例子)
用submit来提交表单,然后在js中监听submit方法,用ajax提交表单最后阻止submit的自动提交. 在标准浏览器中,阻止浏览器默认行为使用event.preventDefault(),而在 ...
- Vue小白练级之路---001表单验证功能的一般实现思路
思路: 先各自验证 非空校验 具体规则校验 后兜底校验( 防止用户没输入信息直接登录 ) 实现:( 以 element-ui 为例 ) 在 标签上用 model 动态绑定收集数据的对象(form) 在 ...
随机推荐
- 用Nginx实现微信小程序本地SSL请求
我们在开发小程序的时候,需要填写一个授权域名.还要有一个证书.这些都是花钱的.开发非常不方便.本文主要讲解配置ssl和本地开发 小程序后台添加授权域名 这个域名你要写一个是备案过的.具体是不是你的,都 ...
- Bootstrap 固定在顶部导航条
@{ Layout = null;}<!DOCTYPE html><html><head> <meta name="viewport&q ...
- java.text.MessageFormat 专题
java.text.MessageFormat类MessageFormat提供一种语言无关的方式来组装消息,它允许你在运行时刻用指定的参数来替换掉消息字符串中的一部分.你可以为MessageForma ...
- 正试图在 os 加载程序锁内执行托管代码
正试图在 os 加载程序锁内执行托管代码.不要尝试在 DllMain 或映像初始化函数内运行托管代码... 当我在窗体初始化的时候,调用了一个外部的dill时,它就不知什么原因的 抛出一个“正试图在 ...
- Android零基础入门第3节:带你一起来聊一聊Android开发环境
原文:Android零基础入门第3节:带你一起来聊一聊Android开发环境 工欲善其事,必先利其器.Android开发人员在自己的计算机上编写和测试应用程序,然后将其部署到实际的设备上,那首先必不可 ...
- fprintf函数将格式打印到文件,非常好用(怎么没早点发现这个函数)
/* fprintf example */ #include <stdio.h> int main () { FILE * pFile; int n; ]; pFile = fopen ( ...
- gcc与vs2013的三个charset编译选项
以gcc为例,它有三个命令选项:-finput-charset=gb18030-fexec-charset=utf-8-fwide-exec-charset=utf32顾名思议,input-chars ...
- Delphi中无边框窗体应用程序使任务栏右键菜单有效的方法
最近在Delphi开发中用到了无边框窗体显示时,无法在任务栏使用右键弹出菜单的情况,经过整理,通过以下方法可以使右键菜单出现: procedure Tfrm_Base.InitSysMenu;var ...
- QML学习【一】Basic Types
QML入门教程(1) QML是什么? QML是一种描述性的脚本语言,文件格式以.qml结尾.语法格式非常像CSS(参考后文具体例子),但又支持javacript形式的编程控制.它结合了QtDesi ...
- Qt第三方圆形进度条-及其改进
Qt第三方圆形进度条的改进 要实现一个圆形的进度条功能,在网上找到一个比较出名的第三方封装类:QRoundProgressBar,地址:sourceforge 的 QRoundProgressBar ...