Question

我们正在与同事讨论并尝试确定用于表单验证错误消息的HTML元素。

我们其中一个人说我们应该使用span或div，因为它是输入字段的一部分，另一个是说它应该是p元素，因为它是一个文本。

你们有什么想法？

Answer 1

我相信你应该使用<label>直接将错误信息与输入元素相关联。

LABEL元素可用于将信息附加到控件。

和

通过for属性创建多个引用，可以将多个LABEL与同一控件关联。

Answer 2

没有正确的标记用于错误消息。这一切都取决于您想要显示错误的方式和位置。一旦您决定了这些事情，您的选择将会缩小，因为标签属性和限制会有所不同。但是<p>是如何进入的？

Answer 3

扔进罐子里：<ul> - 元素怎么样？如果输入字段的验证失败的原因不止一个，那么您可能希望将多个错误消息附加到该字段。

文件上传字段的示例：

Zend-Framework Error-Decorators例如使用ul - Elements。

但是，如果我必须在div，p和span之间选择，我的选择将是div。最好的风格（例如背景颜色）。

Answer 4

原则上，元素的选择应该由意义决定，而不是由＆＃34;你想要显示的方式和位置决定＆＃34;它（正如@Babiker建议的那样）。这就是整个想法的一种，更不用说选择会对（例如）视觉障碍用户产生的影响（对于他们来说，＃34;你在哪里显示它＆＃34;可能完全丢失）。

看起来很遗憾HTML 5并没有这个元素。也许＆＃39;放弃＆＃39; （http://www.w3.org/TR/html5/sections.html#the-aside-element）会是最接近的吗？该规范将第4.3.5节描述为：

aside元素表示页面的一部分，其中包含与aside元素周围的内容相切的内容，并且可以将其视为与该内容分开。这些部分通常在印刷字体中表示为侧边栏。

该元素可用于印刷效果，如拉引号或侧边栏，广告，导航元素组以及被视为与页面主要内容分开的其他内容。

Answer 5

如果details/summary有更好的支持，我建议如此。

Answer 6

WCAG2.0指南，

1.3.1 Info and Relationships:通过演示传达的信息，结构和关系可以通过编程方式确定或以文本形式提供。

列出足够的技巧。

和

基于这些，我推断错误的唯一合适标签是<em>和<strong>

使用<label>不足以显示标签内容与目标字段之间的关系，但没有传达内容的重要性。

Answer 7

您可以使用

<pre>Error</pre>