将标签元素包裹在图例元素中
我从来没有理由将标签元素放在图例元素中（从未真正考虑过或见过它完成）。 但根据我正在实施的设计，这样做很诱人。
这就是我想做的：
<fieldset>
<legend><label for="formInfo">I would like information on</label></legend>
<select id="formInfo">
<option value="Cats">Cats</option>
<option value="Dogs">Dogs</option>
<option value="Lolz">Lolz</option>
</select>
</fieldset>
它在 Firefox3、Safari、Opera 和 IE6/7 中按预期工作（单击标签聚焦相应的输入）并且通过验证，但我只是想知道是否有任何已知的原因（可访问性？语义？浏览器问题）为什么不应该这样做
I've never had a reason to put a label element inside of a legend element (never really thought about it or seen it done). But with the design I'm implementing, it's tempting to do so.
Here's what I'm tempted to do:
<fieldset>
<legend><label for="formInfo">I would like information on</label></legend>
<select id="formInfo">
<option value="Cats">Cats</option>
<option value="Dogs">Dogs</option>
<option value="Lolz">Lolz</option>
</select>
</fieldset>
It works as expected (clicking the label focuses the corresponding input) in Firefox3, Safari, Opera, and IE6/7 and it passes validation, but I'm just wondering if there are any known reasons (accessibility? semantics? browser issues) why this shouldn't be done
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
你的
在哪里？从语义上讲，
legend描述了fieldset，就像label描述单个字段一样。字段集应该用于将语义相关的字段分组在一起（例如，“地址”字段集可能具有街道、城市和国家/地区的输入字段）。
假设字段集中有多个字段，那么执行您建议的操作在语义上没有意义 - 您需要创建描述字段集的单独图例文本，然后为每个字段创建一个标签。
如果您只有一个字段，那么您根本不需要字段集或图例。
所以，基本上，你不应该做你正在做的事情。
如果您这样做是为了有额外的元素来附加 CSS 规则或 Javascript 事件，那么最好使用不会混淆的通用元素，例如
div和span文本到语音和其他非视觉用户代理。即，放入
div或span在可访问性/语义方面实际上是中立的（它没有暗示任何内容），而不是滥用语义元素（即使只是轻微的，就像这样例），这可能会产生误导。 想象一下文本转语音浏览器中布局的最佳情况场景：文本被朗读两次，一次作为图例，一次作为标签 - 为什么有人会想要短语“I想要向他们大声朗读两遍“关于”的信息吗？ 特别是因为它仅在select控件中的选择上下文中才有意义。Where is your
</fieldset>?Semantically,
legenddescribes afieldset, just aslabeldescribes a single field.Fieldsets are supposed to be used to group together semantically related fields (for instance, an "address" fieldset might have input fields for street, city and country).
Assuming you have more than one field in the fieldset, then doing what you suggest doesn't semantically make sense -- you need to create separate legend text that describes the fieldset, then a label for each field.
If you only have one field, then you don't need fieldset or legend at all.
So, basically, you shouldn't do what you're doing.
If you're doing it to have extra elements to attach CSS rules or Javascript events to, you're better off using generic elements like
divandspanthat won't confuse text-to-speech and other non-visual user agents.i.e., putting in a
divorspanis effectively neutral in terms of accessibility/semantics (it implies nothing) versus misusing a semantic element (even if only slightly, as in this case), which is potentially misleading. Imagine even the best-case scenario for your layout in a text-to-speech browser: The text is read aloud twice, once as legend and once as label -- why would someone want the phrase "I would like information on" read aloud twice to them? Especially as it only makes sense in the context of the choices in theselectcontrol.好吧，label 元素本身看起来不错——它是“formInfo”元素的描述，所以不用担心。 然而，从语义上讲，
legend元素的含义是什么？ 它应该是整个字段集的标题......well, the label element itself seems fine - it's the description of the "formInfo" element, so that's no worries. Semantically, however, what's this saying about the
legendelement? It's supposed to be a caption for the entire fieldset....