为什么 W3C 建议将输入元素包装在
中？标签？

发布于 2024-11-27 19:32:16 字数 571 浏览 0 评论 0原文

我在网上看到了很多例子，其中表单的布局如下：

<form>
    <p><input></p>
</form>

令我惊讶的是，这也在规范：

任何表单都以表单元素开头，其中放置控制。大多数控件由输入元素表示，该元素由默认提供单行文本字段。要为控件添加标签，请使用标签使用元素；标签文本和控件本身位于标签元素。表格的每个部分都被视为一个段落，并且是通常使用 p 元素与其他部分分开。把这个综上所述，以下是询问客户姓名的方式：

尽管本节是非规范性的，但在我看来，这是一种不好的做法，而不是语义。我想目的是将输入放在自己的行上，但是这些元素的显示不应该使用 CSS 来控制吗？

W3C 建议以这种方式布局表单是否有原因？我错过了什么吗？

原文

I've seen a lot of examples on the web where forms are laid out like so:

<form>
    <p><input></p>
</form>

To my surprise, this is also described in the specification:

Any form starts with a form element, inside which are placed the
controls. Most controls are represented by the input element, which by
default provides a one-line text field. To label a control, the label
element is used; the label text and the control itself go inside the
label element. Each part of a form is considered a paragraph, and is
typically separated from other parts using p elements. Putting this
together, here is how one might ask for the customer's name:

Though this section is non-normative, it still seems to me that this is bad practice and not semantic. I suppose that the purpose is to put inputs on their own line, but shouldn't the display of these elements be controlled using CSS?

Is there a reason why the W3C advises forms be laid out this way? Am I missing something?

分享到QQ

分享到微博

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

发布评论

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

债姬 2024-12-04 19:32:16

如果您以有意义（读：语义）的方式编写表单，您将希望文本流通向该元素：

<form>
 <p><label for="firstName">Please enter your first name:</label><input id="firstName" type="text" /></p>
</form>

更好的方法是将您的表单视为 mad-libs 脚本：

<form>
  <p>Hello. My <label for="firstName">name</label> is <input id="firstName" type="text" />...</p>
</form>

p 元素并不是标记表单的唯一方法。如果要添加/编辑数据矩阵，则使用表在语义上是有效的。

在其他情况下，您可能不想使用包装元素。这取决于您想要提供的内容。整理好内容后，再担心如何设计所有内容。

If you are writing a form in a meaningful (read: semantic) way, you will want the flow of text to lead to the element:

<form>
 <p><label for="firstName">Please enter your first name:</label><input id="firstName" type="text" /></p>
</form>

An even better way is to treat your form like a mad-libs script:

<form>
  <p>Hello. My <label for="firstName">name</label> is <input id="firstName" type="text" />...</p>
</form>

A p element isn't the only way to mark-up a form. If a matrix of data is being added/edited, it's semantically valid to use a table.

In other cases, you might not want to use a wrapping element. It depends on what content you want to be serving up. Worry about styling it all after you've got your content sorted out.

回复收藏 0 原文