Web全栈-Label标签 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Label标签</title>
</head>
<body>
<!--
1.默认情况下文字和输入框是没有关联关系的, 也就是说点击文字输入框不会聚焦, 如果想点击文字时让对应的输入框聚焦, 那么就需要让文字和输入框进行绑定

2.要想让输入框和文字绑定在一起, 那么我们可以使用Label标签

3.绑定的格式:
3.1将文字利用label标签包裹起来
3.2给输入框添加一个id属性
3.3在label标签中通过for属性和输入框中的id进行绑定即可
  <label for="account">账号:</label><input type="text" id="account">
-->
<form action="">
    <!-- 现在一点击文字，输入框立马聚焦 -->
    <label for="account">账号:</label><input type="text" id="account"><br>
    <label for="pwd">密码:</label><input type="password" id="pwd"><br>

    <hr>
    <!-- 更简便方式 -->
    <label>
        账号:<input type="text">
    </label><br>
    <hr>

    <!-- 账号和密文输入框绑定，密码和明文输入框绑定 -->
    <label for="def">账号:</label><input type="text" id="abc"><br>
    <label for="abc">密码:</label><input type="password" id="def"><br>
</form>
</body>
</html>
posted @ 2019-10-13 16:08  yindanny  阅读(453)  评论(0)  编辑  收藏  举报