The CSS way to style forms | Part One
Published on October 24th 2007.
Updated on March 24th 2010.
In this tutorial, we will discuss how to style up your form elements. From fashionable fieldsets to bold buttons, you'll be creating fancy forms in no time!
Warning!
Before we start, for those of you who aren't partial to your elements rendering differently across browsers: when styled, form elements can herald very different results dependant on what browser and operating system you are using. If you don't like the sound of that, you can always apply subtle effects that don't 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 these too much if you're not happy with inconsistent rendering of you styles.
A typical form
A form is denoted by the form tag. Inside the form tag is the fieldset, which groups your form fields in a logical fashion. Inside the fieldset is the legend (if you want one) and the form elements, denoted by label-input pairs.
An example of a typical form
<form id="contactForm" action="contact.php" method="post">
<legend>My Form</legend>
<fieldset>
<label for="name">Name:</label>
<input name="name" type="text" id="name" />
<label for="email">Email:</label>
<input name="email" type="text" id="email" />
<label for="subject">Subject:</label>
<input type="text" name="subject" id="subject" />
<label for="message">Message:</label>
<textarea name="message" id="message"></textarea>
<input name="subcontact" type="submit" value="Go!" />
<input name="clear" type="reset" value="Clear" />
</fieldset>
</form>
The form tag
The form tag is used to create a form which is used to enter in data. It has one mandatory attribute action which specifies the action of the form. This is usually the page that is called when the form submits, which processes the data entered into the form.
There are two other attributes which you really should use. The first is the ID attribute, which specifies the ID of the form. Your form will need an ID if you want to incorporate JavaScript validation, and you may want one for styling your form up - especially if you have multiple forms on one page.
The last, and more important attribute is the method attribute. You should always include this attribute, as it tells the form how to submit the data the user has entered: either via the POST or GET method. If you don't include a method, the method defaults to GET, which isn't very safe if you're passing information you don't want to be tampered with. GET has its uses (in pagination, or in assigning harmless page values) but not for emailing data, and especially not for saving data into a database or querying a database. It's too easy to manipulate as the form values are displayed in the URL bar. Even with sold validation and data sanitisation (striping your data of anything that can screw your system up) I still wouldn't use GET on any forms that are associated with my databases.
The form tag and the name attribute in XHTML
Way back when, everyone was placing a name attribute on their forms. In XHTML, you are no longer allowed to do this. If your form contains a name attribute, your page will not validate.
Read more about the name attribute at the W3C's site.
The fieldset tag
The fieldset tag is used to group your fields into relevant
XHTML and the Strict and Transitional doctypes with fieldsets
If you are coding in Strict, the fieldset tag is necessary for the page to validate, but it is not necessary in Transitional.
The legend tag
The legend tag is used to give your form a legend, which describes its purpose. The legend is placed in the fieldset tag and is italicised, by default.
The label tag
The label tag denotes a label, which is associated with a form field. You always have one label per field, and you never use a label unless it has an accompanying field. They both go together.
It's useful to state which field your label belongs to by using the for attribute, but no big deal if you don't.
The input tag
The input tag is used to create a field in which the user can input data. Its main attribute is type, which denotes the type of input element it is. There are ten types of input values:
- Button - renders a button, which, unlike the
submitvalue, does not automatically submit a form; you must use JavaScript for that. - Checkbox - renders a checkbox.
- File - renders a field and a browse button, which allows you to browse your computer for a file to upload.
- Hidden - renders a field that is not visible on screen, and only visible in the page source; this is useful for passing variables that you don't want the user to see, between pages.
- Image - renders an image.
- Password - renders a password field that displays its contents as *s. Always use this when dealing with password values as it's more secure than using a text field.
- Radio - renders a radio button.
- Reset - renders a button which clears the form data.
- Submit - renders a button which submits a form. Very useful.
- Text - renders a text field that a user can type data into.
Input fields, the name attribute and PHP
If you're coding in PHP you must place a name attribute on your input fields otherwise no data will be passed to your PHP code.
Styling the form tag
Finally, onto the good stuff! One of the things I always do with the form tag is remove the margins and padding. Here, we'll look at two examples of doing this: one using the ID selector and the other using the type selector (which targets all instances of a given element).
// Approach one, using the ID selector (assuming you have given your form an ID of #contactForm)
#contactForm {
margin:0;
padding:0;
}
// Approach two, targeting the form using the type selector
form {
margin:0;
padding:0;
}
Use either one of these methods to apply styles to your form. Now, when the page loads, our form will have no margins or padding. I always thought margins and padding were overrated anyway!
Styling labels
When styling labels, I find it easier to use the descendant selector combined with the type selector, as I tend to use the label tag a lot. I give my form an ID so I can create custom styles for my labels - we'll call ours contactForm again - and use those two selectors to target all the labels in my form.
CSS Example
#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:
All of my labels will now look 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, we can use the the attribute selector and create a baclup class called .txtField for older browsers..
input[type=text], .textField {
...
}
The attribute selector consists of the element and attribute you wish to target. The attribute goes inside square brackets, with no quote-marks.
Don't give up on the type selector just yet
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:#333;
}
This will make all input elements on your site Verdana 100% and dark grey.
