Accessibility

Table of Contents

  1. Introduction
  2. Getting Started
  3. Default Form Field Appearance
  4. Creating and Linking Your Style Sheets
  5. Setting Form Accessibility Options
  6. Styling the Form Elements
  7. Inserting Additional Form Elements

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

Getting Started

All the form elements you will use in this series are available from the Forms tab on the Insert bar (see Figure 1). If it is not visible, select Window > Insert.

Forms tab on the Insert bar

Figure 1. Forms tab on the Insert bar

Note: You may have the Insert bar set as a menu instead of tabs. You can change this setting by selecting Show As Tabs at the bottom of the Insert bar's menu. Otherwise, just select Forms from the menu. You will see the same form elements.

From left to right, the icons are for the following elements:

  • Form
  • Text field
  • Hidden field
  • Text area
  • Check box
  • Radio button
  • Radio button group
  • Select list
  • Jump menu
  • Image field
  • File field
  • Button
  • Label
  • Field set

Quite a few options there!

It is worth mentioning that all form elements should be within form tags. It is the form that provides the functionality for the user's interaction; it allows the form to do the job you designate to it.

Now that you have seen the form elements and know how to access them in Dreamweaver 8, you can begin to discover how to style your forms and their elements to ensure that they blend in with the websites you design.

Page 2 of 7
Previous Page
Next Page