表单字段提示/注释的语义最正确的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>

或者你甚至可以混合两个。

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