首頁 > web前端 > html教學 > HTML label標籤是什麼意思? HTML label標籤作用和屬性的用法實例

HTML label標籤是什麼意思? HTML label標籤作用和屬性的用法實例

寻∝梦
發布: 2018-08-17 13:41:16
原創
22120 人瀏覽過

HTML label標籤是什麼意思? HTML label標籤作用和屬性你知道哪些?本篇文章為大家解釋了HTML label標籤的定義與作用,還有HTML label標籤的兩種屬性詳解(附HTML label標籤for屬性的實例)

HTML label標籤的定義和用法:

label 元素不會向使用者呈現任何特殊效果。不過,它為滑鼠使用者改進了可用性。如果您在 label 元素內點擊文本,就會觸發此控制項。是說,當使用者選擇該標籤時,瀏覽器就會自動將焦點轉到和標籤相關的表單控制項。

註解:"for" 屬性可把 label 綁定到另一個元素。請把 "for" 屬性的值設定為相關元素的 id 屬性的值。

HTML label標籤的作用:

就是一個文字提示標籤,不過在label標籤中加入for屬性可以與對應的選項框進行捆綁,也就是說,在這種情況下你點擊這個文字框就會活的點擊選項框的效果。

範例:

<lable>男</lable>
<input style="checkbox">
登入後複製

就是滑鼠點擊"男"時,自動選擇後邊的文字方塊進行輸入

HTML label標籤的屬性:

HTML label標籤是什麼意思? HTML label標籤作用和屬性的用法實例

其實主要是Label 中有兩個屬性是非常有用的,一個是FOR、另外一個就是ACCESSKEY了。

HTML label標籤中的FOR屬性:

功能:表示Label標籤要綁定的HTML元素,你點選這個標籤的時候,所綁定的元素將會取得焦點。

用法:

#HTML label標籤中的ACCESSKEY屬性:

功能:表示存取Label標籤所綁定的元素的熱鍵,當您按下熱鍵,所綁定的元素將取得焦點。

用法:

#限制:accessKey屬性所設定的快速鍵無法與瀏覽器的快速鍵衝突,否則將優先啟動瀏覽器的快速鍵。

注意:要將 LABEL 綁定到其它的控件,請將 LABEL 元素的 FOR 屬性設為與該控件的 ID 相同。將 LABEL 綁定到控制項的 NAME 屬性毫無用處。但是,要提交表單,你必須為 LABEL 元素所綁定到的控制項指定NAME。

HTML

這有實例:

#有兩個輸入欄位和相關標記的簡單HTML 表單:

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>
登入後複製

HTML

for 屬性規定label 與哪個表單元素綁定。

隱式和明確的聯繫

標記通常以下面兩種方式中的一種來和表單控制項相聯繫:將表單控制項作為標記標籤的內容,這樣的就是隱式形式,或為

例如,在XHTML 中:

明確的聯繫:

<label for="SSN">Social Security Number:</label>
<input type="text" name="SocSecNum" id="SSN" />
登入後複製

隱含的聯繫:

<label>Date of Birth: <input type="text" name="DofB" /></label>
登入後複製

第一個標記是以明確形式將文字"Social Security Number:" 和表單的社會安全號碼的文字輸入控制項("SocSecNum") 連結起來,它的for 屬性的值和控制項的id 一樣,都是SSN。第二個標記("Date of Birth:") 不需要for 屬性,它的相關控制項也不需要id 屬性,它們是透過在

瀏覽器支援:

所有主流瀏覽器都支援 for 屬性。

Safari 2 或更早的版本不支援 for 屬性。

HTML

<label for="value">
登入後複製

HTML

#element_id:label要綁定的元素的id.

【相關推薦】

html textarea是什麼意思?如何取得textarea標籤中的換行符和空格?

HTML5標籤是什麼意思? HTML5標籤的基本用法詳解

以上是HTML label標籤是什麼意思? HTML label標籤作用和屬性的用法實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板