Forms in Tables

When it comes to formatting the layout of your forms you must ensure that the code structure is correct.

This is very important especially if you use tables to display your forms. Consider this basic form layout.

Heres the html

<form method="" action="">
<table cellspacing="2" cellpadding="2" border="0">
<tr>
   <td align="right" valign="top">Your Name:</td>
   <td valign="top" align="left"><input type="Text" name="" size="20"></td>
</tr>
<tr>
   <td align="right" valign="top">Email Address:</td>
   <td valign="top" align="left"><input type="Text" name="" size="20"></td>
</tr>
<tr>
   <td align="right" valign="top" class="tablecontent">Comments:</td>
   <td valign="top" align="left"><textarea cols="30" rows="5" name=""></textarea></td>
</tr>
<tr>
   <td align="right" valign="top"> </td>
   <td valign="top" align="left"><input type="Submit" value="Send Enquiry"> <input type="Reset" value="Clear Form"> </td>
</tr>
</table>
</form>

I have left out the field names. Note the positioning of the <form> </form> tags.

The whole table is enclosed between the <form> </form> tags. It is important that you follow that structure or your form might not submit.

Look at this structure

<form action="">
<table>

Your form fields in table cells

</form>
</table>

This form would more than likely fail due to improper nesting.

Forms can be nested in a table. For example say you use tables to layout you site and you want a form BUT you want to use tables to layout your form. take a look at the the following structure to see how to do it properly.

<table>
<tr>
    <td>navigation cell</td>
    <td>content cell
        <form action="">
            <table>
            Your form fields in table cells
            </table>
        </form>
    </td>
</tr>
<table>

OK its pretty basic but you get the picture. With forms proper formatting is critical to successfully allow submission. Nesting your tags incorrectly may not have any visual side effects but remember - just because something looks right doesn't mean it is right :)

I hope you have found my guide to forms useful and not too boring. If you have any comments, good or bad, about this guide then please contact me. All comments are greatly appreciated. Thanks... Andy

how forms work | the form tag | text input
user options | hidden and submit | forms in tables

Why not discuss this article in our forum?

Other related guides : accessible web forms | webpage basics | lists

[back to top of page]

[

] [

]

Your Name:
Email Address:
Comments:

Search
	[ Web] [ WebDevTips]