HTML5表单元素新特新
知识点总结：
1、新表单元素
全部都是由input标签组成
1.1 email
1.2 url
注意：输入的内容必须以http://
1.3 search
1.4 range
范围
属性:
min : 最小值
max : 最大值
step : 步长
value : 值
1.5 number
属性:
min : 最小值
max : 最大值
step : 步长
value : 值
1.6 color
通过windows的调色板选取颜色
1.7 date
弹出日历控件，选择年月日
值:2015-06-01
1.8 month
2015-06
1.9 week
2015-W13
1.10 datetime
2015-06-01T01:15Z
1.11 datetime-local
2、新表单属性
2.1 required
必须的，非空验证
<input type="text" required="false" />
2.2 multiple
在一个表单元素中，允许录入多段类型相同的数据，但必须由","作为分隔符
2.3 pattern
根据用户指定的正则表达式，对数据进行验证
2.4 autofocus
自动获取焦点
代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 table{ 8 border: 1px solid #1e90ff; 9 /*单边框设置*/ 10 border-collapse: collapse; 11 margin: 0 auto; 12 } 13 th,td{ 14 border: 1px solid #1e90ff; 15 padding: 5px; 16 } 17 </style> 18 </head> 19 <body> 20 <form name="frm"> 21 <table> 22 <tr> 23 <th style="width:80px;">名称</th> 24 <th>控件</th> 25 <th>说明</th> 26 </tr> 27 <tr> 28 <td>Email类型</td> 29 <td> 30 <input type="email" name="txtEmail" id="txtEmail" /> 31 </td> 32 <td>要求用户输入Email类型数据,提交表单时会自动验证</td> 33 </tr> 34 <tr> 35 <td>Search类型</td> 36 <td> 37 <input type="search" name="txtSearch" id="txtSearch" /> 38 </td> 39 <td>搜索文本框，与text类型输入框相似，但是可以快速删除输入的搜索关键字</td> 40 </tr> 41 <tr> 42 <td>URL类型</td> 43 <td> 44 <input type="url" name="txtURL" /> 45 </td> 46 <td>对用户输入的数据进行URL检测，如果不符合规范就给出提示，阻止表单提交</td> 47 </tr> 48 <tr> 49 <td>tel类型</td> 50 <td> 51 <input type="tel" name="txtTel" /> 52 </td> 53 <td>只对移动终端有效，会显示拨号键盘，通过该键盘接收用户录入的数据</td> 54 </tr> 55 <tr> 56 <td>数字类型</td> 57 <td> 58 <input type="number" min="18" max="80" step="1" name="txtNum" /> 59 </td> 60 <td>只能接受数字，min表示接受数字的下线，max同，step表示步长</td> 61 </tr> 62 <tr> 63 <td>范围类型</td> 64 <td> 65 <input type="range" min="18" max="80" step="1" value ="18" name="txtRange" id="txtRange" onchange="txtRange_change()" /> 66 </td> 67 <td>提供一个滑块工具以便取得指定范围内的数值</td> 68 </tr> 69 <tr> 70 <td>颜色类型</td> 71 <td> 72 <input type="color" name="txtColor" id="txtColor" /> 73 </td> 74 <td>弹出一个调色板</td> 75 </tr> 76 <tr> 77 <td>日期类型</td> 78 <td> 79 <input type="date" name="txtDate" /> 80 </td> 81 <td>弹出日历框，用户选择一天的时间</td> 82 </tr> 83 <tr> 84 <td>周类型</td> 85 <td> 86 <input type="week" name="txtWeek" /> 87 </td> 88 <td>弹出日历框,用户选择一个星期的时间</td> 89 </tr> 90 <tr> 91 <td>月类型</td> 92 <td> 93 <input type="month" name="txtMonth" /> 94 </td> 95 <td>弹出日历框,用户选择一个月的时间</td> 96 </tr> 97 <tr> 98 <td>日期与时间类型</td> 99 <td> 100 <input type="datetime" name="txtDatetime" /> 101 </td> 102 <td>通过箭头选取时间（Safari支持的比较好）</td> 103 </tr> 104 <tr> 105 <td>本地日期与时间类型</td> 106 <td> 107 <input type="datetime-local" name="txtDatetimeLocal" /> 108 </td> 109 <td>弹出日历框,允许用户选择年月日，通过按钮选取时间</td> 110 </tr> 111 <tr> 112 <td>Placeholder</td> 113 <td> 114 <input type="text" name="txtUserName" placeholder="请输入用户名" /> 115 </td> 116 <td>placeholder属性，默认显示一段提示文字在表单元素上</td> 117 </tr> 118 <tr> 119 <td>Required</td> 120 <td> 121 <input type="text" name="txtUserName" required /> 122 </td> 123 <td>required属性要求当前元素必须录入值，否则表单不允许提交</td> 124 </tr> 125 <tr> 126 <td>Multiple</td> 127 <td> 128 <input type="email" name="txtNewEmail" multiple /> 129 </td> 130 <td>允许用户输入多段数据，但必须使用逗号进行分割</td> 131 </tr> 132 <tr> 133 <td>Autofocus</td> 134 <td> 135 <input type="text" name="txtFocus" autofocus /> 136 </td> 137 <td>autofocus属性网页加载时，让此控件自动获取焦点</td> 138 </tr> 139 <tr> 140 <td>Pattern</td> 141 <td> 142 <input type="text" name="txtPhone" pattern="13\d{9}" /> 143 </td> 144 <td>pattern属性允许用户自定义正则表达式验证控件中的内容，不符合则不允许提交</td> 145 </tr> 146 <tr> 147 <td colspan="3" align="center"> 148 <input type="submit" value="提交" /> 149 <input type="button" value="取值" onclick="getValue()" /> 150 </td> 151 </tr> 152 153 154 155 </table> 156 <script> 157 function txtRange_change(){ 158 //document.form的name属性.表单内元素的name属性这样就可以定位到指定的表单中的元素（表单特有） 159 var value=document.frm.txtRange.value; 160 console.log("RangeValue:"+value); 161 } 162 function getValue(){ 163 var value=document.frm.txtColor.value; 164 console.log("ColorValue:"+value); 165 } 166 </script> 167 </form> 168 </body> 169 </html>
Chrome显示效果：
