HTML label 标签的作用和应用场景

label 标签

作用和语法

label 标签来定义表单控制间的关系，当用户点击该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

    <label for="Name">Number:</label> 
    <input type=“text“ name="Name" id="Name"/>
1
2

应用场景

系统个人中心需要上传头像，有上传 input 元素，除此以外还有【重新上传】功能，当【重新上传】功能与上传输入框布局不在一起时，可以将【重新上传】用 label 元素实现，当点击该 label 元素时，实际选中上传输入框。

源码

<el-dialog>
  <template #header>
    <span class="title-text">修改头像</span>
  </template>

  <div class="content">
    ...
    <input
      id="upload"
      type="file"
      accept=".jpg,.png,.jpeg"
    />
  </div>
  <template #footer>
    <label for="upload">重新上传</label
  </template>
</el-dialog>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17