CODEWITHSUNDEEP
htmlformshtml-table
BSalunke
BSalunke

Reputation: 11727

HTML Form embedded in <table> tag is not rendered properly?

I have following simple HTML form:

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

When I open this page in any browser and inspect element, I found weird structure of the HTML form. I found <form> tag immediately closed after start, please find the screen shot of html form inspection, Image of HTML form inspection embedded in <table> tag

What is the reason behind this?

Upvotes: 3

Views: 1688

Answers (3)

Zac Webb
Zac Webb

Reputation: 663

In HTML, when you open a tag within another tag, the tag you open (in your case the <form> tag) gets clsoed when its parent gets closed.

Therefore (for example): 

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

will result in the following:

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

This is because, according to the W3C (which sets international standards on HTML among other things), the only context a form element can be used in is where flow content can be expected. Flow content are most elements that are used in the body of documents and applications, for example: Flow content

The solution to this is to place the form tags above that of the table, encasing the table in the form as below:

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

To clarify:
You need to be sure that the table is inside the form tags. See a complete example as working below:

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

Using the inspect function in Chrome proves that the output to the browser shows the table nested inside of the form tags:
Updated inspect

Feel free to ask any further questions.

Upvotes: 1

Rafael Ribeiro
Rafael Ribeiro

Reputation: 59

you have this:

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

You need to declare first the form and then the 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>

Upvotes: 0

Hunter
Hunter

Reputation: 410

Move the table tags inside of the form also:

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

The reason for this could just be that the form is unsure why there are tr tags without a table tag within it. It seems a strange limitation however maybe somebody else can clarify further.

Upvotes: 0

Related Questions