html中l(wèi)abel是什么意思啊?
html中l(wèi)abel意思是定義變量或標(biāo)號(hào)的類型,label元素不會(huì)向用戶呈現(xiàn)任何特殊效果。不過,它為鼠標(biāo)用戶改進(jìn)了可用性。如果在label元素內(nèi)點(diǎn)擊文本,就會(huì)觸發(fā)此控件。用戶選擇該標(biāo)簽時(shí),瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。
擴(kuò)展資料:
要將label元素綁定到其它的控件,需將label元素的FOR屬性設(shè)置為與該控件的ID相同。將label元素綁定到控件的NAME屬性毫無(wú)用處。但是,要提交表單,必須為label元素所綁定到的控件指定NAME。
label元素的richtext支持可以在ACCESSKEY屬性所指定的快捷鍵字符兩側(cè)加上U元素。如果你更愿意使用樣式表(CSS)來(lái)應(yīng)用樣式,可以將該字符包含在SPAN中,并設(shè)置樣式為“text-decoration:underline”。
參考資料來(lái)源:
百度百科——LABEL
百度百科——Label控件
HTML標(biāo)簽<label></label>標(biāo)簽有什么作用?
label標(biāo)簽主要是方便鼠標(biāo)點(diǎn)擊使用,增強(qiáng)用戶操作體驗(yàn)。
1、新建html文件,在網(wǎng)頁(yè)中設(shè)置一個(gè)性別選項(xiàng),這時(shí)當(dāng)用戶點(diǎn)擊性別后面的小圓點(diǎn)才能選擇性別,由于小圓點(diǎn)區(qū)域比較小,想準(zhǔn)確點(diǎn)擊比較麻煩,所有用戶體驗(yàn)不好:
2、為兩個(gè)選項(xiàng)分別設(shè)置“id”屬性,男性屬性值為“male”,女性屬性值為“female”:
3、為“男”和“女”文字都添加上“l(fā)abel”標(biāo)簽,標(biāo)簽屬性“for”的屬性值分別為“male”和“female”,這時(shí)用戶點(diǎn)擊“男”和“女”文字時(shí)也會(huì)選中對(duì)應(yīng)的選項(xiàng),提高了用戶體驗(yàn)。除了單選框之外,多選框、文本框等標(biāo)簽也同樣可以用label標(biāo)簽選中:
HTML 表單之label標(biāo)簽介紹
轉(zhuǎn)自: HTML 表單之label標(biāo)簽介紹
label標(biāo)簽介紹
label標(biāo)簽為input元素定義標(biāo)注(標(biāo)記),它不會(huì)向用戶呈現(xiàn)任何特殊效果,和span標(biāo)簽類似。但label標(biāo)簽和span標(biāo)簽最大的區(qū)別就是它為鼠標(biāo)用戶改進(jìn)了可用性,可以關(guān)聯(lián)特定的表單控件。
label標(biāo)簽和特定表單控件關(guān)聯(lián)之后,如果用戶在 label 元素內(nèi)點(diǎn)擊文本,就會(huì)觸發(fā)關(guān)聯(lián)的表單控件。就是說(shuō),當(dāng)用戶選擇該label標(biāo)簽時(shí),瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和label標(biāo)簽相關(guān)的表單控件上。
主要使用場(chǎng)景
label標(biāo)簽常用于與checkbox或radio關(guān)聯(lián),以實(shí)現(xiàn)點(diǎn)擊文字也能選中/取消checkbox或radio。如下圖,點(diǎn)擊文字和點(diǎn)擊前面的單選框效果相同,即加大了控件的可點(diǎn)擊區(qū)域較大,因?yàn)辄c(diǎn)擊標(biāo)簽或控件都將激活控件,這對(duì)于復(fù)選框和單選框特別有用。
label標(biāo)簽和特定表單元素關(guān)聯(lián)方式
label標(biāo)簽的關(guān)聯(lián)方式主要有兩種,顯示關(guān)聯(lián)和隱式關(guān)聯(lián):
顯式關(guān)聯(lián)是通過label標(biāo)簽的for屬性,顯式與另一個(gè)表單控件關(guān)聯(lián)。需要注意的是,for屬性的值必須是與label標(biāo)簽在同一文檔中的可標(biāo)記表單元素的id,注意是id而不是name。如:
效果圖:
隱式關(guān)聯(lián)是直接將表單控件放到label標(biāo)簽內(nèi),這種情況下,label標(biāo)簽只能包含一個(gè)表單元素,包含多個(gè)只對(duì)第一個(gè)有效。如下:
<label>點(diǎn)擊我可以使文本框獲得焦點(diǎn)
<input type='text' name='theinput' id='theinput'>
</label>
效果圖如下,點(diǎn)擊文字便能是文本框獲得焦點(diǎn):
顯示關(guān)聯(lián)和隱式關(guān)聯(lián)的優(yōu)缺點(diǎn):
顯式關(guān)聯(lián)優(yōu)點(diǎn):
可以減少標(biāo)簽嵌套層數(shù)
label標(biāo)簽和表單可以在不同的位置
顯示關(guān)聯(lián)缺點(diǎn):
控件需要定義id屬性
label標(biāo)簽和表單控件不利于作為一個(gè)整體來(lái)控制
隱式關(guān)聯(lián)優(yōu)點(diǎn):
控件無(wú)需定義id
標(biāo)簽和控件方便作為一個(gè)整體控制
隱式關(guān)聯(lián)缺點(diǎn):
增加了標(biāo)簽嵌套層數(shù)
不能將標(biāo)簽和關(guān)聯(lián)控件放到不同的位置
以上是個(gè)人對(duì)兩種方式的看法,使用時(shí)可按需要選擇顯示或隱式。
label標(biāo)簽的瀏覽器支持及可關(guān)聯(lián)的表單元素
所有主流瀏覽器都支持label標(biāo)簽。Safari 2 或更早的版本不支持label標(biāo)簽。
能使用顯示關(guān)聯(lián)的表單元素有:
input type="text" 文本框,點(diǎn)擊標(biāo)簽時(shí)關(guān)聯(lián)的文本框獲得焦點(diǎn)。
input type="checkbox" 復(fù)選框,點(diǎn)擊標(biāo)簽時(shí)選中或取消選中復(fù)選框。
input type="radio" 單選框,點(diǎn)擊標(biāo)簽時(shí)選中單選框。
input type="file" 文件上傳,點(diǎn)擊標(biāo)簽時(shí)打開文件選擇對(duì)話框。
input type="password" 密碼框,點(diǎn)擊標(biāo)簽時(shí)密碼框獲得焦點(diǎn)。
textarea 文本域,點(diǎn)擊標(biāo)簽時(shí)文本域獲得焦點(diǎn)。
lect 下拉框,點(diǎn)擊標(biāo)簽時(shí),下拉框獲得焦點(diǎn),不過并不展開下拉框選項(xiàng)。
label標(biāo)簽的form屬性
form 屬性指定label標(biāo)簽元素所屬的表單。如下,雖然label標(biāo)簽在myform表單外,但仍屬于myform表單。如下:
<form action="http://songguoliang.com/test.html" id="myform">
<input type="radio" name="x" id="male" value="male">
<label for="female">女</label>
<input type="submit" value="提交">
</form>
<label for="male" form="myform">男</label>
效果圖如下,點(diǎn)擊”男”同樣可以選中第一個(gè)單選框
注:
該form屬性已于2016年4月28日從HTML規(guī)范中刪除。但是,腳本仍然可以訪問只讀HTMLLabelElement.form屬性; 它返回標(biāo)簽的關(guān)聯(lián)控件是成員的形式,或者null如果標(biāo)簽未與控件相關(guān)聯(lián)或控件不是表單的一部分。
HTML表單元素之<label>
<label>標(biāo)簽表示用戶界面中某個(gè)元素的說(shuō)明,提高其他表單元素(如<input /><lect>等標(biāo)簽)的可及性。
與input元素進(jìn)行關(guān)聯(lián),點(diǎn)擊label元素==點(diǎn)擊input元素。點(diǎn)擊label元素之后,input元素會(huì)獲取焦點(diǎn)。
index.html
運(yùn)行截圖:
1. 不要在label內(nèi)放置可交互的元素 :如<a>標(biāo)簽、<button>標(biāo)簽、<input type='button'>,如果這樣做,將會(huì)起到反作用。
2. 在<label>標(biāo)簽中不要添加 標(biāo)題元素 : 因?yàn)闃?biāo)題元素通常用于輔助導(dǎo)航,會(huì)干擾輔助技術(shù)。
html中設(shè)置有和沒有的label標(biāo)簽
本篇文章主要的介紹的是關(guān)于HTML中的label標(biāo)簽設(shè)置高度的方法。還有關(guān)于HTML label標(biāo)簽的使用方法介紹。下面就讓我們一起來(lái)看這篇關(guān)于html label標(biāo)簽的文章吧
首先我們先來(lái)看看在html中l(wèi)abel標(biāo)簽設(shè)置高度的方法:
html中標(biāo)簽<label></label> 為表單元素定義文字標(biāo)注,<label>屬于內(nèi)聯(lián)元素,元素前后沒有換行符,并且不可以設(shè)置高度。
若想要設(shè)置高度,需要設(shè)置<label>的display屬性,默認(rèn)屬性是inline,此時(shí)元素會(huì)被顯示為內(nèi)聯(lián)元素,元素沒有換行符,只需要在inline后面加上block,即display:inline-block。此時(shí)<label>改為塊元素,現(xiàn)在就可以修改<label>高度了。
HTML代碼中的label標(biāo)簽的作用是什么?
Label
中有兩個(gè)屬性是非常有用的,一個(gè)是FOR、另外一個(gè)就是ACCESSKEY了。
FOR屬性
功能:表示Label標(biāo)簽要綁定的HTML元素,你點(diǎn)擊這個(gè)標(biāo)簽的時(shí)候,所綁定的元素將獲取焦點(diǎn)。
用法:<Label
FOR="InputBox">姓名</Label><input
ID="InputBox"
type="text">
ACCESSKEY屬性:
功能:表示訪問Label標(biāo)簽所綁定的元素的熱鍵,當(dāng)您按下熱鍵,所綁定的元素將獲取焦點(diǎn)。
用法:<Label
FOR="InputBox"
ACCESSKEY="N">姓名</Label><input
ID="InputBox"
type="text">
局限性:accessKey屬性所設(shè)置的快捷鍵不能與瀏覽器的快捷鍵沖突,否則將優(yōu)先激活瀏覽器的快捷鍵。
注釋
要將
LABEL
綁定到其它的控件,請(qǐng)將
LABEL
元素的
FOR
屬性設(shè)置為與該控件的
ID
相同。將
LABEL
綁定到控件的
NAME
屬性毫無(wú)用處。但是,要提交表單,你必須為
LABEL
元素所綁定到的控件指定
NAME。
有兩種方法給所指定的快捷鍵添加下劃線。LABEL
元素的
rich
text
支持可以在
ACCESSKEY
屬性所指定的快捷鍵字符兩側(cè)加上
U
元素。如果你更愿意使用樣式表(CSS)來(lái)應(yīng)用樣式,可以將該字符包含在
SPAN
中,并設(shè)置樣式為“text-decoration:
underline”。
如果用戶單擊
LABEL,則會(huì)先觸發(fā)
LABEL
上的
onclick
事件,然后觸發(fā)由
htmlFor
屬性所指定的控件上的
onclick
事件。按下
LABEL
設(shè)定的快捷鍵將設(shè)置焦點(diǎn)但并不觸發(fā)
onclick
事件。
標(biāo)簽不允許嵌套。
此元素在
Internet
Explorer
4.0
及以上版本的
HTML
和腳本中可用。
此元素是內(nèi)嵌元素。
此元素需要關(guān)閉標(biāo)簽。
元素示例代碼
下面的例子使用了
LABEL
元素和
ACCESSKEY
屬性設(shè)置文本框的焦點(diǎn)。
This
example
us
the
LABEL
element
and
the
ACCESSKEY
attribute
to
t
focus
on
a
text
box.
Html代碼
1.<LABEL
FOR="oCtrlID"
ACCESSKEY="1">
2.<!--<SPAN
style="text-decoration:underline;">1</SPAN>:
Press
Alt+1
to
t
focus
to
textbox-->
3.</LABEL>
4.<INPUT
TYPE="text"
NAME="TXT1"
VALUE="binding
sample
1"
5.SIZE="20"
TABINDEX="1"
ID="oCtrlID">