In Part 1 and Part 2 of this series, you explored styling and positioning form elements with CSS. You created navigation for your form elements to help with accessibility issues and discovered that it is possible to lay out forms with CSS as easily as you can with a table. Also in Part 2 you learned how to build on this knowledge and explore more advanced methods of positioning your form elements using CSS.

In Part 3 you will take this knowledge and once again expand upon it to create a two-column form layout.

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_part3.zip (ZIP, 2K)

Prerequisite Knowledge

• Styling Forms with CSS – Part 1: Accessibility and Form Element Styles
• Styling Forms with CSS – Part 2: CSS-Structured Forms

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 4

Next Page

About the author