html - 表单字段提示/注释的语义最正确的 HTML 元素是什么？

Question

标签和字段很简单；我们有<label>然后是相关的输入字段。但是，用于字段下方较小的信息文本的语义最正确的 HTML 元素是什么？

Answer 1

我不知道连接它们的特定元素或属性，但您可以使用 ARIA 属性 aria-describedby 来实现:

<label for="firstname">First Name</label>
<input type="text" id="firstname" aria-describedby="firstname-explanation" />
<p id="firstname-explanation">e.g. John</p>

但是在 label 中包含所有内容对我来说似乎也不错(还提供了良好的样式能力，因为您有一个 - 语义 - 容器):

<label>
    <span class="form-item-title">First Name</span>
    <input type="text" id="firstname" />
    <span class="form-item-description">e.g. John</span>
</label>

或者您甚至可以混合使用两者。

另一种方法是将描述放在input元素的title(或@Alohci建议的placeholder)属性中(从语义上讲，这是描述它的那个)，但在这种情况下，您必须通过 Javascript(或 CSS 使用 input:after { content : "e.g. "attr(placeholder) })将其插入到标记中 - 建议通过@Alohci)。