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標簽示例


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。