html form <label>標簽基礎語法結構與使用案例教程
在表單布局中會遇到label標簽的使用,label沒有任何樣式效果,有觸發對應表單控件功能。
比如我們點擊單選按鈕或多選框前文字對應選項就能被選中,這個就是對文字加了<label>標簽實現。
一、點擊文字,對應選擇上控件 - TOP
點擊<label>標簽文字時,實現對應控件被選擇,需要對應表單控件id的值與label標簽內的for值相同。
二、label語法 - TOP
<label for="man">男</label>
Label標簽內文字更加需要填寫
Label標簽內for屬性的值為自定義,一般與想實現點擊會觸發控件對象的ID對應相同。
三、label案例 - TOP
HTML代碼片段如下:
- <form action="" method="get">
- 性別:<br />
- <input name="sex" id="man" type="radio" value="" />
- <label for="man">男</label>
- <input name="sex" id="woman" type="radio" value="" />
- <label for="woman">女</label>
- </form>
注意查看,input標簽內id的值與label標簽內for的值對應。
html label標簽用法案例截圖
label用法案例:查看案例
總結:
一般要實現點擊單選按鈕框文字或多選按鈕框文字對應選擇按鈕被選擇,使用label標簽即可,注意for與id值相同即可實現。Label標簽默認情況下是沒有任何樣式,可以使用CSS設置css寬度、css高度、css邊框等樣式。
擴展知識:
1、html checkbox多選框
如需轉載,請注明文章出處和來源網址:http://www.yfzzdoors.com/html/h489.shtml