HTML label基本用法和作用效果
阿新 • • 發佈：2018-12-11
<label.../>用於表單元素中定義標籤進行說明,
label並不生成請求引數所以不要給label指定value值
問題來了,普通文字就能作為標籤,為什麼要用label標籤呢?
因為label還有一個額外的效果,點選該標籤瀏覽器會自動把焦點轉移到標籤相關的表單控制元件上
效果如下:
這是label和input,當我們點選label(姓名:)時
焦點自動轉移到input輸入框裡
下邊時該例的程式碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <form action="xxxxxx" > <label>姓名: <input id="name" type="text"></input> </label> </form> </body> </html>
上邊的例子時label顯式關聯input,既然有顯式就有隱式咯
隱式使用for屬性: label元素的for屬性值為關聯表單控制元件的id值
上邊的例子用隱式關聯程式碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <form action="xxxxxx" > <label for="name">姓名:</label> <input id="name" type="text"></input> </form> </body> </html>