詳細介紹HTML中的label標籤

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=&#39;checkbox&#39; name=&#39;basket&#39; id=&#39;basketball&#39;>   
<label for="basketball">篮球</label>
<input type=&#39;checkbox&#39; name=&#39;football&#39; id=&#39;football&#39;>   
<label for="football">足球</label>

效果圖：

隱含關聯

隱含關聯是直接將表單控制項放到label標籤內，這種情況下，label標籤只能包含一個表單元素，包含多個只對第一個有效。如下：

<label>点击我可以使文本框获得焦点    <input type=&#39;text&#39; name=&#39;theinput&#39; id=&#39;theinput&#39;></label>

效果圖如下，點選文字便能是文字方塊取得焦點：

顯示關聯和隱式關聯的優缺點：

明確關聯優點：

1. 可以減少標籤巢狀層數
2. label標籤和表單可以在不同的位置

顯示關聯缺點：

1. 控制項需要定義id屬性
2. label標籤和表單控制項不利於作為一個整體來控制

隱含關聯優點：

1. 控制項無需定義id
2. 標籤和控制項方便作為一個整體控制

隱含關聯缺點：

1. #增加了標籤嵌套層數
2. 不能將標籤和關聯控制項放到不同的位置

以上是個人對兩種方式的看法，使用時可依需求選擇顯示或隱式。

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中文網其他相關文章！