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
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
- Iinsert a form by clicking on Insert > Form
- 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.
- Insert a submit button by clicking on Insert > Form Objects > Button
- Open the behaviors window by choosing Window > Behaviors. Select the form tag and click on
the '+' icon in the behaviors window. Choose Validate Form
- 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
- Click on OK.
- Preview the validation by clicking on File >
Preview in Browser
Create a custom submit button
- 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
- Then insert a text box by clicking on Insert >
Form Objects > Text Field.
- 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.
|
