HTML 旁边的标签：可以用于表单错误消息吗？

Posted 2023-02-24

【中文标题】HTML 旁边的标签：可以用于表单错误消息吗？

【英文标题】：HTML aside tag: is it OK to use for form error message?

【发布时间】：2012-01-30 00:42:21

【问题描述】：

所以我有一个表单，我会有与每个输入/元素相关联的错误消息。 我想出了<aside> 标签的这种用法，并想知道人们的想法：

    <section class="fieldrow" id="rowJobTitle">

        <label for="txtJobTitle" id="lblJobTitle">
            <span>Job title:</span>
        </label>

        <input type="text" id="txtJobTitle" name="txtJobTitle">

        <aside id="errJobTitle" class="errormessage">
            <span role="alert">Please tell us your job title.</span>
        </aside>

    </section>

然后我将使用 CSS 来显示或隐藏 <aside> 错误，并用一点 JS 来改变这一点。

我知道我可以只使用跨度并完成它，但是跨度标签没有语义价值，我在<aside> 上阅读的所有（简短而模糊的）信息似乎都说没有问题有了这个，但我希望我能得到一些确认，或者以前尝试过这个并找到一个很好的理由不这样做的人。

谢谢，西。

【问题讨论】：

为什么不在输入标签中使用title属性呢？还是数据属性？

【参考方案1】：

所有主流浏览器都支持<aside> 标签。

但是，可能有更优雅的方法可以做到这一点，而<aside> 并不是特别符合您的意思。 From the html5 specs:

aside 元素代表页面的一部分，包括 与旁边的内容相切相关的内容 元素，并且可以被视为与该内容分开。 在印刷版式中，此类部分通常表示为侧边栏。

您的错误与内容并没有真正分开，因此这是一个相当不合适的选择。

你应该看看Twitter Bootstrap是如何处理内联表单错误的。

说了这么多，这是语义，因此本质上是主观的。如果它对您有意义并且有效，为什么不使用它呢？

编辑

阅读 Rob 的链接后，<aside> 看起来比我想象的更不合适。由于<aside> 不是<input> 的子元素，解析器没有理由认为它与<input> 相关。我会避免在这种情况下使用它。

MDN 为此提供了一些用例，而你的不适合：

它们通常包含诸如词汇表定义之类的侧面解释，更多 松散相关的东西，如广告、传记 作者，或在网络应用程序、个人资料信息或相关博客中 链接。

【讨论】：

规格可能已更改，因此我需要查看日期。查看我的答案和链接。

也不相信 Twitter Bootstrap 标记，但您的其余答案都很好。 +1

是的，不确定<label> 是否完全合理，但比<aside> 恕我直言。

谢谢，乔什...我刚刚更新了我的原始帖子以添加一些上下文。

有些文章似乎说<aside> 是相对于一篇文章或整个页面...其他人没有指定这一点，是否有任何地方说<aside> 不能与它是<section> 元素的父元素，W3C HTML5 规范说它应该与文档link 的主要文本流相关，所以我想这可能是一个不好的用途......你还有什么推荐的吗？ Twitter Bootstrap 很好......但我想要一些更语义化的东西......使用 HTML 来布局页面与我想要实现的目标相反。 :)

【参考方案2】：

IE 8 和更早版本不支持<aside> 元素。这意味着您在其上设置的任何样式都会在这些浏览器中丢失。您可以通过使用向他们“教授”元素的 javascript 代码来部分解决这个问题，但这一切都值得吗？预期收益究竟是多少？

从逻辑上讲，所描述的用途与 HTML5 语义不匹配。那里的描述很模糊，但我认为错误消息在显示和相关时不能被描述为切线；这才是真正的关键内容。它与其他内容没有分离；相反，它表达了关于它的重要信息。

广告可以是<aside> 的候选对象，轶事、历史记录或一般内容也可以是<aside> 的候选对象，这些内容不一定以任何方式但与主要内容有某种联系。

我没有看到任何证据表明任何软件（例如搜索引擎或浏览器或浏览器插件）实际上使用了<aside> 标记。只是猜测可能会做什么。

我认为整体设计存在根本缺陷，使得关于元素语义的问题更加理论化。当 CSS 或 JavaScript 被禁用时会发生什么？是的，用户总是会看到错误消息，即使他根本没有输入输入或输入都是正确的。

假设这是关于在客户端代码中检测到的错误，更好的方法是将错误消息文本保留在 JavaScript 字符串中。当检测到错误时，添加新元素或修改现有元素内容，以提供错误消息；然后在纠正错误后将其清除。 （这里不需要依赖 CSS。）

这样，错误消息可以放在字段之前、右侧或下方。使用哪些元素并不重要（搜索引擎不会看到它，并且几乎不希望浏览器自己对它做任何特别的事情），但<div><strong>...</strong></div> 可能是一个不错的选择。

【讨论】：

好帖子，我现在必须同意，<aside> 不是使用正确的标签，我认为一个普通的旧 <span> 将不得不这样做。 // 回答这个问题：反正我使用的是 shiv，这并不麻烦，而且该应用程序将针对启用 JS 的 IE7+。唯一的收获是聪明、直观和正确地做事。 // 回答后续问题：我将使用服务器端通过 ajax 生成和提供错误以减轻页面加载，并为非 JS 提供后备。但这一切都抛在一边了（呵呵）。 :) 再次感谢。

【参考方案3】：

由于它与文章相关，因此与上下文相关（最重要），这应该是可以接受的。我什至认为它是一个很好的使用旁白。 See this.

编辑： 经过所有讨论，我认为没有合适的语义元素来执行此操作，而最好的使用是通用 div 元素。我们正在努力强制使用 HTML5 元素。