专栏首页Web前端开发HTML5新增的表单验证功能

HTML5新增的表单验证功能

一、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属性: 需要与datalist属性共用,datalist是对选择框的记忆,而list属性可以为选择框自定义记忆的内容
<input type="text" list="ilist">
    <datalist id="ilist">
        <option label="a"></option>
        <option label="b"></option>
        <option label="c"></option>
    </datalist>
</input>
  1. max/min/step属性:<input type="range" max="100" min="1" step="20" /> 限制值的输入范围,以及值的输入渐进程度,比如可在 number 设定输入最大值最小值,或在 range 中设定拖动阶梯
  2. autocomplete属性:<input type="text" autocomplete="on" /> 此属性是为表单提供自动完成功能,如果该属性为打开状态可很好地自动完成,一般来说,此属性必须启动浏览器的自动完成功能
  3. data属性:<select data="http://XX.com/"></select> HTML5 支持 data 属性,为 select 控件外联数据源,可以在 select 下拉别表动态的添加来自数据库的各组选项, 比如说国家、省市列表等等。
  4. XML Submission编码格式: 常见的是 Web Form 的编码格式是 application/x-www-form-urlencoded。 这种格式将数据送到服务器端,可以方便的存取。HTML5 提供一种新的数据格式:XML Submission,即 application/x-www-form+xml。简单的举例说,服务器端将直接接收到 XML 形式的表单数据。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 通过mock-api模拟真实数据

    mock-api(模客)是一个便捷的 REST 接口数据模拟工具,用于前后端隔离测试,开发调试。

    Leophen
  • CSS 实现文本超出容器范围用省略号显示(单行+多行)

    Leophen
  • 服务端推送通信技术及其优劣势

    在 Ajax 轮询的基础上做的改进,在后端数据没有更新的时不再返回空响应,而且后端一直保存连接,直到后端有数据变化,则相应请求并且关闭连接,前端收到数据后,再次...

    Leophen
  • web模拟终端博客系统

    前段时间做了一个非常有意思的模拟终端的展示页.这个页面非常有意思,它可以作为个人博客系统或者给 Linux 初学者学习终端命令,现分享给大家~

    QQ音乐前端团队
  • python贝叶斯网络与自定义损失函数

    AI之禅
  • 如何使用纯 CSS 制作四子连珠游戏

    实验是学习新技巧、思考新想法、并突破自身极限的有趣的方式。“纯 CSS”演示很早就有了,但是随着浏览器和CSS的发展,新的挑战又出现了。CSS 和 HTML 预...

    叙帝利
  • 常见文件的mine type类型及获取方法

    前面提到Kangle 服务器添加 mine type 文件类型,但是网上给出的文件类型难免没有那我全面,往往我们正需要的网上却没有。

    德顺
  • Python 实现一行输入多个数字(用空格隔开)

    很多人都会使用以下代码,来实现多个字符串的连续输入,但是这是以换行进行操作的,而有些题目需要将一些数字进行一行输入

    砸漏
  • C++ 多线程死锁(引入lock函数)

    上一篇讲了互斥锁(传送门)的用法,解决了多线程共享资源可能会造成的一些问题,那么引入了锁以后,其实也难免会造成一些问题,比如说忘记unlock,或者有两个锁a...

    Ch_Zaqdt
  • python 变量,输入,输出

    郭楷丰

扫码关注云+社区

领取腾讯云代金券