嵌入在<table>标记中的HTML表单无法正确呈现？

debugcn 发表于 Dev

BSalunke

我有以下简单的HTML形式：

<html>
<head>
</head>
<body>
   <table border="0" cellpadding="2" cellspacing="0" width="400">
        <form name="logon" method="post" id="logon" action="take.php">
          <tr>
                <td tabindex="0">User ID </td>
                <td>
                        <input name="login"  maxlength="12" size="15" value="" title="User ID">
                </td>
                <td class="loginlabel">&nbsp;</td>
          </tr>

          <tr>
                <td tabindex="0">Password </td>
                <td>
                        <input type="password" name="password"  maxlength="12" size="15" value="">
                </td>
                <td class="lable">&nbsp;</td>
          </tr>

          <tr>
                 <td colspan="3">
                    <p class="pushButton"><button type="submit" form="nameform" value="Submit">Submit</button></p>
                </td>
          </tr>

        </form>
   </table>
</body>
</html>

当我在任何浏览器中打开此页面并检查元素时，我发现HTML表单的结构很怪异。我发现<form>标签在启动后立即关闭，请查找html表单检查的屏幕截图，

这背后的原因是什么？

扎克·韦伯

在HTML中，当您在另一个标签中打开一个标签时，打开的标签（在您的情况下为该<form>标签）会在其父标签关闭时被清除。

因此（例如）：

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

将导致以下结果：

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

这是因为，根据W3C（在其他方面建立了HTML的国际标准），可以使用form元素的唯一上下文是可以预期流内容的地方。流内容是文档和应用程序正文中使用的大多数元素，例如：

解决方案是将表格标签放置在表格上方，将表格封装在表格中，如下所示：

<form>
   <table>
   </table>
</form>

为了澄清：
你需要肯定的是，表是里面的形式标记。请参见下面的完整示例：

<html>

  <head>
  </head>

  <body>
    <form name="logon" method="post" id="logon" action="take.php">
      <table border="0" cellpadding="2" cellspacing="0" width="400">
        <tr>
          <td tabindex="0">User ID </td>
          <td>
            <input name="login" maxlength="12" size="15" value="" title="User ID">
          </td>
          <td class="loginlabel">&nbsp;</td>
        </tr>

        <tr>
          <td tabindex="0">Password </td>
          <td>
            <input type="password" name="password" maxlength="12" size="15" value="">
          </td>
          <td class="lable">&nbsp;</td>
        </tr>

        <tr>
          <td colspan="3">
            <p class="pushButton">
              <button type="submit" form="nameform" value="Submit">Submit</button>
            </p>
          </td>
        </tr>
      </table>
    </form>
  </body>

</html>