在表單布局中會遇到label標簽的使用,其實label沒有任何樣式效果,有觸發對應表單控件功能。比如當我們點擊單選按鈕或多選框前文字對應選項就能被選中,這個就是對文字加了 label 標簽才實現的效果。
一、label標簽怎么用
label標簽為input元素定義標注(標記),它不會向用戶呈現任何特殊效果,和span標簽類似。但label標簽和span標簽最大的區別就是它為鼠標用戶改進了可用性,可以關聯特定的表單控件。
label標簽和特定表單控件關聯之后,如果用戶在 label 元素內點擊文本,就會觸發關聯的表單控件。就是說,當用戶選擇該label標簽時,瀏覽器就會自動將焦點轉到和label標簽相關的表單控件上。點擊 label 標簽文字時,實現對應控件被選擇,需要對應表單控件id的值與label標簽內的for值相同。
二、label語法
label for= man 男 /label
Label標簽內文字更加需要填寫
Label標簽內for屬性的值為自定義,一般與想實現點擊會觸發控件對象的ID對應相同。
三、label實際運用
HTML代碼片段如下:
form action= method= get 性別: br / input name= sex id= man type= radio html' target='_blank'>value= / label for= man 男 /label input name= sex id= woman type= radio value= / label for= woman 女 /label /form
注:input標簽內id的值與label標簽內for的值對應。
看圖:
總結:一般要實現點擊單選按鈕框文字或多選按鈕框文字對應選擇按鈕被選擇,使用label標簽即可,注意for與id值相同即可實現。Label標簽默認情況下是沒有任何樣式,可以使用CSS設置css寬度、css高度、css邊框等樣式。新手可以多敲代碼多敲嘗試,希望這個教程可以幫助到你。
以上就是深入理解HTML中label的作用和使用方法(附代碼)的詳細內容,html教程
鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。
新聞熱點
疑難解答