什么？HTML5中的input標簽type屬性居然有23種可能的值？！
默默在心里數(shù)一遍，如果有23種，本文就可以不用看了，如果不夠，那就看看吧....

在重點介紹type之前，先總結一下input標簽的屬性：

• type：該屬性是input標簽里唯一的必須輸入的屬性，當然，也可以不填，默認為type = "text"。具體它有那些值，我們后面再討論。
• required：標記一個字段是否為必須。如果一個字段被標記為required = "required"（嚴格模式下），或者required（寬松模式下）(ps：下面屬性的寫法同理，就不一一寫出了)，并且這個字段的值為空，或者填入的值是無效值，那么這個表單不能提交。什么是無效值？看pattern屬性。
• pattern：該屬性包含了一個JavaScript風格的正則表達式，輸入的內(nèi)容必須完全匹配該正則表達式，不然就算輸入的內(nèi)容無效。對正則表達式不了解？可以去看看JavaScript 正則表達式。
• min max：這兩個屬性用于日期date時間time等輸入，還有number和range。顧名思義，它們的作用是限制最大值，最小值。
• step：和max min類似，作用是提供一個可以上下點的按鈕，比如當前數(shù)字是1，你設置了step = "5"，點一下上的按鈕，就變成6了。
• placeholder：該屬性不多說，大家應該都很熟悉，一般是用來提示用戶輸入的，當用戶真的輸入了文字之后，會被輸入的文字覆蓋。
• readonly：顧名思義，該屬性會讓表單空控件不可編輯。這里的不可編輯不是禁用，只是不能編輯文本而已，比如像單選框radio，復選框checkbox這種，本來就是不可編輯的，所以這個屬性對它們來說毫無意義。
• disabled：該屬性會禁用一個表單元素。這里是禁用，完全禁用掉除了<output>之外的所有表單元素。
• maxlength ：該屬性用于限制用戶輸入的最大字數(shù)限制。
• size：已經(jīng)沒什么時候實際的作用了，控制大小現(xiàn)在幾乎都是由CSS控制了。
• form：在HTML5中，表單控件已經(jīng)沒有必要嵌套在一個表單中，新的form屬性可以把表單元素與頁面上的任意的表單關聯(lián)起來。也可以被嵌套在一個表單中，隨著另一個表單提交，代碼如下：

<form id="form1"></form>
<p>
<label for="admin">admin</label>
<input type="text" id="admin" form="form1"/>
</p>

這樣，就把form和input聯(lián)系起來了。如果input沒有form屬性，那么，它將被關聯(lián)到離他最近的form表單。

• autocomplete：顧名思義，自動完成，用戶輸入一部分，后面的自動補全。需要瀏覽器保存用戶輸入的內(nèi)容，以便下一次自動補全。
• autofocus：該屬性指的是表示這個表單控件在頁面載入的時候自動獲得焦點。

屬性總結完畢，下面開始介紹type屬性：

• <input type="text">：如果一個input沒有type屬性，那么它會是默認type="text"。沒有什么特別的，就是允許輸入文本，簡單明了。
• <input type="password">：顧名思義，在用戶輸入密碼的時候建議使用這個屬性而非text，使用了這個屬性，用戶輸入的文字將會變成*，我們是看不到的，當然，傳給后臺會是用戶輸入的文本。有些手機端上不會一開始就是*，而是會短暫的明文顯示用戶輸入的最后一個字符，然后才是*。
• <input type="checkbox">：復選框，默認是小方格，可以選擇多個。
• <input type="radio">：單選框，默認是小圓圈，只能選擇一個。
• <input type="submit">：通常被認為是一個提交按鈕，當點擊此按鈕時，提交本表單的數(shù)據(jù)。
• <input type="file">：這個輸入類型和其他的不同，其他無非是一些選擇，或者輸入文本，而這個屬性，是為了能讓用戶上傳本地文件。
• <input type="hidden">：顧名思義，該屬性是用來隱藏掉該表單控件。以前一般是用來收集一些數(shù)據(jù)，但是現(xiàn)在沒必要了，有強大的localStorage等存儲機制，誰還會用這個去存數(shù)據(jù)呢。
• <input type="image">：該屬性接受所有<img>，將會像submit一樣提交圖片，如果想上傳圖片，照片，不妨使用這個屬性。
• <input type="reset">：重置按鈕，點了這個按鈕，表單的數(shù)據(jù)全部重置，也就是清空的意思。一般不會使用，畢竟用戶辛辛苦苦填了半天，誤操作，點了重置。體驗性太差了。
• <input type="button">：顧名思義，一個按鈕，表單按鈕，和單純的<button>元素相比，沒有<button>使用CSS方便，所以如果你不是想用這個按鈕去重置（reset）或者提交（submit），并且為了和傳統(tǒng)的表單風格相比配的話，建議你都使用<button>而不是 <input type="button">。

以上的都是HTML5以前都有的屬性，下面是新增的：

• <input type="email">：該屬性外觀上和文本欄相似，用于指定一個電子郵箱地址。在web端沒有什么差別，但是在手機端就不一樣了，輸入鍵盤會自動的變成有@ 數(shù)字 A-Z .等，與輸入郵箱有關的字符，用戶體驗直線上升，有木有？
• <input type="url">：外觀功能和 <input type="email">類似，用于指定一個web地址。在手機端上會自動轉換成有類似于.com \等方便用戶輸入web地址的鍵盤。
• <input type="tel">：用于指定輸入的是電話號碼。鍵盤就會變成輸入電話號碼的鍵盤。當然，也可以自己定義一些格式什么的，比如023-1235····之類的，需要與pattern屬性連用。
• <input type="number">：用于指定輸入的是數(shù)字，鍵盤為輸入數(shù)字的鍵盤。
• <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">：該屬性提供兩個欄，一個年月日，一個用于時分秒。時區(qū)被設置成了UTC。
• <input type="datetime-local">：和 <input type="datetime">幾乎完全一樣，只是不是UTC時間。
• <input type="month">：只包括了年，月的時間選擇器。
• <input type="time">：只包括了時分秒的時間選擇器，而且是24小時制。
• <input type="week">：該屬性是輸入多少年的多少周，你可以選擇日期，但是返回的是XXXX年XX周。

23種屬性總結完畢。