Dreamweaver Forms Tips

Following are the steps to customize input boxes, list menus, submit buttons using Dreamweaver. The tutorial also teaches you to validate forms using Dreamweaver behaviors.

This tutorial will teach you 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.

For example see the form to understand how the validation works and the form objects are also customized with a background color and font When the Customizing form objects is done by using CSS style it is portable only in Internet Explorer.

1. Steps to be followed to customize the background color, input font and color for text boxes are as follows:

1. First you must set the background color and font for the text box. Then click on Window > CSS Styles to Open the Style window and click on the '+' icon to create a new style and name to the style as 'textboxstyle' and click OK. The font type, size, color and weight can be selected from the 'Type' category .The background color for the text box is set in the 'Background' category and after finishing click OK.
2. Then click Insert >Form Objects > Text Field to insert a text box.
3. To apply the style you must select the text box and select the style 'textboxstyle' from CSS styles windows. To view preview of the text box in internet explorer you must click File > Preview in Browser. (you can view this only in internet explorer)

2. Steps to be followed customize the background color and font for drop down Lists.

Follow the same step as for Customizing the background color, input font and color for text boxes and the only change is to create a style for the text box and set the style to the drop down list box.

3. Steps to be followed to create Validate Forms for the required fields:

1. First click Insert > Form to insert a new form and then three text boxes are inserted by clicking Insert > Form Objects > Text Field and named as name, e-mail and phone in the properties inspector.
2. Then click Insert > Form Objects > Button to insert a submit button.
3. The next step is to click Window > Behaviors to open the behaviors window. And after selecting the form click the '+' icon in the behaviors window and then select Validate Form.
4. In the pop-up window choose the text field that is to validated and select the validation and click ok.
5. Click on File > Preview in Browser to check the validation that you have performed.

4. Steps to create a custom submit button.

1. First create a submit button and then select background color and font for the button. Then click Window > CSS Styles to open the style window and a new style is created by clicking '+' icon and name it as 'buttonstyle' and click ok.
2. The font type, size, color and weight can be selected from the 'Type' category. The background color for the text box is set in the 'Background' category and after finishing click OK.
3. To apply the style you must select the text box select the style 'buttonstyle' from CSS styles windows. To view preview of the text box in internet explorer you must click File > Preview in Browser. (you can view this only in internet explorer)