html表单中正确和正确的标记

Question

HTML 中的从前

---

我在查看 W3Fools 并找到 this paragraph，与 W3Schools 中的错误有关：

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

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

好吧，因为我总是这样格式化，所以我对自己说“等等，我一直都错了”。并去验证它以检查它是否正确。实际上，这段代码没有通过validation。

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

坏的、好的和丑的

---

1。 W3Schools

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

2。 Mozilla Network Developer

在“示例”部分，我发现了这个：

一个常见的用例场景

<!-- 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>

一大堆代码

---

更多细节：

我正在尝试在 HTML 4.01 和 XHTML 1.0 中将代码验证为 HTML 片段。 我发现的反复出现的错误是：

文档类型不允许此处的元素“输入”；缺少一个“p”， “h1”、“h2”、“h3”、“h4”、“h5”、“h6”、“div”、“pre”、“地址”、 "fieldset", "ins", "del" 开始标签

问题

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

提前致谢。

---

编辑：

回答了similar question，将 OP 重定向到 HTML4 specification 的表单部分。他们提供了这个代码：

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

首先，它与wiki 的代码不同。但没关系，据我所知，wiki 并不是 100% 准确的......但是：

• 他们通过将所有标记括在 <p> 中来修复验证错误。但是表格不是段落，不是吗？此代码通过验证，但我认为这不是很语义...

• 您给我的专家回答（谢谢！）在大多数情况下，是将内部标签括在 <fieldset> 中，但如果我只需要一个 fieldset（例如，带有只有一个领域或自相关领域），这是正确的吗？这可能不是多余的代码（因为fieldset 标签应该包含类似的字段）？

Answer 1

字段集是表单中常用的块级元素。因此，您可以使用字段集或其他块级元素，例如 div。

<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 来帮助更好地设置表单样式。

Answer 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>

我通常不包括图例，但如果需要验证，它不一定必须是可见的；）

Answer 3

此代码错误。在 HTML5 之前，非块级元素（例如 <input>）在 <form> 标记内直接无效。

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

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

这取决于形式。

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

Answer 4

我倾向于在 <fieldset> 标记内对字段和标签进行分组，这对我来说也很符合语义。