Reset Buttons

A "reset button" allows the viewer to clear a form and start over. Try typing in the textbox below and then click the reset button.

If you had added some default text to the textbox, the reset button would restore the default text instead of just going blank. The same is true of radio buttons and checkboxes, too. In short, clicking a reset button restores the form to its default status.

It's really easy to make a reset button like the one above:

<form name="form1">

<input type="text" size=15>&nbsp;
<input type="reset">

</form>

That's all there is to it. Just use TYPE="reset". The browser draws the button and adds the funtionality for you. You can change the text in the button by adding a VALUE attribute:

<form name="form1">

<input type="text" size=15>&nbsp;
<input type="reset" value="Clear Form">

</form>

The above would make this button:

Submit Buttons

Submit buttons send the form's data to the backend programming that will process the viewer's entered information. There are two parts to a submit button: 1) The button itself and, 2) an ACTION in the <form> tag.

The button is the part you see and click. The action is an attribute in the <form> tag that points to the processing program like a link's HREF. Lets make the button first.

<input type="submit" value="Submit The Form">

That's all their is to it. Use TYPE="submit" to make the button and function. Use VALUE to alter the text on the button.

When the submit button is clicked, it takes whatever action is in the <form>'s ACTION attribute. Here's what a typical ACTION would look like:

<form name="form1" action="cgi-bin/processing.cgi">

The action is set to the URL of the processing program. If you've coded or added this program, you'll know where you put it. If you're using a program provided by your server, you may need to get the URL from them.

Below is a sumbit example that brings up a little JavaScript alert box when the form is submitted. No real action is taken:

<form name="form1" action="javascript:alert('Form Submitted')">

<input type="text" name="textbox" size=15>
<input type="reset" name="resetbutton" value="Reset Form>&nbsp;
<input type="submit" name="resetbutton" value="Submit This Form">

</form>

Notice the value of the ACTION attribute in the <form> tag is a simple JavaScript, not an URL to a real data processing program. Copy this JavaScript down so you can use it to test submit buttons later.

Here's the above form in action:

Remember that we're mainly interested with the HTML part of the form, don't get sidetracked with JavaScript or backend processing. Just concentrate on making the <input>s.

Summary & Exercises

Most forms should have a reset button so the viewer can clear the form and start over. The reset button is easily made with <input type="reset">.

A submit button sends the data to the processing program. It comes in two parts. The button is made with <input type="submit">. The action is taken by a URL in the ACTION attribute of the <form> tag: <form action="URL to program">.

You can change the text of either button by adding a VALUE attribute in the appropriate <input> tag.

Lets update our sample form with reset and submit buttons. Notice that I set the submit button to the simple JavaScript I used above. Also remember that the ACTION attribute goes in the <form> tag of the form where the submit button is coded. Not another form or in an <input> tag.

To Next Advanced HTML Lesson

Back To Advanced HTML Index