表单字段提示/注释的语义最正确的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(或使用CSS)将它插入到标记中input:after { content : "e.g. " attr(placeholder) } - @Alohci建议.