label標籤介紹
#label標籤為input元素定義標註(標記)，它不會向使用者呈現任何特殊效果，和span標籤類似。但label標籤和span標籤最大的區別就是它為滑鼠使用者改進了可用性，可以關聯特定的表單控制項。
label標籤和特定表單控制項關聯之後，如果使用者在 label 元素內點擊文本，就會觸發關聯的表單控制項。是說，當使用者選擇該label標籤時，瀏覽器就會自動將焦點轉到和label標籤相關的表單控制項。
主要使用場景
label標籤常用於與checkbox或radio關聯，以實現點擊文字也能選取/取消checkbox或radio。如下圖，點擊文字和點擊前面的單選框效果相同，即加大了控件的可點擊區域較大，因為點擊標籤或控件都將激活控件，這對於復選框和單選框特別有用。 
label標籤和特定表單元素關聯方式
label標籤的關聯方式主要有兩種，顯示關聯和隱含關聯：
方式1：明確關聯
明確關聯是透過label標籤的for屬性，明確與另一個表單控制項關聯。要注意的是，for屬性的值必須是與label標籤在同一文件中的可標記表單元素的id，注意是id而不是name。如：
爱好： <input type='checkbox' name='basket' id='basketball'> <label for="basketball">篮球</label> <input type='checkbox' name='football' id='football'> <label for="football">足球</label>
效果圖： 
隱含關聯
隱含關聯是直接將表單控制項放到label標籤內，這種情況下，label標籤只能包含一個表單元素，包含多個只對第一個有效。如下：
<label>点击我可以使文本框获得焦点 <input type='text' name='theinput' id='theinput'></label>
效果圖如下，點選文字便能是文字方塊取得焦點： 
顯示關聯和隱式關聯的優缺點：
明確關聯優點：
顯示關聯缺點：
隱含關聯優點：
隱含關聯缺點：
以上是個人對兩種方式的看法，使用時可依需求選擇顯示或隱式。
label標籤的瀏覽器支援及可關聯的表單元素
#所有主流瀏覽器都支援label標籤。 Safari 2 或更早的版本不支援label標籤。
能使用顯示關聯的表單元素有：
input type="text" 文字框，點選標籤時關聯的文字方塊以獲得焦點。 input type="checkbox" 複選框，點選標籤時選取或取消選取複選框。 input type="radio" 單選框，點選標籤時選取單選框。 input type="file" 檔案上傳，點擊標籤時開啟檔案選擇對話方塊。 input type="password" 密碼框，點擊標籤時密碼框獲得焦點。 textarea 文字域，點擊標籤時文字域獲得焦點。 select 下拉框，點選標籤時，下拉框獲得焦點，不過不展開下拉框選項。 label標籤的form屬性
form 屬性指定label標籤元素所屬的表單。如下，雖然label標籤在myform表單外，但仍屬於myform表單。如下：
<form action="http://songguoliang.com/test.html" id="myform"> <input type="radio" name="sex" id="male" value="male"> <br> <label for="female">女</label> <input type="submit" value="提交"></form><label for="male" form="myform">男</label>
效果圖如下，點選」男」同樣可以選取第一個單選框
註：
此form屬性已於2016年4月28日從HTML規範中刪除。但是，腳本仍然可以存取只讀HTMLLabelElement.form屬性; 它傳回標籤的關聯控制項是成員的形式，或者null如果標籤未與控制項相關聯或控制項不是表單的一部分。
感謝大家的閱讀，希望大家收益多多。
本文轉自：https://pocket.blog.csdn.net/article/details/72852150
推薦教學： 《HTML教學》
#以上是詳細介紹HTML中的label標籤的詳細內容。更多資訊請關注PHP中文網其他相關文章！
