The CSS way to style forms | Part One
HTML 4 gives us a variety of new form elements. There's the fieldset tag and the legend tag. The fieldset goes inside the form and encapsulates a set of form elements, drawing a border around them. The legend goes with the fieldset and is used to add a title to a set of form elements. There is also the label tag, which contains the label for a given input element.
Before we start, note that form elements, when styled, can herald very different results dependant on what browser and operating system you are using. If you don't like the sound of your elements rendering differently, you could always apply subtle effects that don't tend to vary much - like a border around your text areas or a change of font. Select boxes and submit buttons alter the most, so stay away from styling those too much if you're not happy with inconsistent rendering of you styles.
A typical form
A form consists of the form tag and it's associated closing partner <form></form>. Inside the form tag are the form elements, denoted by label-input field pairs. Sometimes there is a fieldset and legend. These are normally dependant on the user's preference.
Here is an HTML representation of a typical form, taken from my contact page:
<form id="contactForm" action="contact.php" method="post">
<fieldset>
<div class="row">
<label for="name">Name:</label>
<input name="name" type="text" id="name" />
</div>
<div class="row">
<label for="email">Email:</label>
<input name="email" type="text" id="email" />
</div>
<div class="row">
<label for="subject">Subject:</label>
<input type="text" name="subject" id="subject" />
</div>
<div class="row" style="margin-bottom:10px">
<label for="message">Message:</label>
<textarea name="message" id="message"></textarea>
</div>
<div class="row">
<input name="subcontact" type="submit" value="Go!" />
<input name="clear" type="reset" value="Clear" />
</div>
</fieldset>
</form>
</div>
In this example, I have floated the labels and input fields next to each other, and placed each pair in a div "row", to make sure that only two elements are ever present on one line. Containing your label-input pairs in individual rows is also useful if you want to apply margins and padding between each row of elements, or a border.
Styling the form tag
A good way to style a form is to give it an id - make it something useful which describes the element's function – and then reference this in your stylesheet. Above, I have given my form an id of contactForm. Note that in XHTML 1.0 the name attribute is only deprecated for: a, applet, form, frame, iframe, img and NOT input, submit or select.
In CSS we would reference our form like so:
#contactForm {
...
}
Any styles we want to be directly applied to the form tag would go here.
Styling labels
When styling labels, I find it easier to use the Type Selector. The Type Selector targets all instances of a certain element.
CSS Example
By using label after #contactForm I am referencing all of the labels inside #contactForm.
#contactForm label {
display:block;
float:left;
padding:4px;
background-color:#cccccc;
width:100px;
border-bottom:3px solid #7bc1db;
}
Now, all of the labels inside #contactForm will look like this:
This example uses the "name" label in my form, but all labels will be styled just like this.
Styling text fields
If you wanted a universal style for all text fields, you might think that the way to do this is to target the input element, in CSS. This is perfectly fine way of going about the process...but here's the snag: the input type selector will target all input elements on a page...which means, submit buttons too...which may not be your desired result. To style only the text fields, the best thing to do is to create a separate class called .textField (or whatever you want, as long as it is appropriate).
.textField {
...
}
If there are certain properties that wil be the same for all of your input elements, such as font-family, or colour, then the input type selector can be handy:
input {
font:100% Verdana, Arial, Helvetica, sans-serif;
color:#333333;
}
This will make all input elements on your site Verdana 100% and dark grey.
Got any questions or comments? Feel free to mail me @ helen@alternategateways.com.
Back to resources.