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標簽和表單可以在不同的位置

顯示關聯缺點：

控件需要定義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>

效果圖如下，點擊”男”同樣可以選中第一個單選框

注：
該form屬性已于2016年4月28日從HTML規范中刪除。但是，腳本仍然可以訪問只讀HTMLLabelElement.form屬性; 它返回標簽的關聯控件是成員的形式，或者null如果標簽未與控件相關聯或控件不是表單的一部分。

總結

以上是生活随笔為你收集整理的HTML label标签介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。