Tips for customizing input boxes, list menus, submit buttons. And learn how to validate forms using Dreamweaver behaviors.

you can learn how to:

• Customize the background color and font properties of text boxes
• Customize the background color and fonts of drop down lists
• Validate forms for Required fields
• Validate Email Addresses
• Validate Numbers
• Create a custom submit button - change the background color and font

To see how the validation works you can try the form on the right. The form objects have customized with a font and a background color.

Tip: customizing form objects is using CSS styles!

Note: Customizing form objects using CSS styles works only in Internet Explorer and not in Netscape.

Customize the background color, input font and color for text boxes

• First create a style with background color and font that you would like for the text box. Open the Style window Window > CSS Styles. Create a new style by clicking on the '+' icon from the bottom. Name the style as 'newtextboxstyle' and click on OK. Select the font, size, color and weight in the 'Type' category. Select the background color in the 'Background' category Click on OK.
• Then insert a text box by clicking on Insert > Form Objects > Text Field.
• Finally apply the style to the text box. Select the text box and from the CSS Styles select the 'newtextboxstyle'. Once its applied click on File >Preview in Browser to preview the text box in Internet Explorer.

Please Note: You will be previewed in Internet Explorer only.

Customize the background color and font for drop down Lists

This is same like mentioned above. Create a style and apply to the drop down list box.

Validate Forms

1. Iinsert a form by clicking on Insert > Form
2. Insert 3 text boxes for name, email and phone. Choose Insert > Form Objects > Text Field to insert 3 text boxes. Name the first text box 'Name', the second 'Email' and the third 'Phone' in the Properties inspector.
3. Insert a submit button by clicking on Insert > Form Objects > Button
4. Open the behaviors window by choosing Window > Behaviors. Select the form tag and click on the '+' icon in the behaviors window. Choose Validate Form
5. From the pop-up window choose the text field you need to validate and select the required validation.
   • Select Required for Name
   • Select Email for Email Address
   • Select Number for Phone
6. Click on OK.
7. Preview the validation by clicking on File > Preview in Browser

Create a custom submit button

1. Create a style with background color and font for the submit button. Open Window > CSS Styles. Create a new style by clicking '+' icon found at the bottom. Name the style as 'newbuttonstyle' and click OK. Select the font, size, color andweight in the 'Type' category. Select the background color in the 'Background' category. Click OK
2. Then insert a text box by clicking on Insert > Form Objects > Text Field.
3. Apply the style to the text box. Select the text box and from the CSS Styles window select the style 'newbuttonstyle'. Once its applied to the text box click on File >Preview in Browser to preview the text box in Internet Explorer.
   Please Note: You will be previewed in Internet Explorer only.