Re: [問題] form下的label是做什麼的?

[liaosankai (低溫烘焙)]

※ 引述《hirabbitt (兔子)》之銘言：
: 表單最好用form框起來
: 代表同一個表單
: 不過為什麼預設的form下
: 還有一層label啊?
: 那個是做什麼的
: 應該可以刪掉吧?
: 謝謝
========================================================
主題：label的用途說明
========================================================
label的比較常用目的，是讓使用者可以「點選文字」
來替代「點選checkbox或radio」的動作。

換句話說，使用者不需要將滑鼠移動到checkbox或radio的元素
也能夠執行點選的動作，只要點擊對應的文字，將同時擁有點選
的動作，常見範例畫面如下：


○選項1 ○選項2

假設我們要選取『選項1』在沒有使用label的時候，要將鼠標點
到「○」並按下，才會有點選的動作，在使用label後，只要點了
「選項1」的文字，就會有「●」的選取效果，HTML如下：

<input id="opt_1" name="r1" type="radio" value="v1" />
<label for="opt_1">選項1</label>

<input id="opt_2" name="r1" type="radio" vlaue="v2" />
<label for="opt_2">選項2</label>

從HTML碼中我們可以發現label中的for屬性，就是指對應的input元素的id

另外，如果所對應的東西是別種的html元素的
在不同瀏覽器又有不同的動作，但基本上在設計上，比較少會為
了這些動作去做label的對應，筆者測試了除了radio和checkbox以外
的其它html元素的效果，下列為測試結果記錄：

<input id="el_id" type="text" />
FireFox：會變成全選文字框的內容
     IE：會把焦點移到文字框開頭
 Chrome：會變成全選文字框的內容
-----------------------------------
<input id="el_id" type="button" />

Firefox：會把焦點移到這個button上
     IE：會把焦點移到這個button上
 Chrome：會把焦點移到這個button上(滑鼠移過label即有效果)
-----------------------------------
<textarea id="el_id"></textarea>

Firefox：會把焦點移到文字框的最後一個字元上
     IE：會把焦點移到文字框的開頭
 Chrome：會把焦點移到文字框的開頭
-----------------------------------
<select id="el_id"></select>

Firefox：會把焦點移到這個select上
     IE：會把焦點移到這個select上
 Chrome：會把焦點移到這個select上
-----------------------------------

以上心得，純屬分享
誤謬之處，懇請指點
遺漏之處，煩請補充









--
歡迎來我的網誌看看
@ http://liaosankai.pixnet.net/blog

--
※ 發信站: 批踢踢實業坊(ptt.cc) 
◆ From: 123.240.20.226
推 tomin:實用
推 SMUGEN:感謝分享實驗結果 我以前都不知道這個tag 都用js手工做效果
推 aiyswu:推
推 ThiefFan:是做無障礙才知道label 原來還這麼好用 推
推 coldollsheep:推