Subscribe in a readerBookmark This
Just Copy and Paste this Form Style
Chris Missal, November 10, 2008
For a long time I've been wanting to post on here some HTML and CSS to lay out a form in a
clean way. A way that uses vertical alignment like columns. Usually I see forms that are
overcomplicated and messy. Here is my attempt at something simple. Basically I'm posting this
here so I can copy it for pages I'll be creating later. What I like best is the fact that uses
very few classes, only two in the first example and just one in the second. Also, there isn't
a single style attribute.
<form class="columnLayout" action="awesome.html" method="post">
<fieldset>
<legend>Sign in to continue</legend>
<dl class="right">
<dt><label for="username">User name</label></dt>
<dd><input type="text" name="username" id="username" /></dd>
<dt><label for="password">Password</label></dt>
<dd><input type="password" name="password" id="password" /></dd>
<dt> </dt>
<dd><input type="submit" value="Sign in" /></dd>
</dl>
</fieldset>
</form>
Here is the second form. These are just trivial examples that I wanted to get built quickly.
<form class="columnLayout" action="awesome.html" method="post">
<fieldset>
<dl>
<dt><label for="address1">Address</label></dt>
<dd><input type="text" name="address1" id="address1" /></dd>
<dt><label for="address2"> </label></dt>
<dd><input type="password" name="address2" id="address2" /></dd>
<dt><label for="city">City</label></dt>
<dd><input type="text" name="city" id="city" /></dd>
<dt><label for="state">State</label></dt>
<dd><select name="state" id="state">
<option value=""></option>
<option value="AL">Alabama</option>
<option value="CA">California</option>
<option value="FL">Florida</option>
<option value="IN">Indiana</option>
<option value="LA">Louisiana</option>
<option value="TX">Texas</option>
</select></dd>
<dt><label for="lifestory">Your Life Story</label></dt>
<dd><textarea name="lifestory" id="lifestory" rows="3" cols="20"></textarea></dd>
<dt> </dt>
<dd><input type="submit" value="Sign Up" /></dd>
</dl>
</fieldset>
</form>
There is a class for the <dl> tag that that will align the
labels to the right if you prefer, as the top example shows. The only thing left is the CSS that
makes this all happen.
form.columnLayout fieldset, form.columnLayout dl {
width: 400px;
}
form.columnLayout dl, form.columnLayout dl dd, form.columnLayout dl dt {
margin: 0;
padding: 5px;
float: left;
}
form.columnLayout dl dd, form.columnLayout dl dt {
width: 40%;
}
form.columnLayout dl dt {
clear: left;
}
form.columnLayout dl.right dt {
text-align: right;
}