By aligning form elements and their labels, you can make a form easier to understand for people with cognitive disabilities. The use of Cascading Style Sheets (CSS) for layout is a best practice in modern web design. In this tutorial, you will learn how to improve form usability by using only CSS to align form elements and labels.

To use CSS to align form elements and labels in Dreamweaver:

  1. With the Dreamweaver document that includes the form open, select the New CSS Rule button in the CSS Styles panel. If the panel is not visible, choose Window, CSS Styles.
    New CSS Rule button in Dreamweaver Styles panel.
  2. Select Compound or Tag for the selector type and name the selector “label”.
    New CSS Rule window.
  3. Choose OK to open the CSS rule definition window.
  4. In the Box category, enter the following values:
    CSS rule definition window.

    • 5 em for the width (use the menu to the right of the text field to select em as the unit of measurement).
    • left for both the Float and Clear values.
    • 5 pixels for the right padding. You will first need to deselect “Same for all” before you can enter a value for just the right padding. Again, use the menu to the right of the text field to select pixels (px) as the unit of measurement.
  5. Choose OK to close the CSS rule definition window and return to your document.
  6. Make sure to save your changes by choosing File, Save.

To preview the web page with your web browser, choose File, Preview in Browser. Your form elements should now be nicely aligned along their left edge, with 5 pixels of padding between the form element and its label.

Bookmark and Share