Dreamweaver Article

Styling Forms with CSS – Part 1: Accessibility and Form Element Styles

Forms are the lifeblood of the Internet and the websites we build. Forms and their elements provide us with the ability to bring our websites to life. From simple contact forms for generating e-mail data to billing information forms in shopping carts to content management system (CMS) forms for making content changes to websites, forms lie at the heart of most of the interaction we see on today's websites.

While the interaction provided by forms varies greatly—as I have just mentioned—the styling and layout of forms and their elements is the same no matter what the form is designed to accomplish. It is the styling of the forms elements and the structuring of forms that I will be covering in this series. Needless to say, the goal will be to create accessible forms and complete the layout using various cascading style sheets (CSS) techniques.

Requirements

To complete this tutorial you will need to install the following software and files:

Dreamweaver 8

• Try
• Buy

Third-Party Software

• Firefox 1.5
• Opera 8.5

In this tutorial you will need to download and install the desktop version of the Opera browser (not the mobile version).

Sample files:

• styling_forms_part1.zip (ZIP, 2K)

Prerequisite Knowledge

You will need a certain level of understanding of CSS to complete this series, although I will explain each step in the process as I go along. You can glean detailed information about the various techniques from other tutorials in the CSS Topic Center. I'll also provide links to this information where appropriate.

Page 1 of 7

Next Page

About the author