html5中input的type类型有哪些（总结）html5中input的type类型有哪些（总结）⼀、总结
⼀句话总结：时间、颜⾊、（邮件、电话、url）、（数字、数字范围）、搜索search
⼆、html5中input的type类型
值描述
button定义可点击的按钮（⼤多与 JavaScript 使⽤来启动脚本）
checkbox定义复选框。
color定义拾⾊器。
date定义⽇期字段（带有 calendar 控件）
datetime定义⽇期字段（带有 calendar 和 time 控件）
datetime-local定义⽇期字段（带有 calendar 和 time 控件）
month定义⽇期字段的⽉（带有 calendar 控件）
week定义⽇期字段的周（带有 calendar 控件）
time定义⽇期字段的时、分、秒（带有 time 控件）
email定义⽤于 e-mail 地址的⽂本字段
file定义输⼊字段和 "浏览..." 按钮，供⽂件上传
hidden定义隐藏输⼊字段
image定义图像作为提交按钮
number定义带有 spinner 控件的数字字段
password定义密码字段。字段中的字符会被遮蔽。
radio定义单选按钮。
range定义带有 slider 控件的数字字段。
reset定义重置按钮。重置按钮会将所有表单字段重置为初始值。
search定义⽤于搜索的⽂本字段。
submit定义提交按钮。提交按钮向服务器发送数据。
tel定义⽤于电话号码的⽂本字段。
text默认。定义单⾏输⼊字段，⽤户可在其中输⼊⽂本。默认是 20 个字符。
url定义⽤于 URL 的⽂本字段。
三、HTML5 input类型总结
1、⽂字总结
⼀、⽂本类
Text，⽂本
Url，⽹络地址
Password，密码
Email，邮箱地址
⼆、操作类
Checkbox ，复选框
Radio，单选框
File，上传⽂件
Number，数值
Range，百分百滑动条
三、功能类
Button，按钮
Image，图⽚提交按钮
Submit，⽂字提交按钮
Reset，重置表单
四、Date类
Date，年⽉⽇控件
Month，年⽉控件
Week，年周控件
Time，时间控件
Datetime，年⽉⽇+时间控件
Datetime-local，本地年⽉⽇+时间控件
五、特殊类
Hidden，隐藏信息
扩展：
1.⽂本类属性：placeholder。这是⼀个占位符，可以作为提⽰信息，⽽且⽆法被⽤户选中。
2.Url和e-mail，在H5中，会在提交表单的时候检测其格式是否书写正确。
3.操作类。⼀般input标签会结合label标签使⽤，label⼀般有两种书写⽅法：
1.⾮跨度：<label><input></input></label>
2.跨度：<label for="input_id"></label>
<input id="input_id"></input>
如果⽹页结构中，input和label是相邻的关系，可以直接使⽤⾮跨度的书写⽅法，以减少代码量。
4.file。在实际应⽤中，⽹页表单中需要上传的⽂件⼀般不⽌⼀个，这时候就要⽤到multiple属性，它是⼀个布尔值属性，在添加这个属性后，就可以上传多个属性。另外，上传的⽂件可以被规定，使⽤accept属性。这个⼀个数组属性，属性值是MIME规定的⽂件类型。
5.Button。Button类型只能在value中定义按钮上显⽰的提⽰⽂字。Image类型只能在src中链接图⽚。
⽽button标签则结合了button和image的属性，它是⼀个双标签，也就是说它可以在内部嵌套其他标签，
让按钮的显⽰效果更多元化。
6.Date类。Date类型的input标签是H5中新增加的。它实际上是⼀个控件，可以很⽅便的选择和显⽰时间数据，但是⽬前⽀持该控件的浏览器并不多。其中IE是完全不⽀持的。
7.Hidden。这个属性的input标签⽆法显⽰，也⽆法被⽤户控制。它的作⽤可以⽤来标记⼀些隐藏的表单信息。
例如：在⼀些⽹站中，对于⽤户的描述，有⼀个信息完整度的提⽰。
⽤户在注册的时候，必填项有5个，可填项有5个。注册的表单可以⽤hidden来记录可填项中有多少个是有数据的。
假如，⼀个⽤户把所有的可填项全部填写。那么他的信息完整度就是100%。
另⼀个⽤户的可填项⼀个也没有填写，他的信息完整度就是50%。
⽽这个数值可以根据hidden中记录的数值来进⾏计算。
2、代码
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>Form</title>
6<style>
7 form {
8 width: 670px;
9 margin: 0 auto;
10 }
11
12 td {
13 background-color: #ffffff;
14 }
15
16 td, input {
17 font-size: 20px;
18 }
19
20 th {
21 font-size: 26px;
22 background-color: #22ccff;
23 letter-spacing: 2px;
24 }
25
26 #sub {
27 float: right;
28 margin-left: 10px;
29 position: relative;
30 top: 50px;
31 left: 0px;
32 -webkit-transition: all 0.5s ease-in-out 0.0s;
33 -moz-transition: all 0.5s ease-in-out 0.0s;
34 -ms-transition: all 0.5s ease-in-out 0.0s;
35 -o-transition: all 0.5s ease-in-out 0.0s;
36 transition: all 0.5s ease-in-out 0.0s;
37 }
38</style>
39</head>
40<body>
41<form target="_blank" action="URL">
42<!-- 额外的提交按钮 -->
43<input type="submit" value="提交" id="sub"/>
44<table bgcolor="#000" cellpadding="10" align="center">
45<!-- ⽂本类 -->
46<tr>
47<th colspan="2">⽂本类</th>
48</tr>
49<tr>
50<td>text</td>
51<td><input type="text" value="attribute:value" pattern="[A-Z,a-z]{1}[a-z,0-9]{3,10}"/></td> 52</tr>
53<tr>
54<td>url</td>
55<td>
56<input type="url" placeholder="attribute:placeholder" value="a:b"/>
57</td>
58</tr>
59<tr>
60<td>password</td>
61<td>
62<input type="password" maxlength="8" placeholder="请输⼊密码" autofocus required/> 63</td>
64</tr>
65<tr>
66<td>email</td>
67<td>
68<input type="email" value="1@2.3"/>
69</td>
70</tr>
71<tr>
72<td>tel</td>
73<td><input type="tel"></td>
74</tr>
75<tr>
76<td>search</td>
77<td><input type="search"/></td>
78</tr>
79<tr>
80<td colspan="2">
81<p>“placeholder”：占位符；</p>
82<p>“autofocus”：焦点获取；</p>
83<p>“required”；表单必填项；</p>
84<p>“pattern”；输⼊规范，该值为⼀个正则表达式；</p>
85<p>在H5中，URL和email类型在提交表单时，会检测是否符合格式。</p>
86</td>
87</tr>
88<!-- ⽂本类 end -->
89
90<!-- 操作类 -->
91<tr>
92<th colspan="2">操作类</th>
93</tr>
94
95<tr>
96<td>checkbox</td>
97<td>
98<label><input type="checkbox" name="ch_box"/>box_1</label>
99<label><input type="checkbox" name="ch_box"/>box_2</label>
100<label><input type="checkbox" name="ch_box"/>box_3</label>
101<input type="checkbox" id="ch_box4"/>
102<label for="ch_box4">box_4</label>
103</td>
104</tr>
105<tr>
106<td>radio</td>
107<td>
108<label><input type="radio" name="radio"/>ra_1</label>
109<label><input type="radio" name="radio"/>ra_2</label>
110<label><input type="radio" name="radio"/>ra_3</label>
111<label><input type="radio" name="radio"/>ra_4</label>
112</td>
113</tr>
114<tr>
115<td colspan="2">
116 label:<br/>
117⾮跨度：<label><input></input></label><br/>
118跨&emsp；度：<label for="input_id"></label><br/>
119 <input id="input_id"></input>
120</td>
121</tr>
122<tr>
123<td>file</td>
124<td>
125<input type="file" multiple="multiple"/>
126<p>multiple="multiple"：允许添加多个值；</p>
127<p>accept="MIME_type"；指定上传⽂件的类型；</p>
128<p>如：accept="image/jpg,image/gif"</p>
129<p><a href="www.w3school/media/media_mimeref.asp" target="_blank">MIME_type 附录表</a></p> 130</td>
131</tr>
132<tr>
133<td>number</td>
134<td><input type="number" max="100" min="90" step="2"/>
135<p>只允许输⼊数字；"e":⾃然常数;</p></td>
136</tr>
137<tr>
138<td>range</td>
139<td>
140<input type="range" max="100" min="0" step="20"/>
141<p>“value”，默认为50，范围0~100；</p>
142</td>
143</tr>
144<tr>
145<td colspan="2">max：最多值；min：最⼩值；step：步长；</td>
146</tr>
147<tr>
148<td>color</td>
149<td><input type="color" value="#00ff00"/>数值型：#ffffff；</td>
150</tr>
151<!-- 操作类 end -->
152
153<!-- 表单功能 -->
154<tr>
155<th colspan="2">功能类</th>
156</tr>
157
158<tr>
159<td>button</td>
160<td>
161<input type="button" value="button"/>
162<button>This is a button.<img src="btn_03.png" width="52"/></button>
163<p>“button”允许嵌⼊其他元素；</p>
164</td>
165</tr>
166<tr>
167<td>image</td>
168<td><input type="image" src="btn_03.png" width="32"
169 height="26"/><span> H5中使⽤“width”“height”修改图⽚⼤⼩；</span></td>
170</tr>
171<tr>
172<td>submit</td>
173<td>
174<input type="submit"/>
175<p>get：在url地址上传送参数到服务器;<br/>post：在后台传送参数到服务器; </p>
176</td>
177</tr>
178<tr>
179<td>reset</td>
180<td><input type="reset"/></td>
181</tr>
182<!-- 表单功能 end -->
183
184<!-- ⽇期类型 -->
185<tr>
186<th colspan="2">Date 类</th>
187</tr>
188
189<tr>
190<td>date</td>
191<td><input type="date"/></td>
192</tr>
193<tr>
194<td>month</td>
195<td><input type="month"/></td>
196</tr>
197<tr>
198<td>week</td>
199<td><input type="week"/></td>
200</tr>
201<tr>
202<td>time</td>
203<td><input type="time"/></td>
204</tr>
205<tr>
206<td>datetime</td>
207<td><input type="datetime" value="2016-08-02T08:32Z"/></td>
208</tr>
209<tr>
210<td>datetime-local</td>
211<td><input type="datetime-local"/></td>
212</tr>
213<!-- ⽇期类型 end -->
214<!-- 特殊类 -->
215<tr>
216<th colspan="2">特殊类</th>
217</tr>
218
219<tr>
220<td>hidden</td>
221<td><input type="hidden"/>
222<p>可⽤于记录⼀些表单状态信息<br/>（例如使⽤value的值标记可选项为⾮空值的个数），<br/>或者其他⾃定义信息；</p></td> 223</tr>
224</table>
225</form>
226</body>
227<script type="text/javascript">
228function sub_move() {
229var s = ElementById("sub");
230 scroll = function _scroll() {
231var top = document.documentElement.scrollTop || document.body.scrollTop;
232 p = top + 50 + "px";
233 }inputtypefile不上传文件
234 }
235</script>
236<script type="text/javascript">
237 load = function main() {
238 sub_move();
239 }
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论