ASP.Net forms without tables
After hearing Chris Wallace espouse the benefits of dropping table based layout in favor of CSS, I decided to read some of his recent links. Since I'm starting on a new ASP.Net implementation, I figured it would be a good time to try the techniques out on some new forms. Most of the references indicate how to accomplish table-less forms with plain HTML, but do not indicate how to do it with ASP.Net. Luckilly, this is relatively easy to accomplish as I will demonstrate.
To begin, I want to create a simple form to take a username, password and new password. I begin with the following ASP.Net code:
<form id="form1" runat="server">
<asp:Label ID="lblUsername" runat="server" Text="Username"></asp:Label>
<asp:TextBox ID="txtUsername" runat="server"></asp:TextBox><br />
<asp:Label ID="lblPassword" runat="server" Text="Password"></asp:Label>
<asp:TextBox ID="txtPassword" runat="server"></asp:TextBox><br />
<asp:Label ID="lblPasswordNew" runat="server" Text="New Password"></asp:Label>
<asp:TextBox ID="txtPasswordNew" runat="server"></asp:TextBox><br />
</form>
This renders as follows:
Username
Password
New Password
(editor's note, it appears CS strips the textboxes in the above code. Take my word for it that the textboxes are not aligned if you can't see them.)
In order to turn this into a version which lines up the textboxes, we need to make 2 modifications. First we need to set the AssociatedControlID of each asp:Label object to the corresponding TextBox. Since the textbox associated with the lblUsername is txtUsername, we set the AssociatedControlID of the lblUsername label to "txtUsername". Repeating this for each of the label/textbox combination in our code yeilds the following:
<form id="form1" runat="server">
<asp:Label ID="lblUsername" runat="server" Text="Username" AssociatedControlID="txtUsername"></asp:Label>
<asp:TextBox ID="txtUsername" runat="server"></asp:TextBox><br />
<asp:Label ID="lblPassword" runat="server" Text="Password" AssociatedControlID="txtPassword"></asp:Label>
<asp:TextBox ID="txtPassword" runat="server"></asp:TextBox><br />
<asp:Label ID="lblPasswordNew" runat="server" Text="New Password" AssociatedControlID="txtPasswordNew"></asp:Label>
<asp:TextBox ID="txtPasswordNew" runat="server"></asp:TextBox><br />
</form>
This changes the rendered source HTML from
<LABEL id=lblUsername>Username</LABEL>
<INPUT id=txtUsername name=txtUsername>
to
<LABEL id=lblUsername for=txtUsername>Username</LABEL>
<INPUT id=txtUsername name=txtUsername>
Notice the addition of the "for" attribute on the label tags. Once we do this, we get the added benifit of giving the text box the focus when the user clicks on the associated label. In addition, DotNet will dynamically set the value for "for" if the rendering causes the id value of the input tag to be dynamically changed, as is the case with UserControls and other similar cases.
In order to finish our job of aligning the text boxes, we need to add a stylesheet to the page. For this simple example, we will add the following tags:
label, input{float:left;width:200px;margin-bottom: 3px;}
label{text-align:right;width:100px;margin-right: 3px;}
br{clear:left;}
There are two key components of these style declarations which enable the magic of table-less forms. First, notice the float:left attribute of the label and input commands which forces the associated elements to line up. Second, we clear the float on each new line <br /> tag using the clear:left style. In addition, I made a couple minor tweaks to facilitate text alignment. By combining the two changes to our ASPX and css, we can now render the page with the textboxes lined up without the need of tables. Since I can't post the final rendering inside of Community Server, I will point you to a similar rendering of this type of code at http://www.picment.com/articles/css/funwithforms/step2.html.
The result is not only more standards complient, but also reduces the size of the page transmission as we have effectively eliminated all of the <table><tr><td>etc... declarations both in our source and rendered code. This also makes it easier for us to focus on the business needs of the page and less on the actual lay-out implementations.
I realize this is a relatively simplistic discussion, but hopefully will serve as a starting point for those wishing to move towards more standards complient sites. I do not claim to be an expert in this area, so I welcome clarification from those more familiar with CSS, particularly in cases where tweaks need to be made for browser compatibility issues. I have tested this technique with both IE 6.0 and Mozilla. If you are using Opera, Safari or Lynx, YMMV.