文章/答案/技术大牛

发布

社区首页 >问答首页 >在标签标签内嵌套输入标签

问在标签标签内嵌套输入标签
EN

Stack Overflow用户

提问于 2020-10-16 00:20:18

回答 1查看 237关注 0票数 1

标准示例：

  <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属性相同，但击键次数少得多，而且至少在我看来，它的结构更直观。鉴于这种情况，以及潜在的故障点较少并减少依赖性的事实，我发现这种风格没有被更多地采用是有点奇怪的。

为什么我们想要使用更常见的风格而不是这种替代风格呢？我找不到任何行为差异，也想不出前者优于后者的任何用例？

html

forms

accessibility

回答 1

Stack Overflow用户

发布于 2020-10-16 00:41:11

这一切都归结为支持。

现在，在所有主要的浏览器/屏幕阅读器组合中，对隐式标签(将输入包装在标签中)的支持都很好。

然而，某些语音控制软件包(如龙自然发声)没有良好的implicit label support，但有support for explicit labels。

这是主要的区别。

如果您能够使用显式标签，那么就使用，因为最大限度地支持总是一个很好的目标，但是如果可维护性是一个问题，那么就使用隐式标签。

例如，如果您有一个有100个输入的表单，那么维护if可能会很困难，而且可能会导致更严重的可访问性错误(比如重复的if或不正确的for)。在这种情况下，我主张使用隐式标签。

对于典型的联系人表单，那么明确的标签应该易于维护和偏好。

使用显式for="id"类型关联的最后一个原因是，如果您的布局中需要将标签放置在远离<input>的位置。但是，如果您曾经发现这是您使用显式标签的原因，那么您很可能会遇到其他可访问性问题。(因为标签应该接近使用屏幕放大镜等的人的相关输入)

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64375772

复制

相似问题

问在标签标签内嵌套输入标签
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在标签标签内嵌套输入标签EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在标签标签内嵌套输入标签
EN