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

Lesson 11. 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 lights_quiz.html document, position the insertion point in the right cell of the last row of the table and click the Button icon from the Forms category in the Insert bar.


You can also choose Insert > Form Objects > Button.

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 in the left cell of the last row of the table 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 that are supposed to be 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.

Choose Reset form as the Action on the Property inspector.

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

This action will cause all text fields, check boxes 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 field, type Clear Form and in the Button Name text field, type 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.

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