3

曾几何时在 HTML

我正在寻找 W3Fools 并找到与 W3Schools 中的错误有关的这一段：

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

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

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

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



坏的，好的和丑陋的

1. W3学校

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

2. Mozilla 网络开发者

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

一个常见的用例场景

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

<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”、“address”、“fieldset”、“ins”之一, "del" 开始标签

问题

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

提前致谢。

编辑：

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

<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>. 但是表格不是段落，不是吗？此代码通过验证，但我认为这不是很语义......

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

4

4 回答 4

3

字段集是表单中常用的块级元素。因此，您可以使用字段集或其他块级元素，如 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 来很好地帮助样式表单。

于 2013-04-30T10:17:35.853 回答
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>

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

于 2013-04-30T10:44:34.590 回答
1

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

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

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

这取决于形式。

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

于 2013-04-30T10:12:59.230 回答
0

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

于 2013-04-30T10:16:26.003 回答