HTML中label標簽的用法案例

小編給大家分享一下HTML中label標簽的用法案例，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

HTML label標簽的定義和用法：

<label> 標簽為 input 元素定義標注（標記）。

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

<label> 標簽的 for 屬性應當與相關元素的 id 屬性相同。

注釋："for" 屬性可把 label 綁定到另外一個元素。請把 "for" 屬性的值設置為相關元素的 id 屬性的值。

HTML label標簽的作用：

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

例子：

<lable>男</lable>
<input style="checkbox">

就是鼠標點擊"男"時，自動選擇后邊的文本框進行輸入

HTML label標簽的屬性：

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

HTML label標簽中的FOR屬性：

功能：表示Label標簽要綁定的HTML元素，你點擊這個標簽的時候，所綁定的元素將獲取焦點。

用法： <Label FOR="InputBox">姓名</Label><input ID="InputBox" type="text">

HTML label標簽中的ACCESSKEY屬性：

功能：表示訪問Label標簽所綁定的元素的熱鍵，當您按下熱鍵，所綁定的元素將獲取焦點。

用法： <Label FOR="InputBox" ACCESSKEY＝"N">姓名</Label><input ID="InputBox" type="text">

局限性：accessKey屬性所設置的快捷鍵不能與瀏覽器的快捷鍵沖突，否則將優先激活瀏覽器的快捷鍵。

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

HTML <label> 標簽的 for 屬性（附例）：

這有實例：

帶有兩個輸入字段和相關標記的簡單 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<label>標簽的 for 屬性定義和用法：

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

隱式和顯式的聯系

標記通常以下面兩種方式中的一種來和表單控件相聯系：將表單控件作為標記標簽的內容，這樣的就是隱式形式，或者為 <label> 標簽下的 for 屬性命名一個目標表單 id，這樣就是顯式形式。

例如，在 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 屬性，它們是通過在 <label> 標簽中放入 <input> 標簽來隱式地連接起來的。

瀏覽器支持：

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

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

HTML<label>標簽的 for 屬性語法：

<label for="value">

HTML<label>標簽的 for 屬性屬性值：

element_id：label要綁定的元素的id.

看完了這篇文章，相信你對HTML中label標簽的用法案例有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！