label标签

前端神棍

已于 2023-06-07 10:22:49 修改

阅读量3.4k

点赞数 2

文章标签： html

于 2023-06-07 09:35:00 首次发布

本文链接：https://blog.csdn.net/m0_46412825/article/details/131080197

版权

label标签

一、label标签的使用场景及意义

label标签的作用是为鼠标用户改进了可用性，当用户点击【】标签中的文本时，浏览器就会自动将焦点转到和该标签相关联的控件上。通常是写在表单（form）内。

二、属性及用法

1、属性

label有两个属性for和accesskey。

for功能：表示这个Lable是为哪个控件服务的，Label标签要绑定了for指定HTML元素的ID或name属性，你点击这个标签的时候，所绑定的元素将获取焦点，点击label所包裹内容，自动指向for指定的id或name

accesskey则定义了访问这个控件的热键( 所设置的快捷键不能与浏览器的快捷键冲突，否则将优先激活浏览器的快捷键)

2、用法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>label标签</h1>
    <h3>一、for的用法</h3>
    <h4>不使用label的效果</h4>
    <div>
      <span>性别</span>
      <input type="radio" name="sex" value="man" />男
      <input type="radio" name="sex" value="woman" />女
    </div>
    <hr />
    <h4>使用label的效果</h4>
    <div>
      <span>性别</span>
      <!-- 以下两种写法效果一致 -->
      <!-- 使用label直接包裹目标标签，默认for自动绑定该元素 -->
      <label><input type="radio" name="sex" value="man" />男</label>
      <!-- 通过for关联目标元素id -->
      <input type="radio" name="sex" value="woman" id="w" /><label for="w"
        >女</label
      >
    </div>
    <hr />
    <h3>二、accesskey的用法</h3>
    <div>
        <!-- 体验时需要使用alt加accesskey指定的键才可以生效 -->
      <label accesskey="N">身高：<input type="text" /></label>
      <label for="W" accesskey="O">体重：</label><input type="text" id="W" />
    </div>
  </body>
</html>