非常基本的html label標籤應用...

LABEL標籤

過去老實說...我還真的不知道為什麼要用這個標籤來放文字= =...(一整個很弱)
但終於昨天在試作一些選單的點選時...才發覺到他的用處!!
依我實作後的心得，最直白的感覺就是；用label標籤幫你把input點選範圍加大!加大!加大!!當然，這是我發現他目前最好用的點

說真的，配合CSS真的好好用，使用上不止增加了使用體驗，而視覺樣式也能良好的呈現(配合CSS3)，方法也很簡單，以下就實做記錄一下，知道門道的路過神人們就請略過這篇吧~~(目前因為知道用這招而自嗨中)

首先，因為我在製作投票的選項，所以我會需要有；標題、複選框、單選框、選項、送出按鈕...等資訊

準備好html

<div class="vote">
  <h1>為什麼在智慧型手機上網路購物的人很少？你自己不在手機上買東西的原因是什麼？</h1>
  <span>投票至2012/12/31</span>
<ul>
  <li>
    <input type="checkbox" />
　<h2>操作不易，網站沒有專屬手機的介面</h2>
  </li>
  <li>
    <input type="checkbox" />
　<h2>沒有手機</h2>
  </li>
  <li>
    <input type="checkbox" />
　<h2>怕連線中斷</h2>
  </li>
  <li>
    <input type="checkbox" />
　<h2>我只玩遊戲</h2>
  </li>
</ul>
<div><input value="送出" type="button"></div>
</div>

以上是一般已經可以提供基本投票選項項目的html

那麼該優化並加入label標籤?

將html修改成

<div class="vote">
  <h1>為什麼在智慧型手機上網路購物的人很少？你自己不在手機上買東西的原因是什麼？</h1>
  <span>投票至2012/12/31</span>
<ul>
  <li>
    <label for="vote_1">
        <input type="checkbox" id="vote_1"/>
　    <h2>操作不易，網站沒有專屬手機的介面</h2>
    </label>
  </li>
  <li>
    <label for="vote_2">
        <input type="checkbox"  id="vote_2"/>
　    <h2>沒有手機</h2>
    </label>
  </li>
  <li>
    <label for="vote_3">
        <input type="checkbox"  id="vote_3"/>
　    <h2>怕連線中斷</h2>
    </label>
  </li>
  <li>
    <label for="vote_4">
        <input type="checkbox"  id="vote_4"/>
　    <h2>我只玩遊戲</h2>
    </label>
  </li>
</ul>
<div><input value="送出" type="button"></div>
</div>

黃色部分是我們增加的部分，說明一下
label標籤屬性"for" ，此屬性可以針對相對的標籤id名稱做綁定
那麼在label標籤裡面的內容都是可以被點選啟動checkbox的範圍
如果我們再透過CSS設定，將label標籤設定為：

label{
　display:block;
　padding:10px;
}

那麼可點選的範圍又變大了，使用者在點選項目時，就可以不用這麼精準的去對準複選框，只要移入label範圍內，就可以點選了，我們只需要做一點點小小的改變，就能大大增加使用者體驗，這麼好用，不學嘛!?

(搞不好大家早就會了...)