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()。 
    1.  <!DOCTYPE html>
    2.  <html>
    3.      <head>
    4.          <meta charset="UTF-8">
    5.          <title></title>
    6.      </head>
    7.      <body>
    8.           <form action="http://www.baidu.com" method="post" id="myForm">
    9.               <input type="text" id="username" name="username" required="required"/>
    10.               <input type="submit" value="提交"/>
    11.           </form>
    12.      </body>
    13.  </html>
    14.  <script type="text/javascript">
    15.      window.onload = function(){
    16.          var oInput = document.getElementById("username");
    17.          //如果不添加监听函数，username不填写，浏览器会默认阻止form提交，并给出提示：请填写此字段。
    18.          //如果有添加，验证失败会先执行该函数，且this.validity.valid的值为false。
    19.          //如果在函数中不添加ev.preventDefault();浏览器同样会给出提示：请填写此字段。添加则意味着阻止默认提示。
    20.          oInput.addEventListener("invalid",function(ev){
    21.              console.log(this.validity.valid);
    22.  //            ev.preventDefault();
    23.          },false);
    24.      }
    25.  </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(); 自定义验证。

    1.  <!DOCTYPE html>
    2.  <html>
    3.      <head>
    4.          <meta charset="UTF-8">
    5.          <title></title>
    6.      </head>
    7.      <body>
    8.          <form name="myForm" action="" method="post">
    9.              <input type="text" name="" id="myNumber" value=""  required="required"/>
    10.              <input type="submit" name="" id="" value="提交" />
    11.          </form
    12.      </body>
    13.  
    14.  </html>
    15.  <script type="text/javascript">
    16.      window.onload = function(){
    17.          var oNumber = document.getElementById("myNumber");
    18.          oNumber.setCustomValidity("必填项，请输入！");
    19.      }
    20.  </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. 太坑了，mybatis注解一对多，id没了

    @Select("SELECT *, id nodes FROM QUESTION_PO WHERE ID=#{id}") @Results({ @Result(property ...

  2. Origin C调用GSL

    GSL (GNU Scientific Library, http://www.gnu.org/software/gsl/)是C.C++的数值算法库,提供了范围宽广的数学程序,包括随机数字生成器.数理 ...

  3. .net core里用ZXing生成二维码

    先获取Nuget包 static void Main(string[] args) { string content = "二维码信息"; BitMatrix byteMatrix ...

  4. IOS内购--后台PHP认证

    参考网址:https://blog.csdn.net/que_csdn/article/details/80861408 http://www.php.cn/php-weizijiaocheng-39 ...

  5. 00 python基础知识

    ''' ''' print('hello world!') ''' 变量 ''' # 变量的:‘tank’,会在内存中产生一份内存地址 #变量名:相当于一个门牌号,用于与变量进行绑定 # = :用来把 ...

  6. zabbix实现163邮件报警

    Zabbix 邮件报警 电脑登录网易邮箱配置,把自己的授权码看一下,并写入配置文件 server端安装配置邮件服务器 [root@server ~]# yum -y install mailx dos ...

  7. Linux基础篇（1）

    1.计算机硬件的五大单元 五大单元:输入单元,输出单元,CPU内部的控制单元,算术逻辑单元与内存等五大部分. (Ps:CPU实际要处理的数据完全来自于内存) 2.计算机上常用的计算单位 (1)容量单位 ...

  8. Burnside引理和polay计数 poj2409 Let it Bead

    题目描述 "Let it Bead" company is located upstairs at 700 Cannery Row in Monterey, CA. As you ...

  9. python之BeautifulSoup库

    1. BeautifulSoup库简介 和 lxml 一样,Beautiful Soup 也是一个HTML/XML的解析器,主要的功能也是如何解析和提取 HTML/XML 数据.lxml 只会局部遍历 ...

  10. 30.IK分词器配置文件讲解以及自定义词库

    主要知识点: 知道IK默认的配置文件信息 自定义词库     一.ik配置文件     ik配置文件地址:es/plugins/ik/config目录     IKAnalyzer.cfg.xml:用 ...