1. 首頁
  2. 問答
  3. 嵌入在<table>標記中的HTML表單無法正確呈現？

嵌入在<table>標記中的HTML表單無法正確呈現？

2017-02-23 38 views
2

我有以下簡單的HTML表單：嵌入在<table>標記中的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表單檢查的屏幕截圖， Image of HTML form inspection embedded in <table> tag

這背後的原因是什麼？

來源

2017-02-23 BSalunke

回答

1

在HTML，當您打開另一個標籤內的標籤，您打開的標籤（在您的情況下，<form>標籤）會在其父項關閉時被克服。

因此（舉例來說）：

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

將導致以下：

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

這是因爲，根據本W3C（它設置的國際標準上HTML除其他事項外），表單元素唯一可以使用的上下文是flow content。流內容是被以文件和應用程序的主體中使用的大多數元件，例如： Flow content

對此的解決方案是將上面說的表的形式的標籤，包裹該表中如下形成：

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

使用Chrome的檢查功能驗證，輸出到瀏覽器中顯示嵌套形式標籤內的表：
Updated inspect

隨意問任何進一步的問題。

來源

2017-02-23 11:21:28

+0

在我的情況下，'form>'的父標籤是關閉的嗎？它在'

'關閉之前關閉，那麼在我的情況下它是一個問題呢？ – BSalunke

+0

''的父標記爲'

'（因爲表格嵌套在表格中） - 爲了糾正錯誤，您需要'交換'這些角色並在''內嵌套'
'。我已經更新了我的原始答案，以略微澄清。 –

+0

我的問題仍然是爲什麼？爲什麼必須提供'

'標籤和''？爲什麼反向不能正常工作？ – BSalunke

0

移動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標籤。這似乎是一個奇怪的限制，但也許別人可以進一步澄清。

來源

2017-02-23 11:17:16 Hunter

0

你有這樣的：

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

來源

2017-02-23 11:20:09

+0

但是爲什麼在表格中聲明窗體不工作？ – BSalunke

+0

所以你有表格，在表格裏面你將有登錄表。我們可以用現代的例子......你進入你的牀內，而不是你內部的牀！ ：D –

相關問題

 相關問題