Aligning Forms

[dotkpay]

Hello,

I have been using tables to keep forms aligned but I was wondering if there is a better way to do it.

[dropfaith]

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

 

[cssfreakie]

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

[astra]

 

I think that php formswill be useful for you. It helps to create correct forms.

[spiderwell]

its all about the lists, see my post I made just the other day about tables V lists