Tips : Xhtml and CSS align forms label and inputs

To easily align label on the left and form on the right you can use a positionning CSS features :

Form align

We apply in this example a class on the form element. This class specify a position as relative and a width. With this elements we can now align labels and inputs. The label must be in relative to. All label are display as block. Then the input is in position absolute. As the label is positioned as relative, the position for the input refers to the label positionning.

Check the code below :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>HTML Form</title>
<style type=”text/css” media=”screen”>
input{
font:10px Verdana, Arial;
}
.form_align{
position:relative;
padding:5px;
width:300px;
text-align:center;
}
.form_align label{
position:relative;
text-align:left;
display:block;
line-height:18px;
}
.form_align label input{
position:absolute;
right : 10px;
}
</style>
</head>
<body>
<form method=”post” name=”form_align_fields” class=”form_align”>
<label> Test : <input type=”text” name=”test” /></label>
<label> Test2 : <input type=”text” name=”test2″ /></label>
<label> Test3 : <input type=”text” name=”test3″ /></label>
<input type=”submit” name=”Submit” />
</form>
</body>
</html>

About this entry

You’re currently reading “Tips : Xhtml and CSS align forms label and inputs,” an entry on Make me pulse - Making a better life for web developer since 2006

Published:
06.27.07 / 1pm
Category:
Tips, Xhtml & CSS