JavaScript EditorBest javascript editor debugger     Ajax website 
↑


Main Page

Previous Page
Next Page

Resetting the Form

If humans could fill out forms perfectly on the first try, there would be no erasers on pencils and no backspace key on your computer keyboard. You can give your visitors a reset button so that they can start over with a fresh form (including all the default values you've set).

To create a reset button:

1.
Type <input type="reset".

2.
If desired, type value="reset message" where reset message is the text that appears in the button. The default reset message is Reset.

3.
Type />.

Figure 17.46. You can use the value attribute to set any text you wish for the reset button.


Figure 17.47. The CSS from Figure 17.41 on page 272 already applies to the Reset button. No additions are necessary.


Figure 17.48. If your visitor clicks the reset button, all the fields are set to their default values.


Tips

  • The name-value pair for the reset button is only sent to the script if you set the name attribute. Therefore, if you omit the name attribute, you won't have to deal with the completely superfluous reset datawhich is usually something like "reset, Reset".

  • You could add the name attribute to a reset button for scripting purposes (see page 316).


You can add images, font choices, and even a background color to your reset button.

To create a reset button with an image:

1.
Type <button type="reset">.

2.
Type the text, if any, that should appear on the left side of the image in the button.

3.
Type <img src="image.url", where image.url is the name of the image that will appear on the button.

4.
Type alt="alternate text", where alternate text is what appears if the image doesn't.

5.
If desired, add any other image attributes.

6.
Type /> to complete the image.

7.
Type the text, if any, that should appear on the right side of the image in the button.

8.
Type </button>.

Figure 17.49. Make sure you set the type to reset. Otherwise, the button won't actually do anything at all.


Figure 17.50. Now both the submit and reset buttons really stand out. (It really works, by the way. Try it on my Web sitesee page 26.)


Tips

  • You can also use the button tag to create a reset button without an image. Just skip steps 36.

  • For information on creating buttons with scripts, consult Creating a Button that Executes a Script on page 316.

  • Current browsers support the button tag quite well. Older browsers do not, despite it being a standard part of (X)HTML.

  • I can't think of any good reason to add the value attribute to a reset button, but you might want to add a name attribute for scripting purposes.



Previous Page
Next Page


JavaScript EditorBest javascript editor debugger     Ajax website 
→