• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 13. Creating Forms > Adding Buttons

Adding Buttons

Forms usually 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 according to the Action and Method specified. The Reset button clears all the information from the fields on the page.

In the myform.htm document, position the insertion point in the last row of the table and choose Insert > Form Objects > Button.


You can also click Insert Button from the Forms category in the Objects panel.

A Submit button is placed in the form, and the property inspector displays Button properties. Since a submit button is the default, you do not need to change any of the options for this button.

Position the insertion point on the same line just after the submit button and add another button to the page.

A second submit button is placed in the form. The only difference is the name—this 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, which can be grouped with other radio buttons. The button you are working with in this exercise is different in that it cannot be grouped with other buttons. It will have its own action assigned to it in the next step.

Choose Reset form as the Action on the property inspector.

The text in the Label text box will automatically change to Reset. The Button Name however, stays the same.

This action will cause 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 in order to perform another task. A JavaScript, for example, can be used to perform calculations such as totals or interest and return the end value to the user.

In the Label text box, type Clear Form; in the Button Name text box, type Reset.

It is a good idea to name your buttons clearly, with consideration for your user's expectations. Submit and Reset are standard form button labels that people understand because of their widespread use.

Save the file and preview it in the browser.

Your document should now look similar to the example shown here.

Leave this file open for the next exercise.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint