html5中input的type类型有哪些（总结）
<h1><span style="font-size: 1.5em">目录</span></h1><div id="navCategory">
<p> </p>
<ul class="mulu_ul1">
<li class="mulu1li">一、总结
<ul class="mulu_ul2">
<li class="mulu2li">一句话总结：时间、颜色、（邮件、电话、url）、（数字、数字范围）、搜索search</li>
</ul>
</li>
<li class="mulu1li">二、html5中input的type类型</li>
<li class="mulu1li">三、HTML5 input类型总结
<ul class="mulu_ul2">
<li class="mulu2li">1、文字总结</li>
<li class="mulu2li">2、代码</li>
</ul>
</li>
<li class="mulu1li">四、input相关总结
<ul class="mulu_ul2">
<li class="mulu2li">一、使input文本框不可编辑的三种方法</li>
<li class="mulu2li">二、input调用移动端的相册等</li>
</ul>
</li>
</ul>
</div>
<p> </p>
<div><br></div>
<h2 class="fry_summary"><span class="fry_summary_icon">> 一、总结（点击显示或隐藏总结内容）</span></h2>
<h2 class="fry_summary">一句话总结：时间、颜色、（邮件、电话、url）、（数字、数字范围）、搜索search</h2>
<div id="mulu_summary">
<p class="mulu_summary"> </p>
</div>
<h2>二、html5中input的type类型</h2>
<p><img src="https://images2018.cnblogs.com/blog/1163900/201806/1163900-20180607085134474-1876978155.png" alt=""></p>
<p> </p>
<table class="dataintable">
<tbody>
<tr><th>值</th><th>描述</th></tr>
<tr>
<td>button</td>
<td>定义可点击的按钮（大多与 JavaScript 使用来启动脚本）</td>
</tr>
<tr>
<td>checkbox</td>
<td>定义复选框。</td>
</tr>
<tr>
<td class="html5_new">color</td>
<td>定义拾色器。</td>
</tr>
<tr>
<td class="html5_new">date</td>
<td>定义日期字段（带有 calendar 控件）</td>
</tr>
<tr>
<td class="html5_new">datetime</td>
<td>定义日期字段（带有 calendar 和 time 控件）</td>
</tr>
<tr>
<td class="html5_new">datetime-local</td>
<td>定义日期字段（带有 calendar 和 time 控件）</td>
</tr>
<tr>
<td class="html5_new">month</td>
<td>定义日期字段的月（带有 calendar 控件）</td>
</tr>
<tr>
<td class="html5_new">week</td>
<td>定义日期字段的周（带有 calendar 控件）</td>
</tr>
<tr>
<td class="html5_new">time</td>
<td>定义日期字段的时、分、秒（带有 time 控件）</td>
</tr>
<tr>
<td class="html5_new">email</td>
<td>定义用于 e-mail 地址的文本字段</td>
</tr>
<tr>
<td>file</td>
<td>定义输入字段和 "浏览..." 按钮，供文件上传</td>
</tr>
<tr>
<td>hidden</td>
<td>定义隐藏输入字段</td>
</tr>
<tr>
<td>image</td>
<td>定义图像作为提交按钮</td>
</tr>
<tr>
<td class="html5_new">number</td>
<td>定义带有 spinner 控件的数字字段</td>
</tr>
<tr>
<td>password</td>
<td>定义密码字段。字段中的字符会被遮蔽。</td>
</tr>
<tr>
<td>radio</td>
<td>定义单选按钮。</td>
</tr>
<tr>
<td class="html5_new">range</td>
<td>定义带有 slider 控件的数字字段。</td>
</tr>
<tr>
<td>reset</td>
<td>定义重置按钮。重置按钮会将所有表单字段重置为初始值。</td>
</tr>
<tr>
<td class="html5_new">search</td>
<td>定义用于搜索的文本字段。</td>
</tr>
<tr>
<td>submit</td>
<td>定义提交按钮。提交按钮向服务器发送数据。</td>
</tr>
<tr>
<td class="html5_new">tel</td>
<td>定义用于电话号码的文本字段。</td>
</tr>
<tr>
<td>text</td>
<td>默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符。</td>
</tr>
<tr>
<td class="html5_new">url</td>
<td>定义用于 URL 的文本字段。</td>
</tr>
</tbody>
</table>
<p> </p>
<div> </div>
<h2>三、HTML5 input类型总结</h2>
<p> </p>
<h3>1、文字总结</h3>
<p>一、文本类</p>
<p> Text，文本</p>
<p> Url，网络地址</p>
<p> Password，密码</p>
<p> Email，邮箱地址</p>
<p>二、操作类</p>
<p> Checkbox ，复选框</p>
<p> Radio，单选框</p>
<p> File，上传文件</p>
<p> Number，数值</p>
<p> Range，百分百滑动条</p>
<p>三、功能类</p>
<p> Button，按钮</p>
<p> Image，图片提交按钮</p>
<p> Submit，文字提交按钮</p>
<p> Reset，重置表单</p>
<p>四、Date类</p>
<p> Date，年月日控件</p>
<p> Month，年月控件</p>
<p> Week，年周控件</p>
<p> Time，时间控件</p>
<p> Datetime，年月日+时间控件</p>
<p> Datetime-local，本地年月日+时间控件</p>
<p>五、特殊类</p>
<p> Hidden，隐藏信息</p>
<p> </p>
<p>扩展：</p>
<p>1.文本类属性：placeholder。这是一个占位符，可以作为提示信息，而且无法被用户选中。</p>
<p>2.Url和e-mail，在H5中，会在提交表单的时候检测其格式是否书写正确。</p>
<p>3.操作类。一般input标签会结合label标签使用，label一般有两种书写方法：</p>
<p>1.非跨度：<label><input></input></label></p>
<p>2.跨度：<label for="input_id"></label><br> <input id="input_id"></input></p>
<p> 如果网页结构中，input和label是相邻的关系，可以直接使用非跨度的书 写方法，以减少代码量。</p>
<p>4.file。在实际应用中，网页表单中需要上传的文件一般不止一个，这时候就要用到multiple属性，它是一个布尔值属性，在添加这个属性后，就可以上传多个属性。另外，上传的文件可以被规定，使用accept属性。这个一个数组属性，属性值是MIME规定的文件类型。</p>
<p>5.Button。Button类型只能在value中定义按钮上显示的提示文字。Image类型只能在src中链接图片。</p>
<p> 而button标签则结合了button和image的属性，它是一个双标签，也就是说它可以在内部嵌套其他标签，让按钮的显示效果更多元化。</p>
<p>6.Date类。Date类型的input标签是H5中新增加的。它实际上是一个控件，可以很方便的选择和显示时间数据，但是目前支持该控件的浏览器并不多。其中IE是完全不支持的。</p>
<p>7.Hidden。这个属性的input标签无法显示，也无法被用户控制。它的作用可以用来标记一些隐藏的表单信息。</p>
<p> 例如：在一些网站中，对于用户的描述，有一个信息完整度的提示。</p>
<p> 用户在注册的时候，必填项有5个，可填项有5个。注册的表单可以用hidden来记录可填项中有多少个是有数据的。</p>
<p> 假如，一个用户把所有的可填项全部填写。那么他的信息完整度就是100%。</p>
<p> 另一个用户的可填项一个也没有填写，他的信息完整度就是50%。</p>
<p> 而这个数值可以根据hidden中记录的数值来进行计算。</p>
<p> </p>
<p> </p>
<h3>2、代码</h3>
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="" id="code_img_opened_ab94b8c7-9433-4752-a2d7-12eb96e29eef" class="code_img_opened">
<div id="cnblogs_code_open_ab94b8c7-9433-4752-a2d7-12eb96e29eef" class="cnblogs_code_hide">
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://common.cnblogs.com/images/copycode.gif" alt="复制代码"></span></div>
<pre>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="{1}{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 非跨度：&lt;label&gt;&lt;input&gt;&lt;/input&gt;&lt;/label&gt;<br/>
118 跨&emsp;度：&lt;label for="input_id"&gt;&lt;/label&gt;<br/>
119 &emsp;&emsp;&emsp;&emsp;&lt;input id="input_id"&gt;&lt;/input&gt;
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="http://www.w3school.com.cn/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>&emsp;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">
228 function sub_move() {
229 var s = document.getElementById("sub");
230 window.onscroll = function _scroll() {
231 var top = document.documentElement.scrollTop || document.body.scrollTop;
232 s.style.top = top + 50 + "px";
233 }
234 }
235 </script>
236 <script type="text/javascript">
237 window.onload = function main() {
238 sub_move();
239 }
240 </script>
241 </html>
242
243 input 类型 demo</pre>
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://common.cnblogs.com/images/copycode.gif" alt="复制代码"></span></div>
</div>
</div>
<p> </p>
<div> </div>
<h2>四、input相关总结</h2>
<p> </p>
<h3>一、使input文本框不可编辑的三种方法</h3>
<p>1.disabled 属性规定应该禁用 input 元素，被禁用的 input 元素，不可编辑，不可复制，不可选择，不能接收焦点,后台也不会接收到传值。设置后文字的颜色会变成灰色。disabled 属性无法与 <input type="hidden"> 一起使用。<br>示例：<input type="text" disabled="disabled" /></p>
<p><br>2.readonly 属性规定输入字段为只读可复制，但是，用户可以使用Tab键切换到该字段，可选择,可以接收焦点，还可以选中或拷贝其文本。后台会接收到传值. readonly 属性可以防止用户对值进行修改。<br>readonly 属性可与 <input type="text"> 或 <input type="password"> 配合使用。<br>示例：<input type="text" readonly="readonly"></p>
<p><br>3.readonly unselectable="on" 该属性跟disable类似，input 元素，不可编辑，不可复制，不可选择，不能接收焦点，设置后文字的颜色也会变成灰色，但是后台可以接收到传值。<br>示例：<input type="text" readonly unselectable="on" ><br>（还是菜鸟一枚，写的不对的地方欢迎指正！）</p>
<p> </p>
<p> </p>
<h3>二、input调用移动端的相册等</h3>
<p><input type="file" accept="image/*" capture="camera"> //支持相册</p>
<p><input type="file" accept="video/*" capture="camcorder"> //支持视频</p>
<p><input type="file" accept="audio/*" capture="microphone"> //支持录音</p>
<p><input type="file" accept="image/*" multiple> //直接支持多选</p>
<p>建议在电脑上开发测试的时候不要加上accept的这个属性，他会明显使找并打开文件的过程变慢，效率很低</p>
<p> </p>
<div id="MySignature">
<div class="fry_website">
<div class="fry_website">我的旨在学过的东西不再忘记（主要使用艾宾浩斯遗忘曲线算法及其它智能学习复习算法）的偏公益性质的完全免费的编程视频学习网站： fanrenyi.com；有各种前端、后端、算法、大数据、人工智能等课程。</div>
<div class="copyright"> </div>
<div id="fry_know_friends"> </div>
<div class="fry_tech_group"> </div>
<div class="fry_recommend">
<h2> </h2>
<div id="fry_recommend"> </div>
</div>
<div id="fry_inspiration">
<div id="fry_inspiration_content">
<div id="fry_inspiration_text">
<div>翻过这道山，就有人听到你的故事。</div>
<div>学习</div>
<div>轻学无用：学生时代学html、java、c++、php、安卓、python等和之前学英语的感受，轻学无用，不为需求学，不学全面无用。</div>
<div>学习和游戏的区别的启示：像游戏一样，每次学习完，你告诉自己，你学到了什么，你收获到了什么。是你在游戏中获得了多少道具装备等级场景，这个给你的舒适满足感。问题不是你学了多少，而是你到底学会了多少。</div>
<div>命名：要给招数起名字，没有名字，没有经过大脑，没有深刻印象，他们永远都不是自己的，找一个自己喜欢印象深刻的名字做对应。</div>
<div>多遍：学习视频或者书并不是只看一遍就够了，因为一遍能收获的内容非常有限，当然也可以只看一遍，那就需要好好记忆，多提问，多入脑子。</div>
<div>每日清0规律：无论是对学习的劳累，还是对游戏的无趣，还是对生活的感受，每日睡一觉之后就可以清空绝绝绝大部分，只有极极少一部分会留下来。</div>
<div>接触：那些不好的东西，不要接触，停不下来的，比如游戏，各种接触都是触发的因素，同理可以应用于学习。</div>
<div>学习的方式：legend2 + legend3 + 知识总结（代码）文档（系统） + 详细知识word总结文档（系统+分类）+系统看博客总结。</div>
<div>知识的触类旁通：知识之间是触类旁通的，比如你更加深刻的学了爬虫之后，你可能会对网站开发更加了解。</div>
<div>分工简化思想：明确每步做什么，可以简化问题，快速解决问题[代码][分工]</div>
<div> </div>
<div>做人</div>
<div>理解：能够使用并不代表理解，比如2岁大的宝宝，在这个阶段，宝宝可以正确告诉别人“我是男孩”或“我是女孩”。但是，这只是一种简单的“转述”行为，因为父母告诉他（她）“你是男（女）宝宝”，而尚未形成真正意义上的性别意识。</div>
<div>技巧：无论是做人做事还是学习，都是需要技巧的。</div>
<div>矫枉过正：很多事情都容易矫枉过正（技巧和局势才是通用的）</div>
<div>结善缘：</div>
<div>事情原因：生活中分析问题的原因，然后解决问题，会简单很多</div>
<div>实力为尊：</div>
<div>觉得自己是否受伤完全是自己的主观情绪：</div>
<div>《康熙王朝》：少年康熙被别人玩弄于股掌之间启示：不要被别人玩弄于股掌之间，要做的是想通（可能别人更加高明）、忍耐和积蓄自己的力量</div>
<div>《易中天讲三国》袁绍性格：【感觉大部分人都是袁绍】：袁绍好面子，凭喜好办事，好听马屁，没有容人之量</div>
<div>不是放弃，而是最快最便捷：</div>
<div>人生如负重致远不可急躁：</div>
<div>不要务虚名而致实祸：</div>
<div>强夸百害无益：</div>
<div>人的逐利本质：</div>
<div>情感回馈：善意回馈，傲慢回馈</div>
<div>感悟</div>
<div>身体：安全和身体最重要了，这个才是真正的本钱</div>
<div>刷反思：遇到的各种心理问题和心态的问题都可以去刷反思</div>
<div>悟透：所有错误的抉择(所有的挣扎)都是因为没想明白，没领悟透。</div>
<div>人生无大事：重在坚持，重在平时。所谓的希望并非是希望，或者说并非是希望的全部，比如词根词缀，语法，再到背，生活，没有人会告诉你这是几分之几的钥匙，这便是有趣的点。所谓的绝望，未必是绝望，比如大四下，很有可能是希望和机遇。</div>
<div>换环境：是个可行的方法，但是我不能什么事情都依靠外物啊，内在觉醒，经历，悟透才是王道，而且，内在不改变，激励不够，换个环境真的有用么。</div>
<div>同，所得：景色不过如此，每日的热搜也不过如此，每日的朋友圈也不过如此，每日的电影也不过如此，每日的游戏(打怪，升级，竞技)也不过如此。重点是，每日，自己到底收获了什么(学到了什么)。所谓的新鲜事真的新鲜吗，那么多年的历史(时间映射和地点映射)还涵盖不了当下么，再稀奇百倍的事情也发生过。</div>
<div>监管：在心智和阅历不够的情况下缺乏监管是相当恐怖的事情（小孩子没有明辨是非能力，易冲动，缺乏监管很容易从恶），事实上，就算心智和阅历很够，缺乏监管同样是很恐怖的事情（贪官贪财，官员渎职）。</div>
<div>约定：初期规则和约定：https://www.bilibili.com/video/av35953030/?p=57。</div>
<div>六欲，迷茫：人皆有六欲，人皆会迷茫，不必太自责，及时收住就对了，不是看谁不迷茫，而是看谁能够及时悬崖勒马，事实上，所有的人都会迷，无一例外。及时亡羊补牢。</div>
<div>困境：有多少人困在这一层，而生活有趣的是，没有人告诉你需要去突破。（也没有人告诉你要怎么突破）</div>
<div>生活的真谛：整日饱食终日的玩不是生活的意义，整日疲于奔命的学也不是生活的意义，生活的意义在于在于实力稳步提升，劳逸结合，享受生活。</div>
<div>危机也是机遇：无论是修真小说还是实际。</div>
<div>满足与斗志：人一旦满足就容易不思进取。但是人满足人会很开心或者很平静。人不满足的话在一定情况下会激发斗志。所以可以在满足和不满足中找一个平衡。比如 心理满足之后会想去玩游戏，而不是学习或工作。</div>
</div>
</div>
</div>
</div>
</div><br><br>
来源：https://www.cnblogs.com/onesea/p/13606954.html
頁:
[1]