使用label标签实现点击文字相应文本框获取焦点

目录

使用label标签实现点击文字相应文本框获取焦点

应用实例

具体用法

label标签的定义：

label标签的作用：

代码示例

简要文字说明：

---

使用label标签实现点击文字相应文本框获取焦点

点击文字，就可以选中单选框或者复选框，亦或者是对应的文本框。

应用实例

在性别的选择上，对于单选框的选择只有很小一块区域，操作起来不是很方便，为了解决这个问题就可以使用label标签。

具体用法

label标签的定义：

<label>用于为输入控件定义文本标签（label）——即显示在输入控件旁边的说明性文字。

label标签的作用：

用<label>元素定义的文本标签，从显示上看与其他文本毫无差异。

不过，它为鼠标用户增强了可用性：当用户点击由<label>元素定义的文本标签时，与该文本标签关联的输入控件将获得焦点。

要为<label>指定关联的输入控件，只需把相关控件的id赋值给<label>标签的for属性即可。

代码示例

<form>
<label for="male">男</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">女</label>
<input type="radio" name="sex" id="female" />
</form>

简要文字说明：

上段代码的最终样式就是：

• 当点击单选框时，能实现选中；
• 当点击文字“男”时，也能实现单选框的选中效果。

label标签对于移动端还是比较好用的一个属性标签，毕竟手机界面本来就小，单单点击单选框实现选中还是对使用者来说不够友好的。