定义:<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>