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. （转）Quartz任务调度(1)概念例析快速入门

    http://blog.csdn.net/qwe6112071/article/details/50991563 Quartz框架需求引入 在现实开发中,我们常常会遇到需要系统在特定时刻完成特定任务的 ...

  2. 非常好用的1款UI自动化测试工具：airTest

    网易团队开发的UI自动化测试神器airTest,下载地址:http://airtest.netease.com/tutorial/Tutorial.html Appium和airTest对比,我的看法 ...

  3. B.3 字典

    在框架中,字典的选择要比列表少得多.只有三个主流的非并发 IDictionary<TKey, TValue> 实现,此外还有 ExpandoObject (第14章已介绍过). Concu ...

  4. django访问静态变量的设置

    在项目的urls.py文件中 默认urlpatterns是空的列表需要填入url匹配的路由,默认使用static from django.conf.urls import include, url f ...

  5. 【[Offer收割]编程练习赛12 A】歌德巴赫猜想

    [题目链接]:http://hihocoder.com/problemset/problem/1493 [题意] [题解] 枚举P从2..n/2 如果P是质数且N-P也是质数; 则输出P和N-P就好; ...

  6. js for循环中的var与let

    var a = []; for (var i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[6](); 上面代码 ...

  7. Network Saboteur POJ 2531 回溯搜索

    Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 12886   Accepted: 6187 Description A un ...

  8. OpenCV使用说明

    我在这边大概说一下OpenCV的使用,具体环境配置参考下面我给出的两个链接. 1. 对于目前OpenCV来说,安装变的简单了很多,现在官方已经给出了预编译文件,不要重新编译.具体使用可以参考http: ...

  9. angular5 httpclient的示例实战

    摘要: 从angular 4.3.0 以后的版本开始使用httpclient,替换了之前的http,引用的包路径已经变为了angular/common/http了 一个基础的 httpclient 样 ...

  10. CF #327 DIV2 D、E

    两题都不难. 对于D题,可以使用相对移动,把吹aircraft移动变成相反方向的待援点的移动.假设此时时间为t,把aircraft的速度设为Vmax,看待援点在飞船最大速度飞行t秒的范围内,注意风向变 ...