Web基础(从零开始)——HTML(点击文字就可将光标移动到文本框中) label标签详解

最新推荐文章于 2025-02-09 22:23:03 发布

小白花lll

最新推荐文章于 2025-02-09 22:23:03 发布

阅读量2.3k

点赞数

分类专栏：零基础学Web 文章标签：前端 html

本文链接：https://blog.csdn.net/qq_57633498/article/details/121198779

版权

零基础学Web 专栏收录该内容

33 篇文章

订阅专栏

本文介绍如何使用HTML的<label>标签与input元素实现表单元素的绑定，包括用户名输入框聚焦及性别选择器的点击操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点转到或者选择对应的表单元素上。

在input中添加一个id属性（id="自定义名字"），label中有一个for属性（for="自定义名字"），这两个值必须一致，就可以进行绑定了。

<form>
        <label for="name">用户名</label><input type="text" name="uesrname" id="name"><br>         
        性别：
        <input type="radio" name="sex" id="man" />
        <label for="man">男</label>
        <input type="radio" name="sex" id="woman" />
        <label for="woman">女</label>
</form>

点击用户名（文字）可以将光标移到输入框中，点击男或者女（文字）可以进行选择