dotkpay Posted April 19, 2011 Share Posted April 19, 2011 Hello, I have been using tables to keep forms aligned but I was wondering if there is a better way to do it. Quote Link to comment Share on other sites More sharing options...
dropfaith Posted April 20, 2011 Share Posted April 20, 2011 just a quick type up so may want to check it a bit form code below <form id="myform" class="cssform" action=""> <p> <label for="user">Name</label> <input type="text" id="user" value="" /> </p> <p> <label for="emailaddress">Email Address:</label> <input type="text" id="emailaddress" value="" /> </p> <p> <label for="comments">Feedback:</label> <textarea id="comments" rows="5" cols="25"></textarea> </p> <p> <label for="comments">Sex:</label> Male: <input type="radio" name="sex" /> Female: <input type="radio" name="sex" /><br /> </p> <p> <label for="comments">Hobbies:</label> <input type="checkbox" name="hobby" /> Tennis<br /> <input type="checkbox" name="hobby" class="threepxfix" /> Reading <br /> <input type="checkbox" name="hobby" class="threepxfix" /> Basketball <br /> </p> <p> <label for="terms">Agree to Terms?</label> <input type="checkbox" id="terms" class="boxes" /> </p> <div style="margin-left: 150px;"> <input type="submit" value="Submit" /> <input type="reset" value="reset" /> </div> </form> then a basic css to align it (pretty basic looking form here) .cssform p{ width: 300px; clear: left; margin: 0; padding: 5px 0 8px 0; padding-left: 155px; /*width of left column containing the label elements*/ border-top: 1px dashed gray; height: 1%; } .cssform label{ font-weight: bold; float: left; margin-left: -155px; /*width of left column*/ width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/ } .cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/ width: 180px; } .cssform textarea{ width: 250px; height: 150px; } /*.threepxfix class below: Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents. to account for 3 pixel bug: http://www.positioniseverything.net/explorer/threepxtest.html */ * html .threepxfix{ margin-left: 3px; } Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted April 20, 2011 Share Posted April 20, 2011 Hello, I have been using tables to keep forms aligned but I was wondering if there is a better way to do it. very good question!!apart from a possible solution above here, tables are designed for displaying data in a multi column spreadsheet. ones you make that a one column, a list is a better solution (<ul>,<ol>,<dl>) for some nice forms and another way of doing it you might want to have a look at the source code of some designs of wufoo. http://wufoo.com/gallery/ Although those are created dynamically and maybe a tiny bit redundant, they are much better coded than tables could. They are using lists for this. Hope this gives some inspiration Quote Link to comment Share on other sites More sharing options...
astra Posted May 10, 2011 Share Posted May 10, 2011 I think that php formswill be useful for you. It helps to create correct forms. Quote Link to comment Share on other sites More sharing options...
spiderwell Posted May 10, 2011 Share Posted May 10, 2011 its all about the lists, see my post I made just the other day about tables V lists Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.