Webmaster tips » CSS

Nov 2, 2009
WebAssist

Styling Forms with CSS

Average rating:
  • 3 out of 5 Stars
Rate this article

In many ways, forms are the real workhorses of the Web, but that doesn't mean they have to be plain. Until CSS use became prevalent, little could be done to alter the way forms and form elements looked on the Web. Standardizing text field sizes between PC and Macintosh was a problem because the different operating systems interpreted character width differently; moreover, the field sizes may vary from browser to browser.

CSS form design gives the designer much more flexibility, both to integrate and isolate the form and form elements. Text fields, for example, can take on a shade of a site's background color or adopt the same typeface used on the page. Similarly, you can draw attention to the form itself by giving it a contrasting background; this enables you to format lengthy drop-down lists for easy reading.

Encompassing the Form

The <form> tag is a containing element that, like the <div> tag, is not rendered by default. Both tags, in fact, can be styled with CSS - you can even position a form on the page via CSS declarations. Browser support varies for some of the more esoteric CSS properties applied to the form tag, but more common attributes such as background color and border are rendered properly in most cases. Best of all, if CSS does not support certain attributes, these attributes are just ignored and the form renders plainly.

Frequently, a Web page only contains a single form. In these situations, styling the <form> tag itself will have the desired results. For example, this CSS rule gives the entire form a bright orange background and a blue border:

form {

background: #FF9900;

border: thin solid #0000FF;

padding: 10px;

}

Padding is added to move the form elements in from the edges. Should your page contain more than one form and you want to style each one differently, create a CSS ID selector for each form. In this situation, choose the advanced selector in the New CSS Rule dialog box and enter a unique ID - such as form#topform or form#bottomform - in the Selector field. Also set the ID of the form tag when using this method.

Altering Input Fields

One way in which the <form> and <div> tags differ in regard to CSS is in the matter of inheritance. Elements within a form do not inherit the CSS properties of the form, but elements within a <div> tag do inherit the div's CSS attributes. You must, therefore, take another route for styling all the text fields in a given form. The best way to affect multiple form elements all at once is to style the <input> tag. You may recall that the <input> tag is used to create text fields, radio buttons, checkboxes, and Submit buttons. For example, this CSS rule gives all the input elements a uniform background color as well as a specific color, font, and size for the text fields:

input {

background-color: #F5F5F5;

color: #660099;

font: 10px Verdana, Arial, Helvetica, sans-serif;

}

CSS styles the text fields for initial text as well as text entered by the user. Tip: Remember that a multiline text field is really a different tag <textarea> than the single-line text field. You have to create a CSS rule for both <input> and <textarea> tags.

One of the best uses for CSS and text fields is setting the width. This method is far more flexible and responsive than using the Char Width field on the Property inspector for each individual text field. It is best to set the width on a CSS class rather than alter it directly in the CSS rule for the input tag. Why? The width setting not only affects all the single-line text fields, but it also alters checkboxes and radio buttons - which are also input tags. After the CSS rule is defined, set the class of a selected text field from the Property Inspector.

Distinguishing Lists and Menus

The select list/menu object is composed of two tags: <select> and <option>. The <select> tag is the overall container for the list items; use <select> to style the width, typeface, and font size of all drop-down lists on the page uniformly. Individual list items can be styled by setting a class on the separate option tags. Although this operation must be performed by hand and is somewhat tedious, it does open the door to many possibilities.

If you have a very long drop-down list that includes a wide-range of items organized by category, with judicious CSS styling, main category headings can be in one color and subitems in another.

Changing Labels and Legends

A form is more than a collection of text fields and checkboxes; labels play an equally important role in form organization and usability. Form labels are often applied in one of two ways. The standard technique is to place most of the labels in a single column of a table, with the form elements in another. Designers are also increasingly using the <label> tag as a means of enhancing accessibility. A Dreamweaver CSS methodology is available for whichever route you take when labeling your forms.

In a situation where all the labels are arranged in a table column, it's best to create a CSS class for your labels and apply it to the <td> tags. The most efficient way to do this is to first select the column containing the labels and then choose the desired class from the Style list on the Property inspector. Dreamweaver applies the selected class to each of the <td> cells in the column.

If your layout uses <label> tags, CSS control is even easier. Add a specific CSS style for the <label> tag to create a uniform appearance for all your labels. Note that you may still need to adjust the dimensions of the label column separately because setting the width in CSS for the <label> tag has no effect.

Two other form-related tags - <fieldset> and <legend> - are available for CSS styling. As described earlier in this chapter in the sidebar “Grouping Form Controls,” the two are used together to visually associate related form elements. Style the <fieldset> tag to alter the outlining border or add padding from the edge of the border. Change the <legend> style when you want to give it a separate background color and/or border.

Highlighting Focus

Want to spotlight the interactivity of a form? CSS includes a pseudo-element selector (so called because it is valid only when an element is in a particular state) that takes effect when a form element is selected. The CSS selector is :focus* and it works with <input>, <select>, and <textarea> tags. To create a :focus selector, follow these steps:

  1. Select New CSS Rule from the CSS Styles panel.
  2. In the New CSS Rule dialog box, select the Advanced selector option.
  3. Enter the name of the tag you want to affect followed by :focus in the Selector field. For example, if you wanted to alter all the text fields, radio buttons, checkboxes, and buttons when they receive focus, enter input:focus.
  4. Click OK to close the New CSS Rule dialog and open the CSS Rule Definition dialog.
  5. Choose the desired styles from the various categories and click OK when you're finished.

Preview the page in a compatible browser such as Mozilla Firefox, Netscape 6 or better, Safari, and so on to experience the CSS changes.


* Unfortunately, the :focus selector is not supported in any version of Internet Explorer, as of this writing. You can, however, simulate the effect by triggering JavaScript functions with the onFocus() and onBlur() events that manipulate the class attributes.

Print! Print this article   Bookmark:

About The Author
WebAssist helps web developers and designers build better websites faster with Dreamweaver extensions, CSS templates, and tutorials as well as pre-built PHP scripts and solutions.
Rate This Article
How would you rate the quality of this content? Currently rated: 3 out of 5 stars. 3 people have rated this article.
Use your mouse pointer to select as many stars as you want, and press the left mouse button to vote.
  • 3 out of 5 Stars
  • 1
  • 2
  • 3
  • 4
  • 5
Other CSS Articles
Rating: 4.5 stars
10 CSS Tips from a Professional CSS Front-End Architect by Ryan Parr (Jul 22, 2009)
I have been working with web standards based design for many years now and I see many rookie mistakes. When newbies get started with CSS/XHTML based web design, most of their work is focused on just getting the page to look like the Photoshop comp...
Rating: 5 stars
9 Advantages of using CSS by Grace Alexa (Apr 11, 2008)
CSS style sheets have made it easier to handle web pages during web development. CSS or Cascading Style Sheets as the name suggests is a style sheet that allows you to easily link to other documents in your website...
Rating: 3.2 stars
13 Reasons Why CSS Is Better than Tables by Matt Jurmann (Apr 8, 2008)
For the past few days, we've been scouring the web searching for the top 13 reasons why Cascading Style Sheets (CSS) are superior to tables when designing a website. Some web designers swear that tables are better than CSS, while others believe that tables are ancient history and CSS is the only real solution to coding a web site's layout...
Rating: 5 stars
Planning your CSS - the definitive guide by Brigitte Simard (Mar 3, 2008)
The more we rely upon CSS, the larger and more complex stylesheet files become. Planning and organising your stylesheet is essential to creating a lean, manageable website. There are many ways of organising CSS code but the following are best practice...
Rating: 5 stars
How to beat Internet Explorer when it comes to CSS by Pete Taylour (Aug 27, 2007)
I am guessing an article on this subject has been posted prior to this one, I should hope a few have! However I hope this will provide a refreshing angle on the subject and branch to some other interesting bits of stuff...