1. 程式人生 > >前端 HTML body標簽相關內容 常用標簽 表單標簽 form裏面的 lable標簽介紹

前端 HTML body標簽相關內容 常用標簽 表單標簽 form裏面的 lable標簽介紹

用戶輸入 http img charset view 標簽 tle png mpat

定義:<label> 標簽為 input 元素定義標註(標記)。

label標簽功能:關聯input標簽文本與表達元素,點擊input標簽文本時,如同點擊表單元素一樣。

label標簽是行內標簽,在一行顯示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta 
name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> </head> <body> <div> <form> <!-- label標簽是行內標簽--> <label>用戶名</label> <label>用戶名</label> </
form> </div> </body> </html>

技術分享圖片

for元素 表示與該label相關聯的表單控件元素的id值,<label> 標簽的 for 屬性值應當與相關元素的 id 屬性值相同。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge"
> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> </head> <body> <div> <form> <label for="user">用戶名:</label> <input type="text" id="user" name="username"> </form> </div> </body> </html>

label標簽和input一同使用
    label for 與 id 做關聯
    讓用戶點擊用戶名字段 也可以用戶輸入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- label標簽和input一同使用
    label for 與 id 做關聯
    讓用戶點擊用戶名 也可以用戶輸入
    -->
    <label for="username">用戶名:</label>
    <input id=‘username‘ type="text">
</body>
</html>

技術分享圖片

 

前端 HTML body標簽相關內容 常用標簽 表單標簽 form裏面的 lable標簽介紹