前端 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>

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>

 
原文地址:https://www.cnblogs.com/mingerlcm/p/10618620.html