資訊專(zhuān)欄INFORMATION COLUMN
摘要：屬性在標(biāo)簽中，屬性可指定顯示不同的表單控件，每個(gè)控件都有不同的目的和收集特定類(lèi)型的數(shù)據(jù)。傳統(tǒng)做法是使用框架如，而推出了標(biāo)簽的新值屬性。目前幾乎所有的應(yīng)用程序的表單都涉及到日期選擇器，如預(yù)約醫(yī)生航班等，雖然可能是不同的形式。
雖只是一個(gè)看似簡(jiǎn)單的 HTML 表單元素，但它這么一個(gè)單一的元素，就有多達(dá) 30 多個(gè)屬性（attribute），相信無(wú)論你是個(gè)小菜鳥(niǎo)還是像我一樣寫(xiě)了 15 年 HTML 的老手，知道這點(diǎn)的時(shí)候還是會(huì)驚訝不已的。而且如果再加上全局屬性那就更多了，例如最重要的 type 屬性有超過(guò)20個(gè)可能的值！可以來(lái)簡(jiǎn)單看看 MDN 文檔。
type 屬性在 input 標(biāo)簽中，type 屬性可指定顯示不同的表單控件，每個(gè)控件都有不同的目的和收集特定類(lèi)型的數(shù)據(jù)。如果想看到所有的輸入元素類(lèi)型，可以查看這里（目前在 Chrome 里表現(xiàn)的最好），可能有一些你不知道的又新又有趣的類(lèi)型。
COLOR許多 Web 應(yīng)用會(huì)用到顏色選擇器，可以讓用戶自定義選擇顏色。傳統(tǒng)做法是使用 JavaScript 框架（如 jQuery），而 W3C 推出了 input 標(biāo)簽的新值屬性 color。下面這段代碼在 Mac OS X chrome 里的表現(xiàn)就如下截圖：
雖然最新版本的 Chrome 和 Firefox 都有自帶的 color picker，但目前瀏覽器對(duì) color 屬性的支持仍然不是很好。不過(guò)你依舊可以通過(guò)設(shè)置顏色的十六進(jìn)制值來(lái)改變默認(rèn)的顏色。
DATE, MONTH, AND WEEK目前幾乎所有的 Web 應(yīng)用程序的表單都涉及到日期選擇器，如預(yù)約醫(yī)生、航班等，雖然可能是不同的形式。而與顏色選擇器類(lèi)似，傳統(tǒng)的日期選擇器控件通常是用 JavaScript 框架完成。
而現(xiàn)在，瀏覽器可以通過(guò)新的 input 類(lèi)型 date、month、week 實(shí)現(xiàn)本地的日期選擇器。下面這張截圖是這三種類(lèi)型的日期選擇器的代碼在 MAC OS X Chrome 上的表現(xiàn)：
不幸的是，目前瀏覽器對(duì)這幾個(gè)日期選擇器的支持并不是特別好：最新版本的 Android 完全支持，Chrome 和 iOS 部分支持（主要是其對(duì)相關(guān)屬性的不支持）。讓瀏覽器對(duì)這幾個(gè)新的本地日期選擇器良好支持還是需要一段時(shí)間的，所以 JavaScript 控件仍是目前最好的解決方案。
TEXT, EMAIL, TEL, URLtext 屬性已經(jīng)有很多年了，現(xiàn)在 email、tel、url 這幾個(gè)新屬性也加入了。普通瀏覽器里，這些新加的類(lèi)型似乎和普通的文本輸入沒(méi)有什么差別，所以問(wèn)題來(lái)了：如果沒(méi)什么不同，為什么還要去用呢？
看看下圖的這個(gè) iOS 鍵盤(pán)：這 4 種不同的輸入類(lèi)型將自動(dòng)使用一個(gè)特定的鍵盤(pán) - email 的鍵盤(pán)有一個(gè)方便的 @ 符號(hào)，tel 使用數(shù)字鍵鍵盤(pán)，而 url 提供快速域名常用的.、/、.com。
這些方法能提升以前在移動(dòng)設(shè)備上讓人感到沮喪的用戶體驗(yàn)，而現(xiàn)在的瀏覽器都已經(jīng)完全支持了這些屬性。
RANGE在某些特定情況下，當(dāng)數(shù)據(jù)精確度要求并不是很高的時(shí)候，可以讓用戶在某些值中選擇即可。比如在一個(gè)照片編輯應(yīng)用里讓用戶來(lái)控制圖像的亮度或飽和度，這個(gè)時(shí)候使用文本輸入絕對(duì)是一個(gè)糟糕的做法：會(huì)讓用戶不知該如何選擇，而且程序員還要進(jìn)行數(shù)值檢測(cè)來(lái)確保數(shù)值在合適的范圍內(nèi)。這是不但加大了程序員的工作量，還會(huì)導(dǎo)致不好的用戶體驗(yàn)。
這時(shí)候就該 range 上場(chǎng)了，使用一個(gè)滑塊控件可以讓用戶在給定的最小值和最大值范圍內(nèi)進(jìn)行特定選擇。下面這段代碼在 MAC OS X Chrome 上的效果截圖：
目前瀏覽器對(duì)范圍滑塊的支持還是相當(dāng)不錯(cuò)的，iOS、Android（之前提到的演示頁(yè)面可能會(huì)有問(wèn)題）平臺(tái)上都是完美支持，IE10 +、Firefox、Safari 以及 Chrome 也沒(méi)有問(wèn)題。所以，下次如果需要一個(gè)滑塊，可以嘗試使用 input 的 range 類(lèi)型來(lái)替換傳統(tǒng)的 JavaScript 解決方案。
TIME和 date 類(lèi)型類(lèi)似，time 也可以給你一個(gè)輸入時(shí)間的界面，下面是這段代碼在 MAC OS X Chrome 上的效果截圖：
不過(guò)，和其它的 date 類(lèi)型一樣，time 目前也沒(méi)有很好的瀏覽器支持。如果你需要一個(gè)實(shí)用的跨瀏覽器解決方案，多個(gè)文本輸入或基于 JavaScript 的解決方案現(xiàn)在來(lái)看還是最佳的。
其他資源正如引言中提到的，這只是 input 的一小部分類(lèi)型舉例，其他一些有趣的屬性如 required pattern list readonly 等，如果還想繼續(xù)學(xué)習(xí)，下面這些資源或許能幫到你：
Learn about and other HTML elements on Treehouse
View the demo page with every input type
W3C documentation for
MDN documentation for
Cross browser support for types on caniuse.com
原文 How to Use the Input Element
SegmentFault 編譯
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/49549.html
摘要：歡迎來(lái)我的博客閱讀打造高效個(gè)性一之打造高效個(gè)性二之如果說(shuō)塑造了一個(gè)婀娜多姿顏值高的貌美姑娘，那么就是給她塑造了一個(gè)柔情俠骨百事通的女漢子之心。一款增加了一些在上實(shí)用的命令插件。 歡迎來(lái)我的博客閱讀：「打造高效個(gè)性Terminal（一）之 iTerm」「打造高效個(gè)性Terminal（二）之 zsh」 oh-my-zsh 如果說(shuō)iTerm塑造了一個(gè)婀娜多姿顏值高的貌美姑娘，那么zsh就是給...
摘要：人生，遠(yuǎn)不止是錢(qián)。如何管理，一個(gè)更復(fù)雜的人生人生，就是一個(gè)大型應(yīng)用。把復(fù)雜的人間，拆解成了行動(dòng)與目標(biāo)。所以，，以及和兩個(gè)函數(shù)，就構(gòu)成了的邏輯?，F(xiàn)在，你不僅完全理解了的設(shè)計(jì)哲學(xué)，你更懂得了如何管理人生。 Veux的哲學(xué)，實(shí)質(zhì)上是人生的哲學(xué)。 看一看這張圖。 showImg(https://segmentfault.com/img/remote/1460000018782816?w=424...
摘要：解決瀏覽器保存密碼自動(dòng)填充問(wèn)題問(wèn)題描述話說(shuō)有一天，我如往常一樣打開(kāi)我的開(kāi)發(fā)網(wǎng)站進(jìn)行登錄操作。后來(lái)發(fā)現(xiàn)是瀏覽器存在自動(dòng)填充機(jī)制的問(wèn)題。 解決瀏覽器保存密碼自動(dòng)填充問(wèn)題 問(wèn)題描述 話說(shuō)有一天，我如往常一樣打開(kāi)我的開(kāi)發(fā)網(wǎng)站進(jìn)行登錄操作。瀏覽器很平常的在我們進(jìn)行登錄操作之后詢問(wèn)我是否需要記住密碼，懶惰如我點(diǎn)擊了記住密碼。一切都很正常的進(jìn)行著，沒(méi)有什么異常發(fā)生。然而，問(wèn)題就出現(xiàn)了。當(dāng)我打開(kāi)一個(gè)新...
相關(guān)內(nèi)容：什么是css選擇器標(biāo)簽選擇器類(lèi)選擇器id選擇器并集選擇器（分組選擇器）交集選擇器后代選擇器子標(biāo)簽選擇器屬性選擇器相鄰兄弟選擇器偽類(lèi)選擇器偽元素選擇器（偽對(duì)象選擇器）首發(fā)時(shí)間：2018-03-02 修改：2018-04-30：修改了排版，增加了偽類(lèi)選擇器，偽元素選擇器，在原本簡(jiǎn)略的介紹的基礎(chǔ)上增加了描述并修改了某些術(shù)語(yǔ)描述。2018-05-05：修改了部分偽類(lèi)選擇器的注解，由于之前發(fā)生了小...
閱讀 2447·2021-11-15 11:36
閱讀 1189·2019-08-30 15:56
閱讀 2252·2019-08-30 15:53
閱讀 1051·2019-08-30 15:44
閱讀 663·2019-08-30 14:13
閱讀 1005·2019-08-30 10:58
閱讀 486·2019-08-29 15:35
閱讀 1307·2019-08-29 13:58
