input標籤/複選框/單選框點選文字有效果
阿新 • • 發佈：2019-02-11
先來測試一段程式碼，點選文字有效果的會用紅色標註！
<body>
<label><input type="checkbox"/>
<span>滬深A股</span>
</label>
<p>
<label>
<input type="checkbox"/>
滬深A股
</label>
<div>
<input type="checkbox"/>
<label>滬深A股</label>
</div>
<div>
<input id="checkboxId" type="checkbox"/>
<label for="checkboxId">滬深A股</label>
</div>
<div for="checkboxId">
<input id="checkboxId" type="checkbox"/>
滬深A股
</div>
<input id="checkboxId" type="checkbox"/>
<div for="checkboxId">
滬深A股
</div>
<p>
<label>
<input type="button" value="滬深A股"/>
<span>滬深A股</span>
</label>
<p>
<label>
<input type="checkbox"/>
<span>滬深A股</span>
</label>
<p>
<label>
<input type="file"/>
<span>滬深A股</span>
</label>
<p>
<label>
<input type="image"/>
<span>滬深A股</span>
</label>
<p>
<label>
<input type="password"/>
<span>滬深A股</span>
</label>
<p>
<label>
<input type="radio"/>
<span>滬深A股</span>
</label>
<p>
<label>
<input type="reset"/>
<span>滬深A股</span>
</label>
<p>
<label>
<input type="submit"/>
<span>滬深A股</span>
</label>
<p>
<label>
<input type="text"/>
<span>滬深A股</span>
</label>
<p>
<label>
<input type="hidden"/>
<span>滬深A股</span>
</label>
</body>
為什麼要選擇label標籤做例子,請看：http://www.w3school.com.cn/tags/tag_label.asp
<label> 標籤為 input 元素定義標註（標記）。
label 元素不會向用戶呈現任何特殊效果。不過，它為滑鼠使用者改進了可用性。如果您在 label 元素內點選文字，就會觸發此控制元件。就是說，當用戶選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控制元件上。
<label> 標籤的 for 屬性應當與相關元素的 id 屬性相同。
首先來說下1-6為什麼只有1、2、4有效果！
要使label有效果，要麼放在label內，要麼用id告訴label，除了label外我們還用了其他標籤與label的for=”id"顯然沒有效果，這個功能是lablel獨有的。
除了複選框，還有其他的input標籤做實驗，只有hidden隱藏的看不出點選文字有效果外，均點選文字有效果。
（建議使用第一種input，因為節省程式碼，改變文字部分時也不會很麻煩。）
（不要使用第四種，因為要寫兩個事件）
（一、二隻要給input寫事件label就會跟著相應了）
（建議使用第一種input，因為節省程式碼，改變文字部分時也不會很麻煩。）
（不要使用第四種，因為要寫兩個事件）
（一、二隻要給input寫事件label就會跟著相應了）