HTML5表单新类型

   * INPUT新类型
     * 表单验证 - 提交表单
       * email类型 - 验证是否包含"@"
       * url类型 - 验证是否包含"http://"
     * 输入限制
       * number类型
         * min - 最小值
   * max - 最大值
   * step - 步长
       * range类型
         * value - 默认值
     * 手机端有效
       * search类型
       * tel类型
     * 提供控件
       * date类型
         * (常用)date - 日期类型
   * week - 周类型
   * month - 月份类型
       * color类型

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4   <meta charset="UTF-8">
  5   <title>INPUT新类型</title>
  6   <style>
  7   
  8   </style>
  9 </head>
 10 <body>
 11   <fieldset>
 12       <legend>INPUT新类型</legend>
 13       <!--
 14          TODO INPUT新类型
 15          TODO * 提供表单验证功能
 16          TODO   email+url
 17          TODO * 限制输入
 18          TODO   number+range
 19       -->
 20       <form action="#">
 21         <!--
 22             TODO email类型:
 23             TODO * 作用 - 完成email格式的验证
 24             TODO * 注意 - 无法验证email的有效性
 25             TODO * 效果 - 提交表单时进行验证
 26         -->
 27         email类型:<input type="email"><br>
 28         <!--
 29             TODO url类型:
 30             TODO * 链接地址 - http://www.baidu.com
 31             TODO * 作用 - 完成URL地址格式的验证
 32             TODO * 注意 - 验证输入内容中是否包含了"http://"
 33             TODO * 真实验证 - 验证是否以"http://"开始
 34 
 35             TODO HTML5的新特性
 36             TODO * 目前还不够完善 - 国内
 37             TODO * HTML5新特性在不断地完善中...
 38         -->
 39         url类型:<input type="url"><br>
 40         <!--
 41             TODO number类型
 42             TODO * 新属性
 43             TODO   * min - 最小值(>=)
 44             TODO   * max - 最大值(<=)
 45             TODO   * step - 步长(增加或减少的差值)
 46             TODO * 应用场景
 47             TODO   * 年龄、工作年限等
 48         -->
 49         数字类型:<input type="number" min="0" max="10" step="2"><br/>
 50         <!--
 51             TODO range类型
 52             TODO * 效果 - 提供滑动条
 53             TODO * 新属性
 54             TODO   * min - 最小值
 55             TODO   * max - 最大值
 56             TODO   * step - 步长
 57             TODO   * value - 默认值
 58             TODO * 特点
 59             TODO   * 最左边是最小值
 60             TODO   * 最右边是最大值
 61         -->
 62         范围类型:<input id="range" type="range" min="0" max="100" step="10" value="0"><br>
 63         <!--
 64             TODO search类型
 65             TODO * 效果 - 并不明显(真正的搜索样式)
 66             TODO 注意 - 手机端浏览器有效
 67         -->
 68         搜索类型:<input type="search"><br>
 69         <!--
 70             TODO tel类型
 71             TODO 注意 - 手机端浏览器有效
 72         -->
 73         tel类型:<input type="tel"><br/>
 74         <!--
 75             TODO 日期类型
 76             TODO * type=date - 日期
 77             TODO * type=week - 周
 78             TODO * type=month - 月份
 79         -->
 80         日期类型:<input type="month"><br/>
 81         <!--
 82             TODO 颜色选择器
 83         -->
 84         颜色选择器:<input id="color" type="color">
 85 
 86 
 87       <input type="submit">
 88     </form>
 89   </fieldset>
 90   <script>
 91       //TODO 手动实现表单的验证
 92       //TODO range类型绑定 onchange 事件
 93       var range = document.getElementById("range");
 94       range.onchange = function(){
 95           console.log(this.value);
 96       }
 97       //TODO color类型绑定 onchange 事件
 98       var color = document.getElementById("color");
 99       color.onchange = function(){
100           console.log(this.value);
101       }
102   </script>
103  </body>
104 </html>

input表单新类型