轉：label標籤的特殊用法

標籤：style   blog   http   io   color   使用   sp   for   on   

容易被忽略的label標籤原始作用label標籤是HTML原生的標籤，其原始的作用參考這裡    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控制項了。

轉：http://www.cnblogs.com/p2227/p/label_tag.html

 

轉：label標籤的特殊用法