一、HTML5表单的特点:

  1. HTML5 表单增加了许多内置的控件和控件属性

  2. XHTML 中需要放在 form 之中的诸如 input/button/select/textarea 等标签元素,在 HTML 5 中完全可以放在页面任何位置,并通过新增的 form 属性指向元素所属表单的 ID 值,即可关联起来。

二、HTML5新增的控件类型:

  1. email输入类型:<input type="email" name="email" />

    要求输入格式正确的 email 地址,否则浏览器不允许提交,同时会提示错误信息


  2. url输入类型:<input type="url" />
    要求输入格式正确的 URL 地址,Opera 中会自动在开始处添加 http://

  3. 日期时间相关输入类型:
    <input type="date" />
    <input type="time" />
    <input type="month" />
    <input type="week" />
    目前 MS 只有
    Opera/Chrome 新版本支持,且展示效果也不一样

  4. number输入类型:<input type="number" />

    要求输入格式正确的数字

  5. range类型:<input type="range" step="2" min="0" max="10" value="2" />

    显示一个可拖动的滑块条,通过设定 max/min/step 值限定拖动范围,拖动时会反馈给value一个值

  6. search输入类型:<input type="search" />

    输入一个搜索关键字,通过 results=s 可显示一个搜索小图标

  7. tel输入类型:<input type="tel" />

    要求输入一个电话号码,但实际上并没有特殊的验证,与 text 类型没什么区别

  8. color输入类型:<input type="color" />

    可让用户通过颜色选择器选择一个颜色值,并反馈到value中

三、HTML5新增的表单属性:

  1.  placeholder属性<input type="text" placeholder="点击我会清除" />

    实现点击清除表单初始值,MS 除了 Firefox,其他标
    准浏览器都能很好的支持

  2. 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 值,否则无效果。

  3. autofocus属性<input type="text" autofocus="true" />

    默认聚焦属性,可在页面加载时聚焦到一个表单控件,类似于 JS 的 focus()

  4. 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属性可以为选择框自定义记忆的内容

  5. max/min/step属性<input type="range" max="100" min="1" step="20" />

    限制值的输入范围,以及值的输入渐进程度,比如可在 number 设定输入最大值最小值,或在 range 中设定拖动阶梯

  6. autocomplete属性<input type="text" autocomplete="on" />

    此属性是为表单提供自动完成功能,如果该属性为打开状态可很好地自动完成,一般来说,此属性必须启动浏览器的自动完成功能

  7. data属性<select data="http://XX.com/"></select>

    HTML5 支持 data 属性,为 select 控件外联数据源,可以在 select 下拉别表动态的添加来自数据库的各组选项, 比如说国家、省市列表等等。

  8. XML Submission编码格式

    常见的是 Web Form 的编码格式是 application/x-www-form-urlencoded。 这种格式将数据送到服务器端,可以方便的存取。HTML5 提供一种新的数据格式:XML Submission,即 application/x-www-form+xml。简单的举例说,服务器端将直接接收到 XML 形式的表单数据。

HTML5新增的表单验证功能的更多相关文章

  1. [H5表单]html5自带表单验证体验优化及提示气泡修改

    慕课网之前录制的视频,js/jquery各种宽高的理解和应用,最近终于上线了.还有一个html5左侧导航没有上线!最近慕课网系列课程让我录制一个html5表单验证的课程.今天就稍微说一下表单验证!另外 ...

  2. html5自带表单验证

    起因:今天无意中发现chrome的input框自带表单验证!于是就去试试firefox,惊奇的发现也有自带的验证提示,只不过两者的样式不一样 chrome中的样子: firefox中的样子: 发散:具 ...

  3. (译) 在AngularJS中使用的表单验证功能【转】

    验证功能是AngularJS里面最酷炫的功能之一,它可以让你写出一个具有良好用户体验的Web应用. 在AngularJS中,有许多用于验证的指令.我们将先学习几个最流行的内置指令,然后再创建一个自定义 ...

  4. (译) 在AngularJS中使用的表单验证功能

    验证功能是AngularJS里面最酷炫的功能之一,它可以让你写出一个具有良好用户体验的Web应用. 在AngularJS中,有许多用于验证的指令.我们将先学习几个最流行的内置指令,然后再创建一个自定义 ...

  5. HTML5 web Form表单验证实例

    HTML5 web Form 的开发实例! index.html <!DOCTYPE html> <html> <head> <meta charset=&q ...

  6. html5自带表单验证-美化改造

    神奇的代码 暂且叫做html5.css /* === HTML5 validation styles === */ .myform select:required, .myform input:req ...

  7. 表单验证—html5新特性表单验证

    一.表单 <body> <section id="register"> <div><img src="images/logo.j ...

  8. 用html5自带表单验证 并且用ajax提交的解决方法(附例子)

    用submit来提交表单,然后在js中监听submit方法,用ajax提交表单最后阻止submit的自动提交. 在标准浏览器中,阻止浏览器默认行为使用event.preventDefault(),而在 ...

  9. Vue小白练级之路---001表单验证功能的一般实现思路

    思路: 先各自验证 非空校验 具体规则校验 后兜底校验( 防止用户没输入信息直接登录 ) 实现:( 以 element-ui 为例 ) 在 标签上用 model 动态绑定收集数据的对象(form) 在 ...

随机推荐

  1. WPF 实现测量显示文本长度

    原文:WPF 实现测量显示文本长度 以工具类的方式实现: using System; using System.Windows; using System.Windows.Media; using S ...

  2. INCORRECT PERMISSIONS ON /USR/LIB/PO1KIT-AGENT-HELPER-1(NEEDS TO BE SETUID ROOT)

    INCORRECT PERMISSIONS ON /USR/LIB/PO1KIT-AGENT-HELPER-1(NEEDS TO BE SETUID ROOT) # sudo chmod +s /us ...

  3. XF 定制图片

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  4. 投资人的能量往往大多远远不仅于此,他能站在不同的角度和高度看问题(要早点拿投资,要舍得让出股份)——最好不要让 Leader 一边做技术、一边做管理,人的能力是有限的,精力也是有限的

      摘要:在创业三年时间里作为联合创始人,虽然拿着大家均等的股份,我始终是没有什么话语权的,但是,这也给了我从旁观者的角度看清整个局面的机会.创业公司的成败绝大程度取决于技术大牛和公司 Leader, ...

  5. 重启网卡的几种方法(命令行,API,

    1.重启windows网卡命令 rem 禁用网卡netsh interface set interface 本地连接 disabledrem 启用网卡 netsh interface set inte ...

  6. Android项目实战(一): SpannableString与SpannableStringBuilder

    原文:Android项目实战(一): SpannableString与SpannableStringBuilder 前言: 曾经在一些APP中的一些类似“帮助”“关于”的界面看过一行文字显示不同的颜色 ...

  7. Windows 10 UWP 部署

      原文  http://youthlin.com/20151105.html 我们知道VS连接手机可以直接部署到手机里,但平板貌似无法这样干,平板与电脑连接没有丝毫反应……那么想看VS里写的uwp应 ...

  8. Docker笔记03-docker 网络模式

    docker网络模式分为5种 Nat (Network Address Translation) Host other container none overlay 第一种 Nat模式 docker的 ...

  9. .Net Random产生随机数

    之前用winform做过有个摇奖游戏,其中中奖条件为产生的两个随机数一致则中奖,测试发现每次都会中奖. 忘记方式是怎么解决的了,今天看到了传智论坛的一片文章也是关于Random的,就点进去看了,它里面 ...

  10. [Erlang-0016][aque_tcp] 一个 Erlang TCP 组件

    项目地址:https://github.com/liangjingyang/aque_tcp 欢迎任何形式的转载,但请务必注明出处:http://www.cnblogs.com/liangjingya ...