<table> 标签中嵌入的 HTML 表单未正确呈现？答案

【问题标题】：HTML Form embedded in <table> tag is not rendered properly?<table> 标签中嵌入的 HTML 表单未正确呈现？
【发布时间】：2017-07-13 20:08:32
【问题描述】：

我有以下简单的 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 forms html-table

【解决方案1】：

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

因此（例如）：

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

将导致以下结果：

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

这是因为，根据W3C（其中规定了 HTML 的国际标准），唯一可以使用表单元素的上下文是可以预期 flow content 的位置。流内容是文档和应用程序正文中使用的大多数元素，例如：

解决方法是在表格上方放置表格标签，将表格包裹在如下表格中：

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

澄清一下：
您需要确保 table 是 inside 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>

在 Chrome 中使用检查功能证明了浏览器的输出显示了嵌套在表单标签内的表格：

如有任何其他问题，请随时提出。

【讨论】：

就我而言，form> 的父标签在哪里关闭？它在<form> 关闭之前就关闭了，那么在我的情况下它是一个问题吗？
<form> 的父标签是 <table>（因为表格嵌套在表格内） - 为了更正您的错误，您需要“交换”这些角色并嵌套 <table>在<form> 内。我已经更新了我的原始答案以稍微澄清一下。
我的问题仍然是为什么？为什么必须提供带有<form> 的<table> 标签？为什么反向不能正常工作？
@BSalunke - 我已经更新了原始帖子，希望能提供一些关于为什么表格不能嵌套在表格中的见解。对于未来的问题，请尝试使用 W3C 验证器来解决此类问题 (validator.w3.org)。如果您的问题已解决，请标记答案为正确。干杯

【解决方案2】：

将table 标签也移到表单内：

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

原因可能只是表单不确定为什么其中有tr 标签而没有table 标签。这似乎是一个奇怪的限制，但也许其他人可以进一步澄清。

【讨论】：

【解决方案3】：

你有这个：

<table border="0" cellpadding="2" cellspacing="0" width="400">
    <form name="logon" method="post" id="logon" action="take.php">

您需要先声明表格，然后声明表格

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

【讨论】：

这样你就有了表单，在这个表单中你将拥有登录表。我们可以举一个现代的例子……你进入你的床，而不是你内心的床！ :D