目錄
- 一、總結
- 一句話總結：時間、顔色、（郵件、電話、url）、（數字、數字範圍）、搜尋search
- 二、html5中input的type類型
- 三、HTML5 input類型總結
- 1、文字總結
- 2、代碼
- 四、input相關總結
- 一、使input文本框不可編輯的三種方法
- 二、input調用移動端的相冊等
> 一、總結（點選顯示或隐藏總結内容）
一句話總結：時間、顔色、（郵件、電話、url）、（數字、數字範圍）、搜尋search
二、html5中input的type類型
| 值 | 描述 |
| button | 定義可點選的按鈕（大多與 JavaScript 使用來啟動腳本） |
| checkbox | 定義複選框。 |
| color | 定義拾色器。 |
| date | 定義日期字段（帶有 calendar 控件） |
| datetime | 定義日期字段（帶有 calendar 和 time 控件） |
| datetime-local | 定義日期字段（帶有 calendar 和 time 控件） |
| month | 定義日期字段的月（帶有 calendar 控件） |
| week | 定義日期字段的周（帶有 calendar 控件） |
| time | 定義日期字段的時、分、秒（帶有 time 控件） |
| 定義用于 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="[email protected]"/>
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 跨 度：<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="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> 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 四、input相關總結
一、使input文本框不可編輯的三種方法
1.disabled 屬性規定應該禁用 input 元素，被禁用的 input 元素，不可編輯，不可複制，不可選擇，不能接收焦點,背景也不會接收到傳值。設定後文字的顔色會變成灰色。disabled 屬性無法與 <input type="hidden"> 一起使用。
示例：<input type="text" disabled="disabled" />
2.readonly 屬性規定輸入字段為隻讀可複制，但是，使用者可以使用Tab鍵切換到該字段，可選擇,可以接收焦點，還可以選中或拷貝其文本。背景會接收到傳值. readonly 屬性可以防止使用者對值進行修改。
readonly 屬性可與 <input type="text"> 或 <input type="password"> 配合使用。
示例：<input type="text" readonly="readonly">
3.readonly unselectable="on" 該屬性跟disable類似，input 元素，不可編輯，不可複制，不可選擇，不能接收焦點，設定後文字的顔色也會變成灰色，但是背景可以接收到傳值。
示例：<input type="text" readonly unselectable="on" >
（還是菜鳥一枚，寫的不對的地方歡迎指正！）
二、input調用移動端的相冊等
<input type="file" accept="image/*" capture="camera"> //支援相冊
<input type="file" accept="video/*" capture="camcorder"> //支援視訊
<input type="file" accept="audio/*" capture="microphone"> //支援錄音
<input type="file" accept="image/*" multiple> //直接支援多選
建議在電腦上開發測試的時候不要加上accept的這個屬性，他會明顯使找并打開檔案的過程變慢，效率很低