国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

小小標簽，強大功能——深藏不露的 <input>

wuaiqiu / 2157人閱讀

摘要：屬性在標簽中，屬性可指定顯示不同的表單控件，每個控件都有不同的目的和收集特定類型的數據。傳統做法是使用框架如，而推出了標簽的新值屬性。目前幾乎所有的應用程序的表單都涉及到日期選擇器，如預約醫生航班等，雖然可能是不同的形式。

雖只是一個看似簡單的 HTML 表單元素，但它這么一個單一的元素，就有多達 30 多個屬性（attribute），相信無論你是個小菜鳥還是像我一樣寫了 15 年 HTML 的老手，知道這點的時候還是會驚訝不已的。而且如果再加上全局屬性那就更多了，例如最重要的 type 屬性有超過20個可能的值！可以來簡單看看 MDN 文檔。

type 屬性

在 input 標簽中，type 屬性可指定顯示不同的表單控件，每個控件都有不同的目的和收集特定類型的數據。如果想看到所有的輸入元素類型，可以查看這里（目前在 Chrome 里表現的最好），可能有一些你不知道的又新又有趣的類型。

COLOR

許多 Web 應用會用到顏色選擇器，可以讓用戶自定義選擇顏色。傳統做法是使用 JavaScript 框架（如 jQuery），而 W3C 推出了 input 標簽的新值屬性 color。下面這段代碼在 Mac OS X chrome 里的表現就如下截圖：

雖然最新版本的 Chrome 和 Firefox 都有自帶的 color picker，但目前瀏覽器對 color 屬性的支持仍然不是很好。不過你依舊可以通過設置顏色的十六進制值來改變默認的顏色。

DATE, MONTH, AND WEEK

目前幾乎所有的 Web 應用程序的表單都涉及到日期選擇器，如預約醫生、航班等，雖然可能是不同的形式。而與顏色選擇器類似，傳統的日期選擇器控件通常是用 JavaScript 框架完成。

而現在，瀏覽器可以通過新的 input 類型 date、month、week 實現本地的日期選擇器。下面這張截圖是這三種類型的日期選擇器的代碼在 MAC OS X Chrome 上的表現：

不幸的是，目前瀏覽器對這幾個日期選擇器的支持并不是特別好：最新版本的 Android 完全支持，Chrome 和 iOS 部分支持（主要是其對相關屬性的不支持）。讓瀏覽器對這幾個新的本地日期選擇器良好支持還是需要一段時間的，所以 JavaScript 控件仍是目前最好的解決方案。

TEXT, EMAIL, TEL, URL

text 屬性已經有很多年了，現在 email、tel、url 這幾個新屬性也加入了。普通瀏覽器里，這些新加的類型似乎和普通的文本輸入沒有什么差別，所以問題來了：如果沒什么不同，為什么還要去用呢？

看看下圖的這個 iOS 鍵盤：這 4 種不同的輸入類型將自動使用一個特定的鍵盤 - email 的鍵盤有一個方便的 @ 符號，tel 使用數字鍵鍵盤，而 url 提供快速域名常用的.、/、.com。

這些方法能提升以前在移動設備上讓人感到沮喪的用戶體驗，而現在的瀏覽器都已經完全支持了這些屬性。

RANGE

在某些特定情況下，當數據精確度要求并不是很高的時候，可以讓用戶在某些值中選擇即可。比如在一個照片編輯應用里讓用戶來控制圖像的亮度或飽和度，這個時候使用文本輸入絕對是一個糟糕的做法：會讓用戶不知該如何選擇，而且程序員還要進行數值檢測來確保數值在合適的范圍內。這是不但加大了程序員的工作量，還會導致不好的用戶體驗。

這時候就該 range 上場了，使用一個滑塊控件可以讓用戶在給定的最小值和最大值范圍內進行特定選擇。下面這段代碼在 MAC OS X Chrome 上的效果截圖：

目前瀏覽器對范圍滑塊的支持還是相當不錯的，iOS、Android（之前提到的演示頁面可能會有問題）平臺上都是完美支持，IE10 +、Firefox、Safari 以及 Chrome 也沒有問題。所以，下次如果需要一個滑塊，可以嘗試使用 input 的 range 類型來替換傳統的 JavaScript 解決方案。

TIME

和 date 類型類似，time 也可以給你一個輸入時間的界面，下面是這段代碼在 MAC OS X Chrome 上的效果截圖：

不過，和其它的 date 類型一樣，time 目前也沒有很好的瀏覽器支持。如果你需要一個實用的跨瀏覽器解決方案，多個文本輸入或基于 JavaScript 的解決方案現在來看還是最佳的。

其他資源

正如引言中提到的，這只是 input 的一小部分類型舉例，其他一些有趣的屬性如 required pattern list readonly 等，如果還想繼續學習，下面這些資源或許能幫到你：

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 編譯

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/49549.html

相關文章

  • 打造高效個性Terminal（二）之 zsh

    摘要：歡迎來我的博客閱讀打造高效個性一之打造高效個性二之如果說塑造了一個婀娜多姿顏值高的貌美姑娘，那么就是給她塑造了一個柔情俠骨百事通的女漢子之心。一款增加了一些在上實用的命令插件。 歡迎來我的博客閱讀：「打造高效個性Terminal（一）之 iTerm」「打造高效個性Terminal（二）之 zsh」 oh-my-zsh 如果說iTerm塑造了一個婀娜多姿顏值高的貌美姑娘，那么zsh就是給...

    ?xiaoxiao, 評論0 收藏0

  • 正確理解Vuex： 懂人生，就懂了Vuex

    摘要：人生，遠不止是錢。如何管理，一個更復雜的人生人生，就是一個大型應用。把復雜的人間，拆解成了行動與目標。所以，，以及和兩個函數，就構成了的邏輯。現在，你不僅完全理解了的設計哲學，你更懂得了如何管理人生。 Veux的哲學，實質上是人生的哲學。 看一看這張圖。 showImg(https://segmentfault.com/img/remote/1460000018782816?w=424...

    URLOS 評論0 收藏0

  • 解決瀏覽器保存密碼自動填充問題

    摘要：解決瀏覽器保存密碼自動填充問題問題描述話說有一天，我如往常一樣打開我的開發網站進行登錄操作。后來發現是瀏覽器存在自動填充機制的問題。 解決瀏覽器保存密碼自動填充問題 問題描述 話說有一天，我如往常一樣打開我的開發網站進行登錄操作。瀏覽器很平常的在我們進行登錄操作之后詢問我是否需要記住密碼，懶惰如我點擊了記住密碼。一切都很正常的進行著，沒有什么異常發生。然而，問題就出現了。當我打開一個新...

    objc94 評論0 收藏0

  • html之css選擇器學習

    相關內容：什么是css選擇器標簽選擇器類選擇器id選擇器并集選擇器（分組選擇器）交集選擇器后代選擇器子標簽選擇器屬性選擇器相鄰兄弟選擇器偽類選擇器偽元素選擇器（偽對象選擇器）首發時間：2018-03-02 修改：2018-04-30：修改了排版，增加了偽類選擇器，偽元素選擇器，在原本簡略的介紹的基礎上增加了描述并修改了某些術語描述。2018-05-05：修改了部分偽類選擇器的注解，由于之前發生了小...

    番茄西紅柿 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<