html - 在标签标签内嵌套输入标签
问题描述
标准示例：
<label for="fname">First Name</label>
<input type="text" name="firstname" id="fname" value="">
在这里，我们使用“for”和“id”属性将此标签链接到输入
选择：
<label>First Name
<input type="text" name="fname" value="">
</label>
在这里，我们将输入嵌套在标签内。事实证明，行为与使用 for/ID 属性相同，但击键次数要少得多，至少对我而言，它的结构似乎更直观。鉴于这种情况以及潜在故障点更少并减少依赖性的事实，我觉得这种风格没有被更多采用有点奇怪。
我们有什么理由要使用更常见的风格而不是这种替代风格？我无法检测到任何行为差异或想到任何前者优于后者的用例？
解决方案
这一切都归结为支持。
如今，所有主要浏览器/屏幕阅读器组合对隐式标签（将输入包装在标签中）的支持都非常好。
但是某些语音控制软件包（例如Dragon Natural Speech）没有很好的隐式标签支持，但支持显式标签。
这是主要区别。
如果您能够使用显式标签，那么这样做是因为最大支持始终是一个好目标，但如果可维护性是一个问题，那么请使用隐式标签。
例如，如果您有一个包含 100 个输入的表单，那么维护 ID 可能会很困难，并且可能会导致更严重的可访问性错误（例如重复的 ID 或不正确for的 s）。在那种情况下，我会提倡使用隐式标签。
对于典型的联系表格，明确的标签应该易于维护和偏好。
使用显式for="id"类型关联的最后一个原因是，如果您有一个布局，其中标签需要远离<input>. 但是，如果您发现这是您使用显式标签的原因，那么您很可能还有其他可访问性问题。（对于使用屏幕放大镜等的人来说，标签应该接近相关输入。）