A common design requirement is for the input fields of a form to be vertically aligned, each to the right of some descriptive text. The look is very clean and easily understood by users because of its widespread use.
Those who want to use this form layout along with a purely CSS-based design should try the following technique. Simply float a label element to the left and set its width. I can verify that this works in Firefox, Internet Explorer 6 and 7, Opera, and Safari. For reference I've included aligning input fields using a table so you may compare the differences.
Aligning Input Fields Using CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Aligning Form Fields Using CSS</title>
<style type="text/css">
.form-field
{
margin-bottom:5px;
}
.form-field label
{
float:left;
width:120px;
}
</style>
</head>
<body>
<form action="">
<div class="form-field">
<label for="name">Name:</label>
<input id="name" type="text" name="name" />
</div>
<div class="form-field">
<label for="email">E-mail:</label>
<input id="email" type="text" name="email" />
</div>
<div class="form-field">
<label for="subject">Subject:</label>
<input id="subject" type="text" name="subject" />
</div>
<p>
<label for="body">Body:</label><br />
<textarea id="body" name="body" cols="30" rows="6">
</textarea><br />
<input type="submit" />
</p>
</form>
</body>
</html>
Aligning Input Fields Using a Table
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Aligning Form Fields Using a Table</title>
<style type="text/css">
.input-align
{
text-align:right;
}
</style>
</head>
<body>
<form action="">
<table style="width:260px">
<tr>
<td>
<label for="name">Name:</label>
</td>
<td class="input-align">
<input id="name" type="text" name="name" />
</td>
</tr>
<tr>
<td>
<label for="email">E-mail:</label>
</td>
<td class="input-align">
<input id="email" type="text" name="email" />
</td>
</tr>
<tr>
<td>
<label for="subject">Subject:</label>
</td>
<td class="input-align">
<input id="subject" type="text" name="subject" />
</td>
</tr>
</table>
<p>
<label for="body">Body:</label><br />
<textarea id="body" name="body" cols="30" rows="6">
</textarea><br />
<input type="submit" />
</p>
</form>
</body>
</html>
Subscribe