Friday 10 June 2011

CSS: Aligning form fields on a page


In the following example, I have used ASP.NET controls as I have lifted this from a project I have been working on.
If you are not familiar with ASP.NET, when the browser renders these server controls, the controls are rendered down to simple HTML tags:

label (asp:Label)
input (asp:TextBox)
span (asp:RequiredFieldValidator))



HTML/ASP.NET Code
<fieldset class="regForm">
<div class="field">
    <asp:Label ID="lblFirstName" AssociatedControlID="txtFirstName" runat="server" Text="Firstname" />
    <asp:TextBox ID="txtFirstName" runat="server" />
    <asp:RequiredFieldValidator ID="rfvFirstName" runat="server" ControlToValidate="txtFirstName" SetFocusOnError="True" ValidationGroup="vgRegister" ErrorMessage="*" />
</div>
<div class="field">
    <asp:Label ID="lblSurname" AssociatedControlID="txtSurname" runat="server" Text="Surname" />
    <asp:TextBox ID="txtSurname" runat="server" />
    <asp:RequiredFieldValidator ID="rfvSurname" runat="server" ControlToValidate="txtSurname" SetFocusOnError="True" ValidationGroup="vgRegister" ErrorMessage="*" />
</div>
<div class="field">
    <asp:Label ID="lblEmail" AssociatedControlID="txtEmailAddress" runat="server" Text="Email" />
    <asp:TextBox ID="txtEmailAddress" runat="server" />
    <asp:RequiredFieldValidator ID="rfvEmail" runat="server" ControlToValidate="txtEmailAddress" SetFocusOnError="True" ValidationGroup="vgRegister" ErrorMessage="*" />
</div>
</fieldset>



CSS Code
fieldset.regForm div {
    clear: both;
    padding-top:0.2em;
}
fieldset.regForm label {
    display:inline;
    padding-top:0.2em;
    text-align:right;
    margin-right:0.5em;
    float:left;
    width:25%;
}

No comments: