Introduction
This article demonstrates using CSS to lay out an attractive XHTML form. This table-free form is simple to update, and highly accessible.
Demonstration
Here is the form - lightweight, semantic, and accessible. It's pretty simple - containing only a 3 input fields and a submit button.
Code
Here's the XHTML that makes up the form. In a real application, the form element would have an "action" attribute to define how it interacts with the server, but I left it off for simplicity in this demonstration.
<form> <label for="first">First Name:</label> <input type="text" name="first_name" id="first" size="20" maxlength="50" /><br /> <label for="last">Family or Last Name:</label> <input type="text" name="last_name" id="last" size="20" maxlength="50" /><br /> <label for="desc">Famous for:</label> <textarea rows="5" cols="20" id="desc">What is your claim to fame?</textarea> <br /> <input type="submit" value="Submit" /> </form>
And here's the CSS that gets the job done.
<style type="text/css">
body
{ font-family: Arial, Verdana, Helvetica, sans-serif; }
form
{ border: solid #FFFFFF 1px;
width: 28em;
margin: 5px;
padding: 5px;
}
label
{ width: 6em;
float: left;
text-align: right;
margin: .5em 1em;
clear: both;
}
input, textarea
{ font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: small;
margin: .5em 0;
width: 17em;
}
input[type="submit"]
{ float: none;
clear: both;
width: auto;
margin-bottom: 1em;
margin-left: 8em;
}
</style>
The magic with this form layout is that the label elements are floated left with a fixed width, and the text inside the labels is aligned right. This keeps the text aligned near the left side of the input fields. The input fields are not floated, but are pushed away from the left side of the form by the floated labels. The clearing line break ensures that none of the label or input elements stack up against each other.
Also note:
- The user-interactive fields (input and textarea) do not inherit font properties from the body. This is why input and textarea each have their own font family and font size declarations in the style sheet. Alternately, the input and textarea elements would inherit from font specifications to the form element.
- That fancy stuff on the selector for the submit button is the attribute selector. It selects any input elements with an attribute of type set to submit. It's very handy for separating the input and other buttons from checkboxes and radio buttons, but you will need to make some modifications to the form for support in Internet Explorer 6.
- You might want a method to override the Google Toolbar's auto-fill occasional highlighting of form fields. Something along the lines of Disabling IE's Image Resizing, but for forms, seems ideal. But, Chris Heilmann made the excellent point that your user chose to see the yellow highlighting by installing the Google Toolbar. I agree with this, and feel that part of accessible and flexible design is allowing a user to interact with your site on their terms.
IE6 Modifications
This has been tested in Firefox 2, Internet Explorer 7, and Safari 3. Unfortunately, the code presented above won't quite work in IE6 (and lower versions, presumably). This is because IE6 doesn't recognize attributes as CSS selectors. For this styling in IE6, you will need to select the Submit button in a different manner. My suggestion is to add an ID to the button, and then add some conditional CSS for IE6 to style the submit button:
Here is new XHTML with an ID on the submit button:
<input type="submit" value="Submit" id="submit" />
And conditional comments to select the submit button, and declare the same styling as in the normal stylesheet.
<!--[if lte IE 6]>
<style type="text/css">
input#submit
{ float: none;
clear: both;
width: auto;
margin-bottom: 1em;
margin-left: 8em;
}
</style>
<![endif]-->
Credits
This example is taken from Web Design in a Nutshell, 3rd Edition. Webcredible has a similar example of this simple CSS form, and Smashing Magazine provides some more advanced examples of form styling.
