form新增的输入型控件：

名称 说明 图例
email 电子邮箱文本框，显示跟普通的没什么区别
tel  电话号码，pc端不会有明显的变化，但是移动端会自动切换键盘,输入有误不会阻止默认提交  
url 网页url
 search   搜索引擎，chrome下输入文字后，会多出一个关闭的X  
 range  特定范围内的数值选择器，min、max、step( 步数 )  
 number   只能包含数字的输入框,有键盘监听，不能输入其他字符。  
 color  颜色选择器  
datetime 显示完整日期 直接使用好像不行
datetime-local 显示完整日期，不含时区
time 显示时间，不含时区
date 显示日期、时间控件
week 显示周
month 显示月

Form新增表单特性和函数　　

  1. placeholder  :  输入框提示信息。

  2. autocomplete  :  是否保存用户输入值。默认为on，关闭提示选择off。

  3. autofocus  :  指定表单获取输入焦点。

  4. list和datalist  :  为输入框构造一个选择列表。

  5. list值为datalist标签的id。

  6. required  :  此项必填，不能为空。（可以直接破解）

  7. Pattern : 正则验证  pattern="\d{1,5}"。（可以直接破解）

  8. Formaction 在submit里定义提交地址，重写表单的action属性。

Form表单验证

  1. Invalid事件：oText.addEventListener("invalid",fn1,false);

  2. validity对象，通过下面的valid可以查看验证是否通过。
  3. 阻止默认验证：ev.preventDefault()。 
     <!DOCTYPE html>
    
 <html>
    
     <head>
    
         <meta charset="UTF-8">
    
         <title></title>
    
     </head>
    
     <body>
    
          <form action="http://www.baidu.com" method="post" id="myForm">
    
              <input type="text" id="username" name="username" required="required"/>
    
              <input type="submit" value="提交"/>
    
          </form>
    
     </body>
    
 </html>
    
 <script type="text/javascript">
    
     window.onload = function(){
    
         var oInput = document.getElementById("username");
    
         //如果不添加监听函数，username不填写，浏览器会默认阻止form提交，并给出提示：请填写此字段。
    
         //如果有添加，验证失败会先执行该函数，且this.validity.valid的值为false。
    
         //如果在函数中不添加ev.preventDefault();浏览器同样会给出提示：请填写此字段。添加则意味着阻止默认提示。
    
         oInput.addEventListener("invalid",function(ev){
    
             console.log(this.validity.valid);
    
 //            ev.preventDefault();
    
         },false);
    
     }
    
 </script> 
  4. formnovalidate属性：用在<input type="submit" value="提交" formnovalidate="formnovalidate"/>中，添加该属性，则关闭验证。
  5. valueMissing  :  输入值为空时。

  6. typeMismatch :  控件值与预期类型不匹配。

  7. patternMismatch  :  输入值不满足pattern正则。

  8. tooLong  :  超过maxLength最大限制。

  9. rangeUnderflow : 验证的range最小值。

  10. rangeOverflow：验证的range最大值

  11. stepMismatch: 验证range 的当前值 是否符合min、max及step的规则。

  12. setCustomValidity(); 自定义验证。

     <!DOCTYPE html>
    
 <html>
    
     <head>
    
         <meta charset="UTF-8">
    
         <title></title>
    
     </head>
    
     <body>
    
         <form name="myForm" action="" method="post">
    
             <input type="text" name="" id="myNumber" value=""  required="required"/>
    
             <input type="submit" name="" id="" value="提交" />
    
         </form
    
     </body>

 </html>
    
 <script type="text/javascript">
    
     window.onload = function(){
    
         var oNumber = document.getElementById("myNumber");
    
         oNumber.setCustomValidity("必填项，请输入！");
    
     }
    
 </script>

html5的Form新特性的更多相关文章

  1. HTML5的常用新特性你必须知道

    HTML5的常用新特性你必须知道 1 新的 声明 HTML 有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML 页面.这就是 的用处. 不是 HTML ...

  2. HTML5和CSS3新特性一览

    HTML5 1.HTML5 新元素 HTML5提供了新的元素来创建更好的页面结构: 标签 描述 <article> 定义页面独立的内容区域. <aside> 定义页面的侧边栏内 ...

  3. 常用的HTML5、CSS3新特性能力检测写法

    伴随着今年10月底HTML5标准版的发布,未来使用H5的场景会越来越多,这是令web开发者欢欣鼓舞的事情.然而有一个现实我们不得不看清,那就是IE系列浏览器还占有一大部分市场份额,以IE8.9为主,w ...

  4. html4与html5的区别及html5的一些新特性

    区别 1.html5语法的改变 HTML5简化了很多细微的语法,例如: 1.1doctype的声明; html4: <!DOCTYPE HTML PUBLIC "-//W3C//DTD ...

  5. HTML5，CSS3新特性，与旧版的区别

    HTML5新特性 (1)语意化更好的内容元素,比如 article.footer.header.nav.section (2)本地存储.sessionStorage.localStorage和inde ...

  6. HTML的表格标签，列表标签，表单标签，HTML5有哪些新特性

    欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...

  7. HTML5和CSS3新特性

    1.HTML5新标签和属性 1.1 兼容性前缀与语义化 兼容低版本的写法.比较新的浏览器,可以直接写.兼容性前缀,是每个浏览器私有的. 内核 兼容性前缀 浏览器 Gecko -moz- Firefox ...

  8. HTML5 十大新特性(二)——表单新特性

    H5的表单新特性可以分为两大类. 一.10个input的type值 1.email:邮件输入域,在表单提交时提供简单的邮箱格式验证,并弹出一个提示窗口. 2.url:地址输入域,在表单提交时提供简单的 ...

  9. HTML5 中的新特性：

    一,用于绘画的 canvas 元素,<canvas>标签替代Flash Flash给很多Web开发者带来了麻烦,要在网页上播放Flash需要一堆代码和插件.<canvas>标签 ...

随机推荐

  1. Oracle 函数总结

    <1>=========================返回 String,其中包含有与指定的字符代码相关的字符======================== 函      数:< ...

  2. C解析config

    #cat bb.c #include <stdio.h> #include <stdlib.h> #include <string.h> #include < ...

  3. asp网站中使用百度ueditor教程.txt

    1.根据网站类型及编码选择相应的ueditor版本,如我的网站编码为gb2312,则选择ueditor 1.43 asp gbk版.2.本机IE浏览器应为8.0或以上,8.0以下的ueditor 1. ...

  4. 到Oracle官网下载 Oracle11 G 数据可和客户端操作

    1.准备一个Oracle的官网账号 用户名:541509124@qq.com 密码:LR4ever.1314 2.在搜索框中输入Oracle 11 G 3.点击Database Downloadds ...

  5. 【转载】Apache shutdown unexpectedly启动错误解决方法

    http://blog.csdn.net/dong123dddd/article/details/21372179 xampp启动时显示的错误为: 9:52:41  [Apache] Attempti ...

  6. sql server的数据库个数、表个数及表的数据量统计

    sql server的数据库个数.表个数及表的数据量统计   --由于今天要监控数据,急需统计实例中1有多少库2库里有多少表3每个表有多少数据 --将写好的代码贴出来,用到如下的: --sysobje ...

  7. C# WPF 窗体传递消息

    对于存在窗体的WPF程序(或者说,起码在任务栏上有个图标,即ShowInTaskbar = true),互相传递消息是很容易的. 步骤: 1,寻找窗体的句柄 2,运用windows API: Send ...

  8. python编码小记

    Python编码小记 标签(空格分隔): 编程 python 1.list类型remove()操作 列表对象执行remove()函数后,会自动退出循环,所以如果想利用一个单独的for循环删除列表中多个 ...

  9. 同余方程 2012年NOIP全国联赛提高组

    时间限制: 1 s   空间限制: 128000 KB 题目描述 Description 求关于 x 同余方程 ax ≡ 1 (mod b)的最小正整数解. 输入描述 Input Descriptio ...

  10. git 拉取远程分支 --本地分支不存在

    git checkout -b 本地分支名 origin/远程分支名