＜label for=“userName“＞中的for 属性妙用

书启秋枫

于 2021-12-25 20:16:19 发布

阅读量2.9k

点赞数 2

分类专栏： Web 文章标签： elementui webview vue.js html5

本文链接：https://blog.csdn.net/qq_45037155/article/details/122147956

版权

Web 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了HTML中<label>标签的for属性如何与input元素配合使用，当用户点击label时能自动将焦点转到相关输入框，提高用户注册等场景的交互便捷性。通过实例展示了如何实现点击文字即聚焦输入框的功能。

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

<label>标签for属性的妙用

一般情况下，label是没有任何特殊效果的，仅作为显示。
label标签的for属性值应当与相关元素的id属性值相同
点击该label时，会自动将焦点转到和标签相关的控件上。
在用户注册的时候，常常用户点击文字就需要将光标聚焦到对应的表单上面，实现如下：

<!-- for="userName"必须和input组件的id="userName"相等 -->
<label for="userName">账号：</label>
<input type="text" name="userName" id="userName" placeholder="请输入账号">

＜label for=“userName“＞中的for 属性妙用

<label>标签for属性的妙用

光标聚焦