1. input元素新增类型

　　url类型

　　url类型的input元素是一种用来输入url的文本框，提交时如果该文本框中内容不是url格式，则不允许提交。

  1. <input type="url" />

　　email类型

　　email类型的input元素是用来输入email的文本框，具有一个multiple属性允许在文本框中输入一串以逗号分隔的email地址。

  1. <input type="email" multiple />

　　date类型

　　date类型的input元素用来输入日期的文本框。

  1. <input type="date" value="2015-04-19" />

　　time类型

　　time类型的input元素是用来输入时间的文本框。

  1. <input type="time" value="00:19" />

　　month类型

　　month类型的input元素用来输入月份的文本框。

  1. <input type="month" value="2015-04" />

　　week类型

　　week类型的input元素用来输入周号的文本框。

  1. <input type="week" value="2015-W20" />

　　number类型

　　number类型input元素是用来输入数字的文本框，在提交时会检查其中的内容是否为数字，具有min、max及step属性。

  1. <input type="number" min="1" max="100" step="5" />

　　range类型

　　range类型的input元素是只允许输入一段范围内数值的文本框，具有min、max及step属性。

  1. <input type="range" min="0" max="100" step="1" value="0" />

2. input元素新增属性

　　autofocus属性

　　autofocus属性是一个Boolean值，在页面加载完成后，input自动获取焦点。

  1. <input type="text" autofocus />

　　pattern属性

　　pattern是元素的验证属性，使用正则表达式验证文本输入框中的内容。

  1. <input type="text" pattern="^[a-zA-Z]\w{5,7}$" />

　　placeholder属性

　　input元素的placeholder属性为占位属性，显示在输入框中的提示信息，当输入框中输入内容时，该提示信息自动消失；当输入框内容为空时，提示信息重新显示。

  1. <input type="text" placeholder="请输入" />

　　required属性

　　input元素required属性用于校验输入内容是否为空。

  1. <input type="text" required />

　　list属性

　　input元素list属性的值为某个datalist元素的id，类似于选择框(<select>)，当用户想要设置的值不在选择列表之内时，允许自行输入。

  1. <input type="text" list="weekdays" />
  2. <datalist id="weekdays">
  3.     <option value="Sunday">Sunday</option>
  4.     <option value="Monday">Monday</option>
  5.     <option value="Tuesday">Tuesday</option>
  6.     <option value="Wednesday">Wednesday</option>
  7.     <option value="Thursday">Thursday</option>
  8.     <option value="Friday">Friday</option>
  9.     <option value="Saturday">Saturday</option>
  10. </datalist>

　　autocomplete属性

　　input元素autocomplete属性用于自动完成功能，autocomplete属性可以指定“on”、“off”值。

  1. <input type="text" autocomplete="on" list="weekdays" />
  2. <datalist id="weekdays">
  3.     <option value="Sunday">Sunday</option>
  4.     <option value="Monday">Monday</option>
  5.     <option value="Tuesday">Tuesday</option>
  6.     <option value="Wednesday">Wednesday</option>
  7.     <option value="Thursday">Thursday</option>
  8.     <option value="Friday">Friday</option>
  9.     <option value="Saturday">Saturday</option>
  10. </datalist>

　　示例中使用datalist元素中数据作为候补输入的数据在文本框中自动显示。

　　formnovalidate属性

　　input元素formnovalidate属性用于设置在表单中不进行验证。

  1. <input type="number" formnovalidate />

3. 新增表单元素

3.1 datalist元素

　　datalist元素用于附中表单中文本框的数据输入。datalist元素本身是隐藏的，与表单文本框的“list”属性绑定，“list”属性值为datalist元素的ID。

  1. <input type="text"list="weekdays" />
  2. <datalist id="weekdays">
  3.     <option value="Sunday">Sunday</option>
  4.     <option value="Monday">Monday</option>
  5.     <option value="Tuesday">Tuesday</option>
  6.     <option value="Wednesday">Wednesday</option>
  7.     <option value="Thursday">Thursday</option>
  8.     <option value="Friday">Friday</option>
  9.     <option value="Saturday">Saturday</option>
  10. </datalist>

3.2 output元素

　　output元素必须从属于某个form，用于在页面中显示各种不同类型表单元素的内容。output元素的“onFormInput”事件，在表单输入框输入内容时触发该事件。

  1. <form>
  2.     <input id="txtNumber1" type="number" /> *
  3.     <input id="txtNumber2" type="number" /> =
  4.     <output onforminput="value = txtNumber1.value * txtNumber2.value"></output>
  5. </form>

4. 表单验证

4.1 checkValidity显示验证

　　表单中的各元素可以利用pattern与required属性验证元素内容的有效性，每个元素都可以通过checkValidity()，校验本身是否与验证条件匹配。如果一致，返回true，否则返回false。

  1. <!DOCTYPE html>
  2.  
  3. <html>
  4. <head>
  5.     <meta name="viewport" content="width=device-width" />
  6.     <title>Index</title>
  7.     <script type="text/javascript">
  8.         function Check() {
  9.             var email = document.getElementById("txtEmail");
  10.             if (email.value == "") {
  11.                 alert("Email不能为空！");
  12.                 return false;
  13.             } else if (!email.checkValidity()) {
  14.                 alert("Email格式错误！");
  15.                 return false;
  16.             } else {
  17.                 alert("Email输入正确！");
  18.                 return true;
  19.             }
  20.         }
  21.     </script>
  22. </head>
  23. <body>
  24.     <form id="form1" onsubmit="return Check();">
  25.         <input id="txtEmail" type="email" />
  26.         <input type="submit" value="Submit" />
  27.     </form>
  28. </body>
  29. </html>

4.2 取消验证

　　取消表单验证的两种常用方法：

　　（1）利用form元素的novalidate属性，关闭整个表单的验证；

　　（2）利用input元素或submit元素的formnovalidate属性，让表单对单个input元素取消验证。

  1. <form novalidate></form>
  1. <input type="text" formnovalidate />

4.3 setCustomValidity自定义错误信息

　　在表单与相应规则验证时，由于使用的是系统内置的验证方法，因此在出错提示也是由系统自带的。修改验证出错信息内容调用元素或表单的setCustomValidity()方法。

  1. <!DOCTYPE html>
  2.  
  3. <html>
  4. <head>
  5.     <meta name="viewport" content="width=device-width" />
  6.     <title>Index</title>
  7.     <script type="text/javascript">
  8.         function Check() {
  9.             var email = document.getElementById("txtEmail");
  10.             if (email.value == "") {
  11.                 alert("Email不能为空！");
  12.                 return false;
  13.             } else if (!email.checkValidity()) {
  14.                 email.setCustomValidity("Email格式错误！");
  15.                 return false;
  16.             } else {
  17.                 alert("Email输入正确！");
  18.                 return true;
  19.             }
  20.         }
  21.     </script>
  22. </head>
  23. <body>
  24.     <form id="form1" onsubmit="return Check();">
  25.         <input id="txtEmail" type="email" />
  26.         <input type="submit" value="Submit" />
  27.     </form>
  28. </body>
  29. </html>

HTML5系列：HTML5表单的更多相关文章

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

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

  2. HTML5的form表单属性

    form:HTML4中,表单内的从属元素必须书写在<form></form>之内,但是在HTML5中,表单的从属元素可以处于页面的任何位置,然后为其添加form属性,属性值为f ...

  3. HTML5跨浏览器表单及HTML5表单的渐进增强

    HTML5跨浏览器表单 http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-cross-browser-html5-f ...

  4. HTML5 学习笔记 表单属性

    HTML5新的表单属性 HTML5 的form和input 标签添加了几个新的属性 <form>新属性 autocomplete novalidate input 新属性 autocomp ...

  5. html5中form表单新增属性以及改良的input标签元素的种类

    在HTML5中,表单新增了一些属性,input标签也有了更多的type类型,有些实现了js才能实现的特效,但目前有些浏览器不能全部支持.下面是一些h5在表单和input标签上的一些改动. <!D ...

  6. HTML5新增的表单验证功能

    一.HTML5表单的特点: HTML5 表单增加了许多内置的控件和控件属性 XHTML 中需要放在 form 之中的诸如 input/button/select/textarea 等标签元素,在 HT ...

  7. BootStrap 智能表单系列 六 表单数据绑定(编辑页面的数据绑定)

    本章介绍如何在生成表单后,将一个model的数据展示到form表单中(一般用于编辑页面) 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartF ...

  8. BootStrap 智能表单系列 五 表单依赖插件处理

    这一章比较简单哦,主要就是生产表单元素后的一些后续处理操作,比如日期插件的渲染.一些autocomplete的处理等,在回调里面处理就可以了, demo: $("input.date-pic ...

  9. BootStrap 智能表单系列 四 表单布局介绍

    表单的布局分为自动布局和自定义布局两种: 自动布局就是根据配置项中第二级配置项中数组的长度来自动使用不同的bootstrap栅格,通过设置autoLayout为true可以实现自动布局 自动以布局就是 ...

  10. 【SqlServer系列】表单查询

    1   概述 如下几个问题,如果你能解决,请继续往下看,若不能解决,请先复习SQL基础知识,再来阅读本篇文章.本篇文章深度中等左右. Q1:表StudentScores如下,用一条SQL语句查询出每门 ...

随机推荐

  1. [8.2] Robot in a Grid

    Imagine a robot sitting on the upper left corner of grid with r rows and c columns. The robot can on ...

  2. Day 1：学习Windows Phone 使用 SQLite

    private void move(string fn) { StreamResourceInfo sr = Application.GetResourceStream(new Uri(fn, Uri ...

  3. grunt 单独压缩多个js和css文件【转】

    原文地址:http://xiaomiya.iteye.com/blog/2177877 使用grunt来压缩前端js,css文件 因为最近做的客户端本地项目有用到十几个js,js提交之前都需要压缩.用 ...

  4. @autowired和@resource的区别

    @Resource的作用相当于@Autowired,只不过@Autowired按byType自动注入,而@Resource默认按 byName自 动注入罢了.@Resource有两个属性是比较重要的, ...

  5. 【hihoCoder】1082: 然而沼跃鱼早就看穿了一切

      题目:http://hihocoder.com/problemset/problem/1082 输入一个字符串,将其中特定的单词替换成另一个单词   代码注意点: 1. getline(istre ...

  6. Odoo PDF 取消Header后 空白处理

    处理方法是 设置纸张格式中的上边距 ,调整位合适的位置.效果如下图:

  7. Xamarin的不归路-生成安卓错误3

    错误提示: 解决方案:升级jdk到8即可. 2016年9月1日14:50

  8. SQL Server 触发器

    触发器是一种特殊类型的存储过程,它不同于之前的我们介绍的存储过程.触发器主要是通过事件进行触发被自动调用执行的.而存储过程可以通过存储过程的名称被调用. Ø 什么是触发器 触发器对表进行插入.更新.删 ...

  9. CentOS6.5安装Tomcat

    安装说明 安装环境:CentOS-6.4 安装方式:源码安装 软件:apache-tomcat-7.0.56.tar.gz 下载地址:http://tomcat.apache.org/download ...

  10. 如何解决Maple的应用在数学中

    对任意数学和技术学科的研究员.教师和学生而言,Maple是一个必备的工具.通过Maple,教师将复杂数学问题注入生命,学生的精力集中在概念理解上而不是如何使用工具上,研究员可以开发更复杂的算法或模型. ...