Making a Sharp Dressed Web Form – Thin ASP.NET 8
The past few months I have been trying to learn more about user experience and design patterns. This has led me to learn more about how to use the tools available to me to provide better user experiences, namely CSS and JQuery. I have been writing quite a bit about JQuery stuff lately, so today I am going to shift gears a little and talk about leveraging some CSS layout goodness to lay out a web form.
First though I want to talk quickly about form layout choices. I like an article written by Luke Wroblewski about Web Application Form Design. I am going to summarize the article. There are essentially 3 form layout types; vertical labels, left-aligned labels and right-aligned labels. I tend to like left-aligned labels and Luke seems to favor that style as well. It has two key advantages in the labels are easy to scan and there is a reduction in vertical space requirements. It does have a disadvantage because the labels have a separation from the corresponding input field.
Traditionally forms have been laid out with Tables, as has just about everything on web pages. While I am still a fan of using tables to perform layout in a web page, I find my self relying on it less and less these days. As with most things there is a harmonious balance that needs to be found between tables and CSS layouts. The balance comes from weighing the extra time to accomplish a layout with CSS versus tables. But I am not going to get into that debate today. Instead I want to show how to build a web form using CSS layout techniques.
The reason why you want to try and use CSS to define as much of a web page’s appearance instead of element attributes is separation. By this I mean you can provide a more consistent feel to a site by driving the appearance and layout via CSS. If you have looked into this philosophy you have no doubt experienced CSS Zen Garden as an example playground of this principle. It also means your page should download and render slightly faster. There are real trade offs, that many CSS zealots ignore, which primarily much more time to complete. But with practice this time is reduced.
In my opinion there are three key concepts you have to grasp to be able to leverage CSS layouts effectively; the CSS Boxing Model, the differences in the boxing model between browsers (and this is the case will all browsers, not just Internet Explorer) and CSS selector syntax. I will use some CSS selectors for this article, but not much on the boxing model implementations.
Lets continue working with the contact form I have been using for the past few months in my Thin ASP.NET series. So far the form has been laid out in a series of P elements. Inside the P elements is a Label element, which is associated with a text Input field. And of course if the field is required there is a red star image, etc.
<label id="lbllastName" for="LastName">
Last Name :
<input name="LastName" type="text" maxlength="25" class="required" /><em><img src="images/required.png"
So far that has been acceptable, but now we want to start extending this to a more ordered format. As I have started to adopt CSS layout methodologies in my common practices I have really rediscovered lists, both ordered <ol> and unordered </ul>. For most cases there is really no difference between the two. For the contact form I chose to go with an ordered list. Each field has a dedicated list item <li> that now holds the label and input or select elements.
<label id="lblFirstName" for="FirstName">
First Name :
<input name="FirstName" type="text" maxlength="25" class="required" /><em><img src="images/required.png"
alt="required" /></em> </li>
This pattern continues right down to the submit button. To make a more complete form I have also chosen to add a Reset and Cancel button to the form. This list of buttons is contained inside of another list that will ultimately be displayed horizontally, more on that later.
<button id="btnReset" name="btnReset" type="button">
<button id="btnReset" name="btnReset" type="reset">
<button id="btnSubmit" name="btnSubmit" type="submit">
Of course it has become pretty common to wrap the form in a Fieldset to set it off from the rest of the page. The Fieldset works with the Legend element to render a title on the form that can be formatted using CSS. Making the wrapper and the Legend pop effectively it must be styled. This requires the use of an element selector, in this case fieldset and legend for each of the element types. Since we only have one of each on the page we can just set it one. As I progress through the CSS I will expand selector syntax.
The Fieldset sets a margin of 20 pixels at the top and the bottom of the form and 5 on each the left and right. The border rule tells the browser to render the border of the fieldset as a dark grey (#333333) thin line. Next the padding or inside spacing of the box is set to 10 pixels for the left and right sides. This means the content will be forced to an internal margin of 10 pixels on each side. I set the background color to a grey color. Finally the width of the fieldset is set to 640 pixels.
margin: 20px 5px 20px 5px;
border: thin solid #333333;
font-family: arial, Helvetica, sans-serif;
border: thin solid #999999;
padding: 2px 5px 2px 5px;
The legend uses margins and padding too, but since it is going to display text I set the font properties; family, size, weight and color. Nothing earth shattering there, but I am using em for font size and not pixels. This is the preferred method for setting font sizes because each browser will scale better. I also set a dark background color with a slightly lighter border.
Now to set the style for a Label. The labels need to be left-aligned, so I chose to clear any float they may inherit from a parent element. The next important setting is the width, which I set to 125px. This is important because this will cause all the labels to have that width and ultimately cause the associated Input/Selection elements to align along a consistent line.
The next style defines the look of the text input fields. Again floating left, a margin of 10 pixels on the bottom and a consistent 150 pixel width. This makes them all line up just to the right of their associated labels. To make this work against just text inputs I have used a slightly more advanced CSS selector, one that defines the type attribute for a text input.
Now to define the layout of the list itself. First the ordered list, which is designated with a selector that selects any <ol> in the element dMakeContact, or the wrapping DIV element of the form. I chose to create some inside padding to keep the form elements from touching the edges. To avoid displaying a list marker, like a dot or a circle the list-style is set to none. Finally the display type is set to inline-block, I found this to be helpful with earlier versions of IE, otherwise the layout is all out of order.
padding: .2em .2em 0 .2em;
The <li> that compose the list have a few unique style rules defined. I like to place a little padding at the top and the bottom to help space items out. It think this makes the form more readable. Setting the display to inline-block is something I found ensures the list displays as desired in older versions of Internet Explorer and some other older browsers.
#dMakeContact ol li
If your form contains sub groups, it is pretty common to enclose them inside additional lists and sometimes even fieldsets. When you do this you can define additional rules to control the way these elements are rendered as well.
#dMakeContact ol li ul
margin: 4px 20 4 150;
#dMakeContact ol li ul li
Finally the rules to control how the form’s buttons are rendered. First a default rule for any button, it sets a border style, the colors for each side of the button, text color and the background. The next rule defines what the submit button looks like. Notice I defined slightly different color scheme for this button. This provides some contrast between the button types, making it apparent to the user what button submits the form.
#dMakeContact ul li button
border-color: #CCCCCC #5C5C5C #4D4D4D #999999;
margin: 5px 25px 0px 5px;
#dMakeContact ul li button[type=submit]
border-color: #CCCCCC #5C5C5C #4D4D4D #999999;
margin: 5px 25px 0px 5px;
Don’t forget you can download the latest version of my Contact Form web site.