html5的input型別和所有屬性詳解
阿新 • • 發佈：2019-01-05
- <input type="text">：如果一個input沒有type屬性，那麼它會是預設type="text"。沒有什麼特別的，就是允許輸入文字，簡單明瞭。
- <input type="password">：顧名思義，在使用者輸入密碼的時候建議使用這個屬性而非text，使用了這個屬性，使用者輸入的文字將會變成*，我們是看不到的，當然，傳給後臺會是使用者輸入的文字。有些手機端上不會一開始就是*，而是會短暫的明文顯示使用者輸入的最後一個字元，然後才是*。
- <input type="checkbox">：複選框，預設是小方格，可以選擇多個。
- <input type="radio">：單選框，預設是小圓圈，只能選擇一個。
- <input type="submit">：通常被認為是一個提交按鈕，當點選此按鈕時，提交本表單的資料。
- <input type="file">：這個輸入型別和其他的不同，其他無非是一些選擇，或者輸入文字，而這個屬性，是為了能讓使用者上傳本地檔案。
- <input type="hidden">：顧名思義，該屬性是用來隱藏掉該表單控制元件。以前一般是用來收集一些資料，但是現在沒必要了，有強大的localStorage等儲存機制，誰還會用這個去存資料呢。
- <input type="image">：該屬性接受所有<img>，將會像submit一樣提交圖片，如果想上傳圖片，照片，不妨使用這個屬性。
- <input type="reset">：重置按鈕，點了這個按鈕，表單的資料全部重置，也就是清空的意思。一般不會使用，畢竟使用者辛辛苦苦填了半天，誤操作，點了重置。體驗性太差了。
- <input type="button">：顧名思義，一個按鈕，表單按鈕，和單純的<button>元素相比，沒有<button>使用CSS方便，所以如果你不是想用這個按鈕去重置（reset）或者提交（submit），並且為了和傳統的表單風格相比配的話，建議你都使用<button>而不是 <input type="button">。
- 以上的都是HTML5以前都有的屬性，下面是新增的（跟鍵盤有關的都是要配合手機端使用才有效果）：
- <input type="email">：該屬性外觀上和文字欄相似，用於指定一個電子郵箱地址。在web端沒有什麼差別，但是在手機端就不一樣了，輸入鍵盤會自動的變成有@ 數字 A-Z .等，與輸入郵箱有關的字元，使用者體驗直線上升，有木有？
- <input type="url">：外觀功能和 <input type="email">類似，用於指定一個web地址。在手機端上會自動轉換成有類似於.com \等方便使用者輸入web地址的鍵盤。
- <input type="tel">：用於指定輸入的是電話號碼。鍵盤就會變成輸入電話號碼的鍵盤。當然，也可以自己定義一些格式什麼的，比如023-1235····之類的，需要與pattern屬性連用。
- <input type="number">：用於指定輸入的是數字，鍵盤為輸入數字的鍵盤。
- <input type="range">：變成一個滑動條，不同的客戶端顯示出預設的樣式是不一樣的。使用者可以左右滑動。webkit中可以使用CSS：input[type=range]{=webkit-appearance:slider-vertical}讓滑動條豎起來。
- <input type="search">：提供一個搜尋欄。如果有文字輸入的話，很多瀏覽器會在最右邊提供一個清空搜尋欄的小叉，點了就清空該搜尋欄。
- <input type="color">：在瀏覽器支援的情況下，提供一個拾色器，雖然功能沒有PS裡面的那麼強大，不過感覺和window自帶的圖畫功能裡面的拾色器差不多。
- <input type="date">：顧名思義，日期選擇器，可以用來選擇年月日。
- <input type="datetime">：該屬性提供兩個欄，一個年月日，一個用於時分秒。時區被設定成了UTC。
- <input type="datetime-local">：和 <input type="datetime">幾乎完全一樣，只是不是UTC時間。
- <input type="month">：只包括了年，月的時間選擇器。
- <input type="time">：只包括了時分秒的時間選擇器，而且是24小時制。
- <input type="week">：該屬性是輸入多少年的多少周，你可以選擇日期，但是返回的是XXXX年XX周。