哪个更“语义 HTML”？对于错误消息？

Question

我们正在与一位同事讨论并尝试决定使用哪个 HTML 元素来显示表单验证错误消息。

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

你们觉得怎么样？

Answer 1

我相信您应该使用 直接将错误消息与输入元素关联起来。

引用 W3 ^规范

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

和

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

---

另请参阅错误消息：与 <标签>

Answer 2

WCAG2.0 指南，关于

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

列出足够的技术。

G138：在使用颜色提示时使用语义标记

和

H49：使用语义标记来标记强调或特殊文本

基于这些，我推断唯一适合错误的标签是 和 ;

---

使用 还不够，因为它显示了标签内容和目标字段之间的关系，但没有传达内容的重要性。

Answer 3

原则上，元素的选择应该由含义决定，而不是由“如何以及在哪里显示”它（如 @Babiker 建议）。这就是整个想法，更不用说该选择将对（例如）视力障碍用户产生的影响（对于他们来说，“显示它的位置”可能完全丢失）。

不幸的是，即使 HTML 5 也没有这样的元素。也许是“旁边”（http://www.w3.org/ TR/html5/sections.html#the-aside-element) 是最接近的吗？该规范在第 4.3.5 节中将其描述为：

aside 元素表示页面的一部分，该部分由与side 元素周围的内容相关的内容组成，并且可以被视为与该内容分离。这些部分通常在印刷版式中表示为侧边栏。

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

Answer 4

没有正确的标签可用于错误消息。这完全取决于您想要显示错误的方式和位置。一旦您决定了这些事情，您的选择就会缩小，因为标签属性和限制有所不同。但是

是怎么来的呢？

Answer 5

只是扔进罐子里：

-Elements 怎么样。如果输入字段的验证由于多种原因而失败，那么您可能需要向该字段附加多条错误消息。

文件上传字段示例：

• 您尝试上传的文件格式错误。 （仅允许 png、gif 和 jpg）
• 您尝试上传的文件太大。 （最大 1MB）
• 等等...

例如，Zend-Framework 错误装饰器正在使用 ul-Elements。

但是，如果我必须在 div、p 和 span 之间进行选择，我的选择将是 div。最佳样式（例如背景颜色）。

Answer 6

我在2024年使用的是

tag with some aria atributes. Here is the typical I use inside a form or its fieldset for each control on it:

    <div>
        <input aria-invalid="true" aria-errormessage="MyNumberField-Errors" id="MyNumberField" type="number" value="15" max="10" placeholder="Ammount" />
        <label for="MyNumberField">Ammount</label>
        <ul id="MyNumberField-Errors" role="alert">
            <li>The ammount can not be bigger than 10.</li>
        </ul>
    </div>
    

• 我使用
  因为它可以一次列出不同的错误。
• 我使用 aria-invalid 将控件内容标记为无效。
• 我使用 aria-errormessage 在输入控件中设置包含错误消息的标签的 id（在我的例子中为 ul 标签）。
• 我将 role 与 "alert" 值一起使用，以指示它是由于与错误消息交互而产生的新警报信息。

与问题无关，但也许您可能会问自己为什么我要在 标签之后编写 标签。

这是为了允许我根据 CSS 的 状态为 提供样式，因为不可能访问“上一个” " 通过 css 标记。

通过这种方式，我可以将 "*" 添加到具有所需属性的输入的标签，或者在禁用输入时为标签提供一些特定的样式。

然后， 通过 css 样式直观地显示在 之前，尽管在 html 代码中它位于 之后。

Answer 7

你可以使用

<pre>Error</pre>