label 标签
作用和语法
label 标签来定义表单控制间的关系,当用户点击该标签时,浏览器会自动将焦点转到和标签相关的表单控件上。
<label for="Name">Number:</label>
<input type=“text“ name="Name" id="Name"/>
应用场景
系统个人中心需要上传头像,有上传 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>