HTML中单独使用无关联input的label标签是否符合规范？

你提交的代码虽然可以在浏览器中正常渲染出预期的视觉效果，但存在不符合HTML语义规范、功能隐患、无障碍适配差三类问题，具体问题和优化方案如下：

• 无关联label的语义错误
  按照HTML规范，<label>标签的作用是关联指定表单控件，实现点击label自动聚焦对应input的交互，同时为屏幕阅读器等辅助设备提供控件描述。你写的首个<label>Name:</label>没有绑定任何input，属于不符合语义的用法，它作为姓名输入组的分组标题，更适合用<span>、<h4>等标签承载，语义更准确。
• 空label冗余问题
  代码中<label for="fname"></label>和<label for="lname"></label>两个标签没有任何文本内容，属于完全冗余的无效代码，既无法实现点击聚焦的交互效果，也不会被辅助设备识别，可直接删除。
• 表单提交值覆盖隐患
  两个输入框的name属性都设置为name，表单提交时后输入的内容会覆盖先输入的内容，导致只能拿到一个姓名字段值，需要分别设置为fname和lname做区分。

<!-- 基础实现：符合语义+无功能隐患 -->
<span>Name:</span>
<br>
<div>
  <input type="text" id="fname" name="fname" placeholder="First">
  <input type="text" id="lname" name="lname" placeholder="Last">
</div>

<!-- 无障碍适配版：兼顾视觉效果与辅助设备识别 -->
<fieldset style="border: none; padding: 0; margin: 0;">
  <legend>Name:</legend>
  <div>
    <label for="fname" style="position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;">名字</label>
    <input type="text" id="fname" name="fname" placeholder="First">
    <label for="lname" style="position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;">姓氏</label>
    <input type="text" id="lname" name="lname" placeholder="Last">
  </div>
</fieldset>

无障碍适配版本中添加的隐藏label仅对屏幕阅读器可见，不会影响你预期的视觉效果，同时符合W3C无障碍规范要求。

内容的提问来源于stack exchange，提问作者Mazen mohammed