Ten Ton Dreamweaver [Electronic resources]

Inserting Image Buttons

Rather than using plain buttons in your forms, you can customize your buttons to match the design of your site. Dreamweaver lets you insert any image you like and set it to control your forms.

Here's how to insert an image button:

1.

Select your form by clicking the <form> tag in the Tag Selector on Dreamweaver's Status bar.

The <form> tag in the Tag Selector will actually appear as <form# followed by the name that you gave your form when you inserted it.

2.

If it's not already on screen, open the Behaviors panel (choose Window > Behaviors).

3.

From the Add Behavior menu in the Behaviors panel, choose Validate Form.

4.

In the Validate Form dialog box that appears, select a text field from the Named Fields list.

[View full size image]

5.

If you want the selected field to be a field that the user must fill in, select Required for the Value option.

6.

For the Accept option, select the type of data that the field will accept.

Anything: Allows the user to enter any type of data in the field.

Email Address: Accepts only an e-mail address as an entry.

[View full size image]

Number: Allows only numbers to be entered in the field.

Number From: Accepts a number only if it falls within the specified range of numbers.

Noteworthy

7.

If you want to validate another text field, select it in the Named Fields list and repeat steps 5 and 6.

8.

When you're done, click OK.

The Behaviors panel displays the onSubmit event, with the Validate Form action. This means that the form will be validated when the user clicks the form's Submit button.

Controlling Form Objects with CSS

As you're inserting form objects, you may notice that when they're selected, the Property Inspector displays a Class pull-down menu. If you've created some custom Class CSS styles in your document, you can use this menu to assign a style to the form object. See where this is going? You can use CSS styles to tightly control the positioning and appearance of your form elements on your page. In fact, using CSS is the best way to control your forms.

For example, you may want to control the spacing around your form objects, or control the background or border color of your elements. Or you may want to redefine th89 <form> tag to control aspects of your entire form. Either way, using CSS to control your form and form objects is exactly the same as using it to control text or other elements on your pageit's all handled in the CSS Styles panel. You use the settings that are available in the CSS Rule Definition dialog box (which appears when you double-click a style in the CSS Styles panel), just as you do when controlling other objects on your page.

Just the Gist

About Forms

Forms let you collect information supplied by visitors to your site.

A form consists of two parts: what the user interacts with in the web browser, and an application or script that runs on your web server that handles submitted data.

For a form to work correctly, a back-end application or script must be set up. Consult your system administrator or Internet service provider for details.

Inserting a Form

Insert a form by choosing Insert > Form > Form.

Use the settings in the Property Inspector to determine how your form interacts with the application or script running on your web server.

Inserting Form Fields

Text fields allow users to type their own content directly on your form. To insert a text field, click the Text Field button in the Forms category of the Insert bar.

You can set text fields as single-line fields, multiline fields, or password fields.

Check boxes allow users to make multiple selections from a group of choices. To insert a check box, click the Checkbox button in the Forms category of the Insert bar.

Radio buttons restrict users to only one selection in a group of choices. To set a group of radio buttons, click the Radio Group button in the Forms category of the Insert bar, or insert them individually using the Radio Button button, also on the Insert bar.

Lists and pull-down menus work the same way; the only difference is their appearance. Lists appear as a scrolling series of options; pull-down menus appear as a drop-down list of options. To insert a list or pull-down menu, click the List/Pull-down button in the Forms category of the Insert bar.

File fields allow users to attach files from their computers when they submit the form. For a file field to work on your page, the application or script running on your web server must be able to handle uploaded files.

Reset and Submit buttons allow users to clear their forms or submit forms to your web server. You can also use Dreamweaver's behaviors to set many other commands. To insert a button, click Button in the Forms category of the Insert bar.

Set the options for your forms fields in the Property Inspector.

Ensuring That Your Form Is Completed Correctly

To ensure that your form is filled out as you intended, you can use Dreamweaver's Validate Form behavior. The behavior works only on text fields, as the other types of form objects don't allow users to add their own content.

To add the Validate Form behavior, select the <form> tag on the Tag Selector; then choose Validate Form from the Behavior panel's Add Behavior menu.