詳細介紹HTML中的label標籤-html教學-PHP中文網

首頁

web前端

html教學

詳細介紹HTML中的label標籤

烟雨青岚

Jun 28, 2020 am 11:42 AM

html label標籤

詳細介紹HTML中的label標籤

label標籤介紹

#label標籤為input元素定義標註(標記)，它不會向使用者呈現任何特殊效果，和span標籤類似。但label標籤和span標籤最大的區別就是它為滑鼠使用者改進了可用性，可以關聯特定的表單控制項。

label標籤和特定表單控制項關聯之後，如果使用者在 label 元素內點擊文本，就會觸發關聯的表單控制項。是說，當使用者選擇該label標籤時，瀏覽器就會自動將焦點轉到和label標籤相關的表單控制項。

主要使用場景

label標籤常用於與checkbox或radio關聯，以實現點擊文字也能選取/取消checkbox或radio。如下圖，點擊文字和點擊前面的單選框效果相同，即加大了控件的可點擊區域較大，因為點擊標籤或控件都將激活控件，這對於復選框和單選框特別有用。
詳細介紹HTML中的label標籤

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>

登入後複製

效果圖：
詳細介紹HTML中的label標籤

隱含關聯

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

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

登入後複製

效果圖如下，點選文字便能是文字方塊取得焦點：
詳細介紹HTML中的label標籤

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

明確關聯優點：

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

顯示關聯缺點：

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

隱含關聯優點：

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

隱含關聯缺點：

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

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

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>

登入後複製

效果圖如下，點選」男」同樣可以選取第一個單選框
詳細介紹HTML中的label標籤