对于表单字段提示/注释来说,语义上最正确的 HTML 元素是什么?

发布于 2024-11-17 08:53:06 字数 169 浏览 2 评论 0原文

标签和字段都很简单;我们有 ,然后是相关的输入字段。但是,对于该字段下的较小信息文本来说,语义上最正确的 HTML 元素是什么?

在此处输入图像描述

The label and the field are easy; we have <label> and then the relevant input field. But what is the most semantically-correct HTML element to use for the smaller informational text that goes under the field?

enter image description here

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

白龙吟 2024-11-24 08:53:06

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

<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 将其插入标记(或使用 input:after { content : "eg " attr(placeholder) } - 由 @Alohci 建议的 CSS )。

I don't know of a specific element or attribute to connect them, but you can do so using the ARIA attribute 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>

But including everything in the label seems good to me either (also gives good styling abilities, as you have a - semantic - container):

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

Or you could even mix the two.

Another approach could be to put the description in the title (or placeholder as suggested by @Alohci) attribute of the input element (semantically this is the one describing it), but in this case you have to insert it to the markup through Javascript (or CSS using input:after { content : "e.g. " attr(placeholder) } - suggested by @Alohci).

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文