Adding Buttons


Forms often have two buttons: one to send the form data (Submit), and one to clear the form (Reset). The Submit button tells the browser to send the data. The Reset button clears all the information from the fields on the page.

Note

A form created for a basic search function usually has only one Submit button, which is often labeled Search or Go.


1.

Place the insertion point in the text Send Your Answers in the third fieldset. Use the tag selector to select the <legend> tag, press the right arrow key once, and press Return (Macintosh) or Enter (Windows). Click the Button button in the Forms category on the Insert bar.

Tip

You can also choose Insert > Form > Button.

The Input Tag Accessibility Attributes dialog box opens.

2.

Leave the Label text field blank and select No label tag in the Style area. Leave the Position options as they are and leave the remaining fields blank. Click OK.

A Submit button is placed in the form, and the Property inspector displays Button properties. The accessibility attributes are unnecessary because the label is on the button itself. Because a Submit button is the default, you do not need to change any of the options for this button.

3.

Position the insertion point to the right of the Submit button. Click the Button button on the Insert bar and repeat Step 2 to set the accessibility attributes to the same value that was used for the Submit button.

A second Submit button is placed in the form. The only difference is the namethis button is called Submit2 because no two buttons can have the same name. The only form objects that can have the same name are radio buttons that are in the same group and checkboxes that are in the same group. The button you are working with in this exercise is different because it cannot be grouped with other buttons and it will have its own action assigned to it in the next step.

4.

With the second Submit button selected, choose Reset Form from the Action options on the Property inspector.

The text in the Label text field automatically changes to Reset. The action of this button causes all text fields, checkboxes, and radio buttons to clear and revert to their original state (when the page was first loaded in the browser).

The third Action option is None. Unlike Submit and Reset, the None button option has no action attached to it. It can be used in conjunction with a script to perform another task. A JavaScript routine, for example, can be used to perform calculations such as totals or interest and return the end value to the user.

5.

In the Label text field, replace Reset by entering Clear Form. In the Button Name text field, change the default name to reset.

It is a good idea to name your buttons clearly, with consideration for your users' expectations. Submit and Reset are standard form-button labels that people understand because of their widespread use. Take care with the placement of the Reset button and make the label obvious so that visitors do not accidentally click it when they are trying to submit the form.

Tip

You can use images in place of the standard buttons by using the image field button on the Property inspector to insert an image as a form element and then inserting the appropriate value, such as value="Submit", into the code. You might want to use images to customize the appearance of buttons. It is important to make sure that any images you use in this manner are obviously meant to be buttons.





Macromedia Dreamweaver 8(c) Training from the Source
Macromedia Dreamweaver 8: Training from the Source
ISBN: 0321336267
EAN: 2147483647
Year: 2006
Pages: 326

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net