HTML中的<label>标签的使用方法，文字与输入框相关联。

最新推荐文章于 2025-04-07 00:04:14 发布

杨宗健

最新推荐文章于 2025-04-07 00:04:14 发布

阅读量8.3k

点赞数 2

分类专栏： HTML新手学习

本文链接：https://blog.csdn.net/Ameir_yang/article/details/60968453

版权

HTML新手学习专栏收录该内容

18 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单中文字与输入框相关联</title>
    <base target="_self">
</head>
<body>
    <form>
        <!--无关联-->
        账号：<input type="text">
        <br>
        密码：<input type="password">
        <br>
        <br>
        <!--一一对应关联-->
        <label for="xxx">账号：</label><input type="text" id="xxx">
        <br>
        <label for="xxxx">密码：</label><input type="password" id="xxxx">
        <br>
        <br>
        <!--交叉对应关联-->
        <label for="xxxxx">账号：</label><input type="text" id="xxxxxx">
        <br>
        <label for="xxxxxx">密码：</label><input type="password" id="xxxxx">
    </form>
</body>
</html>

<!--
<label for="....">.....</label><input type="...." id=".....">
for与id要对应起来，for与那个id相对应，就与那个相关联。

1.<label for="x">账号：</label><input type="text" id="xx">

2.<label for="xx">账号：</label><input type="text" id="xxx">

3.<label for="xxx">账号：</label><input type="text" id="x">

4.<label for="xxxx">账号：</label><input type="text" id="xxxx">

1的文字与3的输入框相关联。
2的文字与1的输入框相关联。
3的文字与2的输入框相关联。
4的文字与4的输入框相关联。-->