<input /> 標簽是我們日常開發中非常常見的替換元素了，但是最近在刷 whattwg 跟 MDN 的時候發現 跟 <input /> 有很多相關的屬性，選擇器都沒怎么用過，所以就開篇文章來整理一下一些比較有趣或者實用的知識點。

本篇文章默認大家已經知道 <input /> 標簽的基本用法，不會做過多的基礎說明~

沒想到，這些選擇器居然跟 input …

到寫文章為止，根據最新的 drafts 指出，一共有3大類，16種跟 input 相關的選擇。其實都挺有用的，善用它們，會讓我們的用戶體驗更加美好。

下面我們來分享一下這3大類選擇器的作用：

第一類：控制系（Input Control States）

第二類：輸出系（Input Value States）

第三類：偵查系（Input Value-checking）

可怕，除了選擇器，居然還跟這些屬性有關系

<input> 除了有很多相關的選擇器，結合不同的type還有不同的屬性可以供使用。他們的作用如下：

實戰

通過上面的三類說明，我們大致了解了 <input /> 標簽的相關信息，但是你們以為我是來列list的嗎？

當然不是，還有實操啊~

純CSS實現表單提交功能

首先我們來看個效果圖

上面的效果就是一個純CSS實現的表單提交功能，這是怎么實現的呢？下面我們直接看源碼，然后一步一步地來分拆（不想看的可以直接CV下面的源碼自己做測試~）

第一步：寫好基礎結構

首先我們來把基礎結構給寫好，代碼如下：

掃一眼，嗯，挺簡單的，都是常用的東西。咦，不對，這個 pattern 是什么東西？

在這里我們重點分享下 pattern 這個屬性，這是一個用來驗證 input[value] 是否合法的屬性，里面的內容就是匹配value的，語法便是正則的語法，例子如下：

<label>

<!--

當前pattern的內容就是驗證input[name="part"]的value的，其規則如同里面的正則一樣，匹配input[name="part"]的value是否是一個數字+3個大寫字母

-->

<input pattern="[0-9][A-Z]{3}" name="part" />

</label>

當然，不同的 input[type] 也會默認帶有相應的 pattern ，例如 input[type="email"] 就是默認匹配了以下規則：

/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/

第二步：重點功能

上面便是核心交互的實現。

首先第一個class就是保證了在兩個輸入框不通過的時候隱藏，就是當輸入框值為空或者不符合驗證規則，則隱藏提交按鈕。

第二個，第三個class則是控制當用戶在輸入框輸入內容時，如果不符合驗證規則，則顯示錯誤信息，否則則隱藏。

第四個class則是用過 placeholder 是否存在來控制錯誤信息的顯隱，如果 placeholder 不顯示，則證明用戶正在輸入，錯誤信息則根據用戶輸入的值來判斷是否顯隱，否則則隱藏。

狀態切換

上面我們有提到一個選擇器 :indeterminate ，這個是用于選擇狀態不確定的表單元素與 <progress> ，玩過掃雷的人都知道，右擊除了可以選擇紅旗，還可以選擇問號，就是選中，但不確定；又跟 promise 的 pending 狀態類型，介于 resolve 與 reject 之間。

多了 :indeterminate 會給我們帶來很多很有趣的體驗。

首先我們來看看它的使用案例。

基礎使用法

先看效果

代碼如下：

這里面其實沒有什么復雜的實現，只是做了個中間態的判斷，就非常輕松的實現了radio的三種狀態切換。

秀到頭皮發麻法

先看效果

（此天秀效果來自于 Ben Szabo 的 codepen，有興趣的可以仔細研究下，我何時才能有大佬這么優秀，嚶嚶嚶~）

輸入框綁定的可選值

先看效果

其實代碼很簡單：

這里原理就是通過 <input list="dates" /> 來綁定需要下拉顯示的數據列表 <datalist id="dates"> 。

那么當我們要實現輸入聯想的時候，也可以通過修改 <datalist id="dates"> 的子元素來實現，而不是再寫一大堆的操作函數來實現。

總結

其實 <input /> 標簽還有很多有趣的功能是可以挖掘的，不同的類型，結合不同的選擇器與屬性，是可以有更多讓人為之驚嘆的體驗的。