正确的HTML表单标记

Question

正确的HTML表单标记

3

从前，在HTML的世界里发生了一件事情。

我在查看W3Fools时发现了与W3Schools中的错误相关的this paragraph。

  <form>  
    First name: <input type="text" name="firstname" /><br />  
    Last name: <input type="text" name="lastname" />  
   </form>
This code is wrong. Non-block-level elements (such as <input>) are not valid directly inside <form> tags until HTML5.

嗯，既然我总是以这种方式格式化，我对自己说：“等等，我一直都错了。”并去验证它，看看是否正确。事实上，这段代码未通过验证。

然后，我搜索了正确的标记语言，在更可靠的来源中找到了几个示例，但以下示例都未通过验证器。

坏的、好的和丑陋的

1.

W3Schools

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

2. Mozilla网络开发者

在“示例”部分，我找到了这个：

A common use-case senario

<!-- A common form that includes input tags -->
<form action="getform.php" method="get">
    First name: <input type="text" name="first_name" /><br />
     Last name: <input type="text" name="last_name" /><br />
        E-mail: <input type="email" name="user_email" /><br />
<input type="submit" value="Submit" />
</form>

3. W3C Wiki

<form action="http://www.google.com/search" method="get">
  <label>Google: <input type="search" name="q"></label>
  <input type="submit" value="Search...">
</form>

一把代码的力量

问题

我应该使用什么正确和有效的标记来创建一个表单？

提前感谢。

编辑：

一个类似的问题得到了回答，将问题提问者重定向到HTML4规范的表单部分。他们提供了以下代码：

<FORM action="http://somesite.com/prog/adduser" method="post">
   <P>
     <!--...stuff...-->
     <INPUT type="submit" value="Send"> <INPUT type="reset">
   </P>
</FORM>

首先，它不是他们的wiki的相同代码。但无论如何，据我所知，维基并不是100%准确的.... 但是：

- 他们通过将所有标签包含在<p>中来修复验证错误。但是，表单不是段落，对吧？这段代码可以通过验证，但我认为这并不是很语义化...

- 专家给我的答案（谢谢！）大部分都是将内部标签包含在<fieldset>中，但如果我只需要一个fieldset（例如，只有一个字段或自相关字段的表单），这样做正确吗？这可能是多余的代码（因为fieldset标签应该用于包含类似的字段）吗？

- Arkana

可能是正确的HTML表单标记的重复问题。 - dsgriffin

@Zenith 我还没有看到那个问题。但是，在这种情况下，我必须编辑我的答案，因为给出的答案让我更加怀疑。感谢链接和通知我重复的问题 ;) - Arkana

4个回答

2

我倾向于与其他人意见一致，认为FieldSet是将表单项分组的最佳方式，特别是对于屏幕阅读器等方面有很大帮助。

我通常使用以下方法：

<form action="http://www.google.com/search" method="get">
    <fieldset>
        <legend style="display: none;"></legend>
        <label for="q">Google:</label>
        <input type="text" name="q">
        <input type="submit" value="Search...">
    </fieldset>
</form>

通常我不包括图例，但如果需要进行验证，则不一定需要可见 ;)

- KaraokeStu

屏幕阅读器的作用对我非常有帮助，我从事无障碍工作，之前并不知道这一点（表单是我的难题）。谢谢！ - Arkana

请记得在标签中添加“for”，以说明哪个标签是为哪个控件而设的。（欢迎点赞；）） - KaraokeStu

1

这段代码是错误的。非块级元素（如<input>）直接放在<form>标签内在HTML5之前是无效的。

这并不完全正确。它们在过渡型DTD中是有效的，但在严格型DTD中则无效。

我应该使用什么正确和有效的标记来制作表单？

这取决于表单的具体情况。

对于给出的示例，W3C版本是最好的。在表单中使用块容器并不重要（除非它增加了有用的语义或对控件进行了合理的分组）。<label>元素非常好用。

- Quentin

谢谢您澄清第一点。W3Fools 对 W3Schools 进行了抨击，但似乎他们也没有走对方向.. 我不知道该相信谁。:p - Arkana

2

@Arkana - 所有的代码都存在漏洞（即使规范也不例外），W3Schools 的问题比其他网站更多。我建议您从多个来源获取建议，然后进行测试和验证。 - Alohci

谢谢@Alohci。在提问之前我就已经这样做了，但结果让我完全困惑，你看得出来！Jeje ;) - Arkana

0

我倾向于将字段和标签分组放在<fieldset>标签内，这对我来说也非常语义化。

- PA.

但是，如果您只有几个标签和输入框，并且它们都彼此相关，请仅使用一个<fieldset>标签，这不会产生多余的代码吗？非常感谢您的回答。 - Arkana

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- John · Accepted Answer

是一个块级元素，在表单中被广泛使用。因此，您可以使用

或其他块级元素（如

）。

<form action="http://www.google.com/search" method="get">
<fieldset><legend>My form</legend>
<label>Google: <input type="text" name="q"></label>
<input type="submit" value="Search...">
</fieldset>
</form>

或者

<form action="http://www.google.com/search" method="get">
<div>
<label>Google: <input type="text" name="q"></label>
<input type="submit" value="Search...">
</div>
</form>

这很可能很少被标记为无效的标记，因为人们倾向于使用许多div来帮助美化表单样式。

正确的HTML表单标记

W3Schools

2. Mozilla网络开发者

更多细节：

问题

编辑：