Member Avatar for DARK_BYTE

Hello I'm building a form inside a table but the output is not what I expected; the table should have looked like this:

Here is my code:

<html>
<head>
<title></title>
</head>
<body>
  <form name="frm_details" method="post" action="mailto:someone@hotmail.com"> 
     <table border="1">
      <tr>
        <td>Name</td>
        <td><input type="text" name="name" size="30"></td>
        <td>ID</td>
        <td><input type="text" name="Id" size="25></td>
      </tr>
      <tr>
        <td>Password</td>
        <td><input type="text" name="password" size="30"></td>
        <td>Address</td>
        <td><textarea cols="30" rows="2" name="address"></td>
      </tr>
        <td>Sex</td>
        <td><input type="radio" name="sex" value="male"/>Male
            <input type="radio" name="sex" value="female"/>Female 
        </td>
      </tr>
    </table>
    </form>
</body>
</html>


I wrote just a part of the code and it is messed up;I have no idea why it is messing up the rows and columns!Like for example why it is not displaying the td(with password text in another row).Can someone help me please?

Edited by DARK_BYTE because: n/a
  • 2 Contributors
  • 4 Replies
  • 1K Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by DARK_BYTE

Dani AI

Generated

The problem here is not the table layout itself but malformed HTML. Browsers try to "repair" bad markup and that repair can move cells, swallow inputs, or drop content from view. As pointed out, a missing quote on an attribute and improperly closed tags cause the parser to reinterpret the following markup. That is why saw the password and address cells jump around — they were affected by the earlier syntax error.

Practical checks: open the page in the browser, press F12 and inspect the DOM (Elements panel) to see how the browser actually parsed your HTML. Run the source through the W3C validator (W3C Markup Validation Service) to get exact error lines. Fixes to watch for: always quote attribute values, do not self-close non-void elements (for example textarea requires a separate </textarea>), and make sure every <tr> has the expected <td> children (use colspan when a control should span multiple cells). Note that in HTML5 the trailing slash on void elements is optional — but quotes and correct nesting are still mandatory.

Best practices: validate often, edit in an HTML-aware IDE that highlights matching tags, build the form row-by-row and test after each change, and consider CSS layout (flex/grid) instead of tables for form layout. These steps will prevent the subtle, layout-breaking effects of malformed tags.

Recommended Answers

All 4 Replies

Member Avatar for peter_budo
  1. Tags which do not have pair close tags should have back slash on the end of their declaration, which all of yours input tags are missing
  2. Input for ID is missing double quote after size declaration
<html>
<head>
<title></title>
</head>
<body>
  <form name="frm_details" method="post" action="mailto:someone@hotmail.com"> 
     <table border="1">
      <tr>
        <td>Name</td>
        <td><input type="text" name="name" size="30" /></td>
        <td>ID</td>
        <td><input type="text" name="Id" size="25"/></td>
      </tr>
      <tr>
        <td>Password</td>
        <td><input type="text" name="password" size="30"/></td>
        <td>Address</td>
        <td><textarea cols="30" rows="2" name="address"/></td>
      </tr>
        <td>Sex</td>
        <td><input type="radio" name="sex" value="male"/>Male
            <input type="radio" name="sex" value="female"/>Female 
        </td>
      </tr>
    </table>
    </form>
</body>
</html>
Member Avatar for DARK_BYTE

Well here is more of the code but the form inside the table is still not like I want 

<html>
<head>
<title></title>
</head>
<body>
  <form name="frm_details" method="post" action="mailto:someone@hotmail.com"> 
     <table border="1" width = "100%">
      <tr>
        <td>Name</td>
        <td><input type="text" name="name" size="30"/></td>
        <td>ID</td>
        <td><input type="text" name="Id" size="25/></td>
      </tr>
      <tr>
        <td>Password</td>
        <td><input type="text" name="password" size="30"/></td>
        <td>Address</td>
        <td><textarea cols="30" rows="2" name="address"/></textarea></td>
      </tr>
        <td>Sex</td>
        <td><input type="radio" name="sex" value="male"/>Male
            <input type="radio" name="sex" value="female"/>Female 
        </td>
        <td>Marital Status</td>
        <td><select name="marital status" size="1">
            <option value="Single">Single</option>
            <option value="Married">Married</option>
            <option value="Divorced">Divorced</option>
            </select>
        </td>      
     </tr>
     <tr>
       <td>Phone</td>
       <td></td>
       <td>email</td>
       <td><input type="text" name="email" size="30"</td>
     </tr>
    </table>
    </form>
</body>
</html>

Here is what I get with this code:


The password field which should have been on the second row is not even showing up and the Address field also is messed up.Anyone ever put a form inside a table or a table inside a form?

Edited by DARK_BYTE because: n/a
Member Avatar for peter_budo

You are not paying attention to your tags formatting, if they have all double quotes as need it, if the tag is correctly closed and if they are in right order

<html>
<head>
<title></title>
</head>
<body>
  <form name="frm_details" method="post" action="mailto:someone@hotmail.com"> 
     <table border="1" width = "100%">
      <tr>
        <td>Name</td>
        <td><input type="text" name="name" size="30"/></td>
        <td>ID</td>
        <td><input type="text" name="Id" size="25"/></td>
      </tr>
      <tr>
        <td>Password</td>
        <td><input type="text" name="password" size="30"/></td>
        <td>Address</td>
        <td><textarea cols="30" rows="2" name="address"/></textarea></td>
      </tr>
        <td>Sex</td>
        <td><input type="radio" name="sex" value="male"/>Male
            <input type="radio" name="sex" value="female"/>Female 
        </td>
        <td>Marital Status</td>
        <td><select name="marital status" size="1">
            <option value="Single">Single</option>
            <option value="Married">Married</option>
            <option value="Divorced">Divorced</option>
            </select>
        </td>      
     </tr>
     <tr>
       <td>Phone</td>
       <td></td>
       <td>email</td>
       <td><input type="text" name="email" size="30"/></td>
     </tr>
    </table>
    </form>
</body>
</html>
Edited by peter_budo because: n/a
Member Avatar for DARK_BYTE

Yep very true thanks a lot!I will try to make an effort to make sure that my tags are correct in the future; thanks!:P

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.