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