Hollen-B Web and Graphic Design Portfolio

Table-less Forms using CSS

How to make a form with out using tables.

About the CSS Script

If your a CSS freak like me you might have your own way of creating table-less structures, one of my favorites is creating table-less forms. In my example, I created a contact form which you will notice the name text floats to the left and the input field floats to the right. The way I go about this is first I create the outside wrapper by using <fieldset> which you can control the width in your CSS. Next lets define the caption to our field set by using <legend>, call it contact, and then create the form. To break up my fields into their own rows i'm going to use unordered list <ul> and use no list styling so we don't have any unwanted bullets. Inside each <li> were going to add our labels and input fields. By putting our text in the label tags we can safely float our text to the left and input fields to the right.

CSS

fieldset { padding: 0 10px; width: 400px;}
legend { font-weight: bold; font-size: 20px;}
ul { margin: 0; padding: 0; list-style: none;}
li { margin: 0; padding: 10px 0; clear: both;}
label { float:left; display:block; font-weight: bold; }
input { float: right;}
textarea { width: 99%; }
.clr { clear: both;}

HTML

<fieldset>
 <legend>Contact:</legend>
 <form method="post" action="contact_demo.php" >
 <ul>
 <li><label for="name">Name: *</label> 
 <input type="text" name="name" id="name" size="30" class="inputbox" value="<?=$name?>" /></li>
 <li><label for="email">Email: *</label> 
 <input type="text" name="email" id="email" size="30" class="inputbox" value="<?=$email?>" /></li>
 <li><label for="comment">Comment: *</label></li>
 <li><textarea rows="4" cols="" name="comment" id="comment" ><?=$comment?></textarea></li>
 <li><input type="submit" name="submit" id="submit" value="submit" class="button" /></li>
 <li>&nbsp;</li>
 </ul>
 </form>
</fieldset>

Comments