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
自动获取焦点
eg：
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显示效果：
时间： 2024-11-02 18:41:30