为什么这个 XHTML 表单不验证？答案

【问题标题】：Why won't this XHTML form validate?为什么这个 XHTML 表单不验证？
【发布时间】：2010-09-20 04:18:19
【问题描述】：

任何想法为什么这不会在这里验证：

http://validator.w3.org/#validate_by_input

看起来表单输入标签是错误的，但是通过 XHTML 规范阅读它们应该可以很好地验证。有什么想法吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Test</title>
 </head>

 <body>
    <div class="Header">
        <table class="HeaderTable">
            <tr>
                <td>
                    <div class="Heading">Test <span class="Standard">Test</span>
                    </div>
                </td>
                <td>
                    <div class="Controls">
                        <form id="ControlForm" method="get" action="Edit.php">
                            <input type="submit" name="action" id="Edit" value="Edit" />
                            <input type="submit" name="action" id="New" value="New" />
                        </form>
                    </div>
                </td>
            </tr>
        </table>
    </div>
 </body>
</html>

【问题讨论】：

标签： validation xhtml xhtml-1.0-strict

【解决方案1】：

我遇到了同样的问题，我花了一些时间才弄清楚。这是 w3c 验证器的最新变化吗？只是我确定我的一些页面过去验证过表单，但现在它们似乎都因同一个问题而出现错误。

我以前总是做这样的事情：

<div>
<form>
    <label></label>
    <input />
    <label></label>
    <input />
    <label></label>
    <input />
</form>

并得到验证错误，所以现在我只需在所有标签和输入周围添加字段集或 div 以使其验证，如下所示：

<div>
<form>
    <fieldset>or<div>
        <label></label>
        <input />
        <label></label>
        <input />
        <label></label>
        <input />
    </fieldset>or</div>
</form>

似乎可行，但我确定我过去不必这样做......嗯？

【讨论】：

【解决方案2】：

您的输入元素应该在一个字段集中。这验证并具有使非可视用户代理更容易访问文档的额外好处。

顺便说一句，您的标记有点受到 divitis 的影响。您可以将类直接放在表格单元格上，而不是在其中嵌套 div 元素（我不打算评论使用表格进行布局）。此外，您可以直接设置表单元素的样式，而不是将其嵌套在 div 中。

无论如何，这是您添加了一个字段集的示例，因此它可以验证：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Test</title>
  </head>
  <body>
    <div class="Header">
      <table class="HeaderTable">
        <tr>
          <td>
            <div class="Heading">Test <span class="Standard">Test</span></div>
          </td>
          <td>
            <div class="Controls">
              <form id="ControlForm" method="get" action="Edit.php">
                <fieldset>
                  <input type="submit" name="action" id="Edit" value="Edit" />
                  <input type="submit" name="action" id="New" value="New" />
                </fieldset>
              </form>
            </div>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>

【讨论】：

【解决方案3】：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Test</title>
 </head>

 <body>
    <div class="Header">
        <table class="HeaderTable">
                <tr>
                        <td>
                                <div class="Heading">Test <span class="Standard">Test</span>
                                </div>
                        </td>
                        <td>

                            <form id="ControlForm" method="get" action="Edit.php">
                                <div class="Controls">
                                                <input type="submit" name="action" id="Edit" value="Edit" />
                                                <input type="submit" name="action" id="New" value="New" />
                                </div>
                            </form>

                        </td>
                </tr>
        </table>
    </div>
 </body>
</html>

将 div 放入表单中。

【讨论】：

【解决方案4】：

你需要移动

<div class="Controls">

使其在

这很好验证

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title>
</head>

<body>
    <div class="Header">
        <table class="HeaderTable">
        <tr>
            <td>
                <div class="Heading">Test <span class="Standard">Test</span></div>
            </td>
            <td>
                <form id="ControlForm" method="get" action="Edit.php">
                    <div class="Controls">
                        <input type="submit" name="action" id="Edit" value="Edit" />
                        <input type="submit" name="action" id="New" value="New" />
                    </div>
                </form>
            </td>
        </tr>
        </table>
    </div>
</body>
</html>

【讨论】：

我现在总是在每个表单中使用
来避免这个问题。

【解决方案5】：

正如别人所说：

[引用] 验证器告诉您隐藏的输入元素不能立即跟随表单标签 - 它需要具有某种容器元素。 [/quote]

(Source)

我猜一个字段集可能会有所帮助；见The XHTML DTD:

<!ELEMENT form %form.content;>

<!ENTITY % form.content "(%block; | %misc;)*">

<!ENTITY % misc "noscript | %misc.inline;">
<!ENTITY % misc.inline "ins | del | script">

<!ENTITY % block "p | %heading; | div | %lists; | %blocktext; | fieldset | table">

<!ENTITY % heading "h1|h2|h3|h4|h5|h6">
<!ENTITY % lists "ul | ol | dl">
<!ENTITY % blocktext "pre | hr | blockquote | address">

你没有输入:(

【讨论】：

谢谢，你是对的，输入需要在排序容器内。

【解决方案6】：

尝试在输入周围放置一个fieldset 标签。我认为 XHTML 中表单的想法是它们不能有不是 div、fieldset 等的直接后代。

【讨论】：

对。请注意，HTML5 不再是这种情况：您可以将所有内容直接放在 form 中。