容易被忽略的label標簽

# 容易被忽略的label標簽 ## 原始作用 `label`標簽是HTML原生的標簽，其原始的作用參考[這里](http://www.w3school.com.cn/tags/tag_label.asp) label 標簽為 input 元素定義標注（標記）。 label 元素不會向用戶呈現任何特殊效果。不過，它為鼠標用戶改進了可用性。如果您在 label 元素內點擊文本，就會觸發此控件。就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。 label 標簽的 for 屬性應當與相關元素的 id 屬性相同 ## 用戶體驗 label在提高用戶體驗的作用是非常大的，參考下面一段代碼 ``` <input type="radio" name="demo" value="1"/>選項1 <input type="radio" name="demo" value="2"/>選項2 <input type="radio" name="demo" value="3"/>選項3 <input type="radio" name="demo" value="4"/>選項4 <input type="radio" name="demo" value="5"/>選項5 ``` 渲染在瀏覽器的效果是，一排並列的單選，但是你一定要選到單選的圓圈上，才能把選項點上 假如我們把代碼改成 ``` <input type="radio" id="demo1" name="demo" value="1"/><label for="demo1">選項1</label> <input type="radio" id="demo2" name="demo" value="2"/><label for="demo2">選項2</label> <input type="radio" id="demo3" name="demo" value="3"/><label for="demo3">選項3</label> <input type="radio" id="demo4" name="demo" value="4"/><label for="demo4">選項4</label> <input type="radio" id="demo5" name="demo" value="5"/><label for="demo5">選項5</label> ``` 則用戶體驗一下子提高了，因為當你點擊文字的時候，對應的單選圓圈就勾上了。當然如果你覺得每個radio都要起個id太麻煩，還可以這樣 ``` <label><input type="radio" name="demo" value="1"/>選項1</label> <label><input type="radio" name="demo" value="2"/>選項2</label> <label><input type="radio" name="demo" value="3"/>選項3</label> <label><input type="radio" name="demo" value="4"/>選項4</label> <label><input type="radio" name="demo" value="5"/>選項5</label> ``` 可以在少死很多腦細胞（因為要起id名！）的情況下達到相同的用戶體驗。 ## 移動端 在移動設備上，由於傳統的鼠標變成手指，點擊的精確度差了很多，所以我們有必要提高input獲得焦點的區域。這時候label的作用就非常大了，參考以下代碼 ``` .mobi-input{ display: block; width: 300px; height: 30px; } ``` `<label class="mobi-input">提示1<input type="text" name="demo"/></label>` 調整`.mobi-input`的定義，我們可以較為自由地定義input獲得焦點的盒子大小，從而達到上述目的。 ## 兼容性 在三星的手機上，使用上述代碼，除了input在獲得焦點時會有很明顯的outline外，還會把label的innerText變成input的placeholder(視覺上是這樣的)。一開始看到這個問題，一般人會這樣解決： ``` .mobi-input{ display: block; width: 300px; height: 30px; } .mobi-input input,.mobi-input input:focus{ outline:none; } ``` `<label class="mobi-input">提示1<input type="text" name="demo" placeholder=""/></label>` **然后發現是不能解決的！** 於是我在網上找一些現成的UI框架，然后用手機上，兼容性好的參考其源代碼，終於找到一款UI： http://joapp.com/live/samples/kitchensink/index.html 能解決這個問題，查看其代碼，原來非常簡單的一句`contenteditable="true"`就能解決了~~~~ ``` .mobi-input{ display: block; width: 300px; height: 30px; } ``` `<label class="mobi-input">提示1<input type="text" name="demo" contenteditable="true"/></label>` 然后就可以基於以上基礎去封裝個性化的移動設備UI控件了。 20160116補充：label所指向的input，如果display:none的話，在IE8下是無效的