感謝程夢君童鞋，之前我隻是知道用label是用于展示文字的。有時候用label也僅是用于給文字加樣式，還沒有發現，label的另外一個屬性的妙用。
比如這個表單，我們想必須點選radio控件，才能選中。後來有人覺得麻煩，我們要點文字，也能控制控件選中，怎麼辦呢？我們可能會加js，控制，當我們點選文字，執行函數，在函數裡選中radio。但如果我們發現label還有一個for屬性，我們就會發現我們完全不用這麼麻煩。
<html>
<head>
<title>for屬性測試</title>
</head>
<body>
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="0"/>
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="1"/>
</form>
</body>
</html>
現在，我們隻要點選文字，輸入框就能自動被選中呢？驚奇麼？for後面跟的是控件的id。
當我們發現了這個good屬性，我們就可以簡化另一個功能。
功能如下：自建單選控件，類似
這種。當我們選擇male會有樣式提醒，同時友善于我們取值。
之前的做法：設定兩個label，制作成如圖的樣子，然後再加兩個隐藏的radio控件。當我們點選male的時候，給male所在的label加樣式，同時讓male說對應的radio被選中。
現在的做法：設定兩個label，制作成如圖的樣子，然後再加兩個隐藏的radio控件。當我們點選male的時候，給male所在的label加樣式，同時讓male說對應的radio被選中。
是不是省了一步？代碼如下
<html>
<head>
<title>for屬性測試</title>
<style>
.selected{ background: green; color: white; }
</style>
</head>
<body>
<span style="border: 1px solid #c5c5c5; border-radius: 10px; float: left; overflow: hidden;">
<label for="male" style="float: left; height: 20px; padding: 5px 10px; " class="selected" onclick="changeSex(this)">Male</label>
<label for="female" style="float: left; height: 20px; padding: 5px 10px;" onclick="changeSex(this)">Female</label>
</span>
<input type="radio" name="sex" id="male" value="0" checked/>
<input type="radio" name="sex" id="female" value="1" />
<script>
function changeSex(_this){
_this.parentNode.getElementsByClassName("selected")[0].classList.remove("selected");
_this.classList.add("selected");
}
</script>
</body>
</html>
當我們選中male
。當我們選中female
代碼量更省哦。
參考：http://www.w3school.com.cn/tags/tag_label.asp