html5中input的type類型有哪些（總結）
html5中input的type類型有哪些（總結）
1、總結
一句話總結：時間、顏色、（郵件、電話、url）、（數字、數字範圍）、搜索search
2、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 的文本字段。 |
3、HTML5 input類型總結
一、文字總結
1、文本類javascript
Text，文本html
Url，網絡地址html5
Password，密碼java
Email，郵箱地址web
2、操做類正則表達式
Checkbox ，複選框數組
Radio，單選框瀏覽器
File，上傳文件服務器
Number，數值網絡
Range，百分百滑動條
3、功能類
Button，按鈕
Image，圖片提交按鈕
Submit，文字提交按鈕
Reset，重置表單
4、Date類
Date，年月日控件
Month，年月控件
Week，年周控件
Time，時間控件
Datetime，年月日+時間控件
Datetime-local，本地年月日+時間控件
5、特殊類
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中記錄的數值來進行計算。
二、代碼
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 跨 度：<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
4、input相關總結
1、使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" >
（仍是菜鳥一枚，寫的不對的地方歡迎指正！）
2、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的這個屬性，他會明顯使找並打開文件的過程變慢，效率很低
- 1. form表單中的input有哪些類型及其用途
- 2. Java中的數據類型有哪些？
- 3. Node.js 中有哪些類型的錯誤
- 4. HTML5 新的 Input 類型
- 5. 有關PHP表單中 input type類型的介紹
- 6. 注意注意！ html5新增的input類型大總結
- 7. HTML5讀取input[type=file]中的圖片
- 8. IP有哪些類型？（一）
- 9. LoadRunner中Vuser類型協議有哪些？
- 10. Python中都有哪些數據類型
- 更多相關文章...
- • NoSQL數據庫有哪些？ - NoSQL教程
- • NoSQL數據庫的優勢有哪些？ - NoSQL教程
- • Kotlin學習（二）基本類型
- • 算法總結-雙指針
-
每一个你不满意的现在，都有一个你没有努力的曾经。