前端 HTML body标签相关内容 常用标签 表单标签 form里面的 label标签介绍

时间:2023-03-08 18:55:19
前端 HTML body标签相关内容 常用标签 表单标签 form里面的 label标签介绍

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

前端 HTML body标签相关内容 常用标签 表单标签 form里面的 label标签介绍

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里面的 label标签介绍