AlfieWebDevTips Homefor new and experienced developers
[Home Home] [Web Development Web Development ] [Code Generators Code Generators ] [Resources Resources ] [Forums Forum ] [Contact Us Contact ] |WebDevTips Privacy Privacy |

WebDevTips Pick Of The Day : ".$todaytip[$today]." |

"; ?>
Print This Page



 


You are here : Home - Web Development - HTML - Forms - Forms in Tables

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.

Your Name:
Email Address:
Comments:
 

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







Google
 

[back to top of page]   

[labelled with icra -  - this link will open in a new window] [RSS Content]

[Copyright © WebDevTips]