容易被忽略的label標籤

# 容易被忽略的label標籤

## 原始作用

`label`標籤是html原生的標籤，其原始的作用參考[這裡](

label 標籤為 input 元素定義標註（標記）。

label 元素不會向使用者呈現任何特殊效果。不過，它為滑鼠使用者改進了可用性。如果您在 label 元素內點選文字，就會觸發此控制項。就是說，當使用者選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控制項上。

label 標籤的 for 屬性應當與相關元素的 id 屬性相同

## 使用者體驗

label在提高使用者體驗的作用是非常大的，參考下面一段**

``` 選項1

選項2選項3

選項4選項5

```渲染在瀏覽器的效果是，一排並列的單選，但是你一定要選到單選的圓圈上，才能把選項點上

假如我們把**改成

``` 選項1

選項2選項3

選項4選項5

```則使用者體驗一下子提高了，因為當你點選文字的時候，對應的單選圓圈就勾上了。當然如果你覺得每個radio都要起個id太麻煩，還可以這樣

``` 選項1

選項2選項3

選項4選項5

```可以在少死很多腦細胞（因為要起id名！）的情況下達到相同的使用者體驗。

## 移動端

在移動裝置上，由於傳統的滑鼠變成手指，點選的精確度差了很多，所以我們有必要提高input獲得焦點的區域。這時候label的作用就非常大了，參考以下**

``` .mobi-input

````提示1`

調整`.mobi-input`的定義，我們可以較為自由地定義input獲得焦點的盒子大小，從而達到上述目的。

## 相容性

在三星的手機上，使用上述**，除了input在獲得焦點時會有很明顯的outline外，還會把label的innertext變成input的placeholder(視覺上是這樣的)。一開始看到這個問題，一般人會這樣解決：

``` .mobi-input

.mobi-input input,.mobi-input input:focus

````提示1`

**然後發現是不能解決的！**

能解決這個問題，檢視其**，原來非常簡單的一句`contenteditable="true"`就能解決了~~~~

``` .mobi-input

````提示1`

然後就可以基於以上基礎去封裝個性化的移動裝置ui控制項了。

20160116補充：label所指向的input，如果display:none的話，在ie8下是無效的