by Dave Reeder
23. January 2010 19:40
Styling forms can be a little tricky trying to align labels and input boxes and getting it looking professional, but by using lists we can layout our forms in an easy, semantically correct way.
The key to doing this, is to use our <li> </li> tags as if they are a "block" which we will float out labels and list items in.
Here is the form we will style:
<form action="post" id="contactform">
<ul>
<li><label for="yourname">Your Name:</label><input type="text" name="yourname" id="yourname" /></li>
<li><label for="youremail">Your Email:</label><input type="text" name="youremail" id="youremail" /></li>
<li><label for="emailsubject">Subject:</label><input type="text" name="emailsubject" id="emailsubject" /></li>
<li><label for="emailmessage">Message:</label>
<li><textarea name="emailmessage" cols="12" rows="6" id="emailmessage"></textarea></li>
</ul>
</form>
We will put our list around all the form elements to get it ready for styling:
<form action="post" id="contactform">
<ul>
<li><label for="yourname">Your Name:</label><input type="text" name="yourname" id="yourname" /></li>
<li><label for="youremail">Your Email:</label><input type="text" name="youremail" id="youremail" /></li>
<li><label for="emailsubject">Subject:</label><input type="text" name="emailsubject" id="emailsubject" /></li>
<li><label for="emailmessage">Message:</label>
<li><textarea name="emailmessage" cols="12" rows="6" id="emailmessage"></textarea></li>
</ul>
</form>
And our CSS:
form,
form ul {width: 500px;}
form ul li {display: block; height: 30px; width: 500px; margin: 0; padding: 0}
form ul li label {width: 240px; float: left}
form ul li input,
form ul li textarea {width: 250px; float: right}
There you have it, your form elements all line up nicely and all it took was a little extra HTML and CSS.
View the demo here