html中label標籤的詳細介紹

2021-01-08 國哥筆記

歡迎關注支持,謝謝!本篇將介紹的是html中的<label>標籤的用法,由興趣的朋友可以了解一下!

在網頁開發中,表單是經常用到的,而今天要介紹的這個標籤也是經常出現在表單中的,即<label>標籤,我們一起來看看它有什麼用途吧!

「label」作為英文單詞有「標記」的意思,那它作為html中的標籤又有什麼意思呢?下面我們就一起來看看吧!

一、<label>標籤定義及用法

在html中,<label>標籤通常和<input>標籤一起使用,<label>標籤為input元素定義標註(標記)。

<label>標籤的作用是為滑鼠用戶改進了可用性,當用戶點擊<label>標籤中的文本時,瀏覽器就會自動將焦點轉到和該標籤相關聯的控制項上;

<label>標籤在單選按鈕和複選按鈕上經常被使用,使用該標籤後,你點擊單選按鈕或複選按鈕的文本也是可以選中的。

二、<label>標籤語法格式

<label for="關聯控制項的id" form="所屬表單id列表">文本內容</label>

說明:

關聯控制項的id一般指的是input元素的id;在html5中還新增了一個屬性form,form屬性是用來規定所屬的一個或多個表單的 id 列表,以空格隔開;當<label>標籤不在表單標籤<form>中時,就需要使用form屬性來指定所屬表單;三、實例

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>html中label標籤的詳細介紹</title></head><body bgcolor="bisque"><form action="" id="form1"><input type="checkbox" id="basketball"><label for="basketball">籃球</label><input type="checkbox" id="football"><label for="football">足球</label><input type="checkbox" id="tableTennis"><label for="tableTennis">桌球</label><br><input type="submit" value="提交"/></form><label for="football" form="form1">足球</label></body></html>

運行結果:

label標籤示例

好了,關於html中<label>標籤的介紹就到此結束了,希望能幫助大家!

相關焦點

  • html中option標籤(下拉列表選項)的詳細介紹
    本篇將介紹html中option標籤(下拉列表選項)的詳細用法,有興趣的朋友可以了解一下!在網頁中,下拉列表是一種很常見的顯示效果,你知道在html原始碼中是怎樣實現的嗎?今天小編要介紹的就是跟下拉列表有關的一個標籤,即option標籤。「option」作為英文單詞有「選項」的意思,那它作為html中的標籤又有什麼意思呢?
  • html中form表單標籤的詳細介紹
    本篇將介紹的是html中form表單標籤的用法,有興趣的朋友可以學習一下!在html中,表單是經常用到的,用來與用戶交互並提交數據。今天要介紹的就是表單標籤form標籤,接下來我們就一起來看看它的用法吧!「form」作為英文單詞有「表格」的意思,那它在html中作為標籤又充當什麼樣的角色呢!我們一起來看看吧!
  • html中html標籤的詳細介紹
    本篇將介紹html中html標籤的詳細用法,有興趣的朋友可以了解一下!今天小編介紹的是html中的html標籤,該標籤相信大家都不陌生吧!在每個html網頁中,都有html標籤的存在。html標籤到底是用來做什麼的呢?我們一起來看看吧!一、html標籤定義及用法在html中,html標籤是使用來定義一個html文檔,即告知瀏覽器這是一個html文檔。
  • html中rt標籤的詳細介紹
    本篇將介紹html中rt標籤的詳細用法,有興趣的朋友可以了解一下!在html5版本中,新增了很多標籤,今天小編要介紹的就是其中一個,即rt標籤。rt標籤是ruby標籤的子標籤,用來定義字符的解釋或發音「rt」是英文單詞「ruby」和「text」的首字母組合,那它在html中作為標籤是用來做什麼的呢?接下來我們一起來看看html中rt標籤的定義及用法吧!
  • html中span標籤的詳細介紹
    本篇將介紹html中span標籤的詳細用法,有興趣的朋友可以了解一下!「span」作為英文單詞有「範圍」的意思,那它作為html中的標籤又充當什麼樣的角色呢?接下來我們一起來看看html中span標籤的定義及用法吧!一、span標籤的定義及用法在html中,span標籤是使用來組合文檔中的行內元素,以便使用樣式來對它們進行格式化。
  • html中section標籤的詳細介紹
    本篇將介紹html中section標籤的詳細用法,有興趣的朋友可以了解一下!一、前言在html5版本中,新增了很多語義標籤,常見的有:article標籤、header標籤、footer標籤、nav標籤、aside標籤和section標籤等。今天小編要介紹的就是其中一個,即section標籤。
  • html中output標籤詳細介紹
    本篇將介紹html中output標籤詳細的用法,感興趣的朋友可以了解一下!在html版本中,新增了很多新標籤,今天小編要介紹的就是其中一個,即output標籤。output標籤雖然不常用,但是作為html5中新增的標籤,肯定有它的用武之地了,接下來跟著小編一起來學習output標籤吧!
  • html中legend標籤的詳細介紹
    本篇將介紹的是html中<legend>標籤的用法,感興趣的朋友可以了解一下!在html中,<legend>標籤並不常見,我從來沒有使用過,今天只是了解一下,可能以後會使用到。接下來就簡單的了解一下它到底是用來做什麼的!「legend」作為英文單詞有「說明」的意思,那它在html中作為標籤又是用來做什麼的呢?我們一起來看看吧!
  • html中script標籤的詳細介紹
    本篇將介紹html中script標籤的詳細用法,有興趣的朋友可以了解一下!一、前言在html中,為了實現動態交互效果,我們經常會嵌入其它腳本語言(如:JavaScript),那腳本語言是怎樣嵌入到html中的呢?今天小編要介紹的這個html標籤就和嵌入腳本語言息息相關,我們一起來看看吧!
  • html中標籤的詳細介紹
    今天要分享的是html中很簡單的一個標籤,即<b>標籤,感興趣的朋友可以看一下!在html中,有很多樣式標籤,就是使用了該標籤後的內容會有不同樣式。今天將介紹的就是其中一個,也是比較簡單的一個,它就是<b>標籤。那<b>標籤中的「b」應該是那個英文單詞的縮寫呢?我查閱了一下,應該是「bold」單詞的縮寫,該單詞有「粗體字」的意思。
  • html中param標籤的詳細介紹
    本篇將介紹html中param標籤的詳細用法,有興趣的朋友可以了解一下!「param」作為英文單詞有「參數」的意思,那它作為html中的標籤又有什麼意思呢?接下來我們一起來看看吧!一、param標籤的定義及用法在html中,param標籤是使用來為插入 XHTML 文檔的對象規定run-time設置,通常被使用來為object標籤或者 applet標籤提供參數。param標籤是單標籤(空標籤),沒有元素內容,只有屬性。
  • html中embed標籤的詳細介紹
    本篇將介紹的是html中embed標籤的用法,有興趣的朋友可以學習一下!在html5版本中,新增了很多實用的標籤,今天將介紹的就是其中一個,即embed標籤。embed標籤作為html5版本中新增的一個標籤,我們一起來看看它有什麼用途呢?「embed」作為英文單詞有「嵌入」的意思,那它作為html中的標籤又有什麼意思呢?我們一起來看看吧!
  • html中select標籤(下拉列表)的詳細介紹
    本篇將介紹html中select標籤(下拉列表)的詳細用法,有興趣的朋友可以了解一下!在網頁中,下拉列表很常見,那你知道在html原始碼中是怎麼實現的嗎?今天小編要分享的就是html中實現下拉列表的標籤,即select標籤。
  • html中
    標籤詳細介紹
    今天介紹的是html中<article>標籤的用法,如果有興趣的朋友可以看一下!html文檔內容是由各種標籤組成的,各個標籤都有不同的含義以及用法,如果你能熟練的掌握這些標籤,那麼你的html已經很厲害了。
  • html中標籤的詳細介紹
    本篇將介紹的是html中的<cite>標籤,有興趣的朋友可以學習一下!「cite」作為英文單詞有「引用」的意思,那它作為html中的標籤又有什麼意思呢?接下來我們一起來看一看它在html中有什麼用途!
  • html中
    標籤的詳細介紹
    本篇將介紹的是html中<hr>標籤的用法,有興趣的朋友可以了解一下!在html5版本中升級了一些原有的標籤,使其具有語義化。今天介紹的就是其中一個,即<hr>標籤,我們一起來了解一下該標籤的具體用法吧!
  • html中標籤的詳細介紹
    本篇將介紹的是html中<col>標籤的用法,有興趣的朋友可以學習一下!在網頁中,表格是經常用到的,接下來介紹的這個標籤就和表格有關係,即<col>標籤。該標籤在表格中起到很重要的作用,我們一起來看看吧!「col」是「column」英文單詞的縮寫,有「列」的意思,那「col」在html中作為標籤又有什麼功能呢?我們一起來看看吧!
  • html中按鈕標籤詳細介紹
    本篇將為大家介紹的是html中按鈕標籤<button>的用法,有興趣的朋友可以看看!在html中,<button>標籤也是很常用的,經常用來在頁面中添加按鈕。「button」作為英文單詞就有「按鈕」的意思,接下我們就一起來看看它的具體用法吧!
  • html中標籤的詳細介紹
    本篇給大家介紹的是html中不常見但很強大的一個標籤,即<base>標籤,有興趣的朋友可以了解一下!在html中的<base>標籤我重來沒有用過,在網上聽說它的功能挺強大的,然後就對它進行了研究,果然發現它的功能強大的。所以在這就分享一下,希望不要埋沒了它。"base"作為英文單詞有「基礎」的意思,那它作為html中的標籤又有什麼意思呢?
  • html中
    標籤的詳細介紹
    本篇將介紹的是html中<blockquote>標籤的用法,有興趣的朋友可以一起研究一下!學習html其實就是學習一些標籤的用法,本篇文章將為大家介紹的是html中<blockquote>標籤的定義和用法,以及實例演示,希望對大家有用!「blockquote」作為英文單詞有「塊引用」的意思,那它作為html中的標籤又有什麼意思呢?