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>
