網站製作學習誌

記錄學習製作網站的一切

關於 HTML Label 元素無法作用

石頭成老大在我的「終於用 jQuery 做了一個有趣的服務」提到了在 IE 裡 label 元素的 for 屬性是有 bug 的，我研究了一下，把心得分享給大家。

原本我一直以為表單中的 input 元素只要設定 display: none 或是 visibility: hidden 的話，就沒辦法送出；不過 W3C 中在「 17.13.2 Successful controls 」一節中有明確的規範：

Hidden controls and controls that are not rendered because of style sheet settings may still be successful.

也就是說不論是 display:none 或是 visibility: hidden ，只要是利用 CSS 來讓 control 消失的，都還是應該把值送給後端。

我用了以下的程式測試了一下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST</title>
<style type="text/css">
.hide {
visibility: hidden;
}
.none {
display: none;
}
</style>
</head>
<body>
<form action="" method="post">
<label for="type1">Type1</label>
<input type="radio" class="hide" id="type1"
name="type[]" value="1" checked="checked" />
<label for="type2">Type2</label>
<input type="radio" class="none" id="type2"
name="type[]" value="2" />
<input type="submit" value="送出" />
</form>
<a href="<?php echo $_SERVER['PHP_SELF']; ?>">重新整理</a>
<?php var_dump($_POST); ?>
<script type="text/javascript">
window.onload = function () {
var t2 = document.getElementById('type2');
t2.focus();
}
</script>
</body>
</html>

結果發現 Firefox 、 Opera 不論有沒有預設的 checked ，在點選 label 後都會正確送出對應的 radio 欄位值。

而 IE6 、 IE7 事實上也是支援，只是它們僅能送出有預設 checked 的 radio 欄位；如果完全沒有預設 checked 的 radion 欄位時，因為點選 label 仍無法讓 radio 的值改變，因此也無法送出任何 radio 值 (就如石頭成老大所說明的) 。

所以我原先誤認 IE 不會理會 display: none 或是 visibility: hidden 的元素，其實是 label 無法作用；但更正確的來說，則是因為 IE 無法接受把 focus 放在不可見的元素上。

換句話說，我們沒辦法在 IE 上 focus 任何被 display: none 或是 visibility: hidden 的元素；而 label 則是 HTML 用來 focus 對應 input 元素的捷徑，也因此就不會有作用了。

註：所以我在「終於用 jQuery 做了一個有趣的服務」裡的作法就是為了避開這個問題。

最後這是不是 bug 呢？我個人倒覺得像是 IE 開發團隊自己的想法。不過 IE 無視於 W3C 標準也不是第一次了，所以石頭成老大說這是 IE 在 W3C 實作上的 bug 其實也不為過。至於解法，大家可以直接參考石頭成老大的說明，這裡我就不多寫了。

Comments