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

在重點(diǎn)介紹type之前峡继，先總結(jié)一下input標(biāo)簽的屬性：

• type：該屬性是input標(biāo)簽里唯一的必須輸入的屬性冯袍，當(dāng)然，也可以不填碾牌，默認(rèn)為type = "text"康愤。具體它有那些值，我們后面再討論小染。
• required：標(biāo)記一個(gè)字段是否為必須翘瓮。如果一個(gè)字段被標(biāo)記為required = "required"（嚴(yán)格模式下），或者required（寬松模式下）(ps：下面屬性的寫法同理裤翩，就不一一寫出了)资盅，并且這個(gè)字段的值為空，或者填入的值是無效值踊赠，那么這個(gè)表單不能提交呵扛。什么是無效值？看pattern屬性筐带。
• pattern：該屬性包含了一個(gè)JavaScript風(fēng)格的正則表達(dá)式今穿，輸入的內(nèi)容必須完全匹配該正則表達(dá)式，不然就算輸入的內(nèi)容無效伦籍。對正則表達(dá)式不了解蓝晒？可以去看看JavaScript 正則表達(dá)式。
• min max：這兩個(gè)屬性用于日期date時(shí)間time等輸入帖鸦，還有number和range芝薇。顧名思義，它們的作用是限制最大值作儿，最小值洛二。
• step：和max min類似，作用是提供一個(gè)可以上下點(diǎn)的按鈕攻锰，比如當(dāng)前數(shù)字是1晾嘶，你設(shè)置了step = "5"，點(diǎn)一下上的按鈕娶吞，就變成6了垒迂。
• placeholder：該屬性不多說，大家應(yīng)該都很熟悉妒蛇，一般是用來提示用戶輸入的娇斑，當(dāng)用戶真的輸入了文字之后策添，會(huì)被輸入的文字覆蓋。
• readonly：顧名思義毫缆，該屬性會(huì)讓表單空控件不可編輯。這里的不可編輯不是禁用乐导，只是不能編輯文本而已苦丁，比如像單選框radio，復(fù)選框checkbox這種物臂，本來就是不可編輯的旺拉，所以這個(gè)屬性對它們來說毫無意義。
• disabled：該屬性會(huì)禁用一個(gè)表單元素棵磷。這里是禁用蛾狗，完全禁用掉除了<output>之外的所有表單元素。
• maxlength ：該屬性用于限制用戶輸入的最大字?jǐn)?shù)限制仪媒。
• size：已經(jīng)沒什么時(shí)候?qū)嶋H的作用了沉桌，控制大小現(xiàn)在幾乎都是由CSS控制了。
• form：在HTML5中算吩，表單控件已經(jīng)沒有必要嵌套在一個(gè)表單中留凭，新的form屬性可以把表單元素與頁面上的任意的表單關(guān)聯(lián)起來。也可以被嵌套在一個(gè)表單中偎巢，隨著另一個(gè)表單提交蔼夜，代碼如下：

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

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

• autocomplete：顧名思義匠题，自動(dòng)完成，用戶輸入一部分官撼，后面的自動(dòng)補(bǔ)全梧躺。需要瀏覽器保存用戶輸入的內(nèi)容，以便下一次自動(dòng)補(bǔ)全傲绣。
• autofocus：該屬性指的是表示這個(gè)表單控件在頁面載入的時(shí)候自動(dòng)獲得焦點(diǎn)掠哥。

屬性總結(jié)完畢，下面開始介紹type屬性：

• <input type="text">：如果一個(gè)input沒有type屬性秃诵，那么它會(huì)是默認(rèn)type="text"续搀。沒有什么特別的，就是允許輸入文本菠净，簡單明了禁舷。
• <input type="password">：顧名思義彪杉，在用戶輸入密碼的時(shí)候建議使用這個(gè)屬性而非text，使用了這個(gè)屬性牵咙，用戶輸入的文字將會(huì)變成*派近，我們是看不到的，當(dāng)然洁桌，傳給后臺(tái)會(huì)是用戶輸入的文本渴丸。有些手機(jī)端上不會(huì)一開始就是*，而是會(huì)短暫的明文顯示用戶輸入的最后一個(gè)字符另凌，然后才是*谱轨。
• <input type="checkbox">：復(fù)選框，默認(rèn)是小方格吠谢，可以選擇多個(gè)土童。
• <input type="radio">：單選框，默認(rèn)是小圓圈工坊，只能選擇一個(gè)献汗。
• <input type="submit">：通常被認(rèn)為是一個(gè)提交按鈕，當(dāng)點(diǎn)擊此按鈕時(shí)栅组，提交本表單的數(shù)據(jù)雀瓢。
• <input type="file">：這個(gè)輸入類型和其他的不同，其他無非是一些選擇玉掸，或者輸入文本刃麸，而這個(gè)屬性，是為了能讓用戶上傳本地文件司浪。
• <input type="hidden">：顧名思義泊业，該屬性是用來隱藏掉該表單控件。以前一般是用來收集一些數(shù)據(jù)啊易，但是現(xiàn)在沒必要了吁伺，有強(qiáng)大的localStorage等存儲(chǔ)機(jī)制，誰還會(huì)用這個(gè)去存數(shù)據(jù)呢租谈。
• <input type="image">：該屬性接受所有<img>篮奄，將會(huì)像submit一樣提交圖片，如果想上傳圖片割去，照片窟却，不妨使用這個(gè)屬性。
• <input type="reset">：重置按鈕呻逆，點(diǎn)了這個(gè)按鈕夸赫，表單的數(shù)據(jù)全部重置，也就是清空的意思咖城。一般不會(huì)使用茬腿，畢竟用戶辛辛苦苦填了半天呼奢，誤操作，點(diǎn)了重置切平。體驗(yàn)性太差了握础。
• <input type="button">：顧名思義，一個(gè)按鈕揭绑，表單按鈕弓候，和單純的<button>元素相比，沒有<button>使用CSS方便他匪，所以如果你不是想用這個(gè)按鈕去重置（reset）或者提交（submit），并且為了和傳統(tǒng)的表單風(fēng)格相比配的話夸研，建議你都使用<button>而不是 <input type="button">邦蜜。

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

• <input type="email">：該屬性外觀上和文本欄相似亥至，用于指定一個(gè)電子郵箱地址悼沈。在web端沒有什么差別，但是在手機(jī)端就不一樣了姐扮，輸入鍵盤會(huì)自動(dòng)的變成有@ 數(shù)字 A-Z .等絮供，與輸入郵箱有關(guān)的字符，用戶體驗(yàn)直線上升茶敏，有木有壤靶？
• <input type="url">：外觀功能和 <input type="email">類似，用于指定一個(gè)web地址惊搏。在手機(jī)端上會(huì)自動(dòng)轉(zhuǎn)換成有類似于.com \等方便用戶輸入web地址的鍵盤贮乳。
• <input type="tel">：用于指定輸入的是電話號(hào)碼。鍵盤就會(huì)變成輸入電話號(hào)碼的鍵盤恬惯。當(dāng)然向拆，也可以自己定義一些格式什么的，比如023-1235····之類的酪耳，需要與pattern屬性連用浓恳。
• <input type="number">：用于指定輸入的是數(shù)字，鍵盤為輸入數(shù)字的鍵盤碗暗。
• <input type="range">：變成一個(gè)滑動(dòng)條颈将，不同的客戶端顯示出默認(rèn)的樣式是不一樣的。用戶可以左右滑動(dòng)讹堤。webkit中可以使用CSS：input[type=range]{=webkit-appearance:slider-vertical}讓滑動(dòng)條豎起來吆鹤。
• <input type="search">：提供一個(gè)搜索欄。如果有文本輸入的話洲守，很多瀏覽器會(huì)在最右邊提供一個(gè)清空搜索欄的小叉疑务，點(diǎn)了就清空該搜索欄沾凄。
• <input type="color">：在瀏覽器支持的情況下，提供一個(gè)拾色器知允，雖然功能沒有PS里面的那么強(qiáng)大撒蟀，不過感覺和window自帶的圖畫功能里面的拾色器差不多。
• <input type="date">：顧名思義温鸽，日期選擇器保屯，可以用來選擇年月日。
• <input type="datetime">：該屬性提供兩個(gè)欄涤垫，一個(gè)年月日姑尺，一個(gè)用于時(shí)分秒。時(shí)區(qū)被設(shè)置成了UTC蝠猬。
• <input type="datetime-local">：和 <input type="datetime">幾乎完全一樣切蟋，只是不是UTC時(shí)間。
• <input type="month">：只包括了年榆芦，月的時(shí)間選擇器柄粹。
• <input type="time">：只包括了時(shí)分秒的時(shí)間選擇器，而且是24小時(shí)制匆绣。
• <input type="week">：該屬性是輸入多少年的多少周驻右，你可以選擇日期，但是返回的是XXXX年XX周崎淳。

23種屬性總結(jié)完畢堪夭。