Dreamweaver Article

Styling Forms with CSS – Part 2: CSS-Structured Forms

In Part 1 of this series you learned to style a selection of form elements. You looked at the label tag and its for attribute, and you saw how you could apply simple structuring for the layout of your form simply by changing the display type of the label element from an inline element to a block-level element.

To enhance your users' experience further, you learned how to set access key and tab index navigation. To complement this functionality, you added focus pseudo selectors to alter the appearance of your form elements as your users move from one element to another.

In Part 2 of this series, you will build on this knowledge and explore more advanced methods of positioning your form elements using CSS. You can use the HTML and CSS documents you created in Part 1 or else download the files from the sample download link and continue with Part 2.

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

Prerequisite Knowledge

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

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