HTML Form Submit and Reset Buttons

HTML forms are essentially pretty useless on their own. In order to gain something from them we need to be able to send the information over to a second web page, which will process the information and do something useful with it. This might be something along the lines of storing the user's answers in a database, or sending them to us in an email.

In order to send the contents of an HTML form over to our processing page we need to use a submit button. If you cast your mind back to when we first looked at setting up a form, you may recall that we used the action attribute of the form tag to tell the browser where it should send the user's answers after they have filled in the form:

<form action="processform.php" method="post">

In this case the data will be sent to the page called processform.php. So our HTML form knows where to send the information, but we still need to add a submit button so that the user can tell the browser that they have finished completing the form and they are ready to submit their answers. A submit button is created using a simple line of HTML:

<input type="submit" value="I'm done!" />

This HTML code will display a button like the one below. Note that on this page we haven't actually got a form, so clicking the button won't actually do anything; it's just there for show.

Note that we can use the value attribute to make the button text say whatever we want; as long as the type is still set to "submit" it'll know what to do.

It is customary to put the submit button at the bottom of the HTML form, because this is where people will naturally end up after they have filled it out, but you can actually position it anywhere you like as long as you keep it in between the form's opening and closing tags.

The Reset button

The submit button is great if our visitors are happy with the information they have entered, but what if they've made a mistake and want to start again? One option is to make them delete each of the individual fields manually; the other is to give them a simple reset button that will clear everything with the click of a button.

The HTML reset button works in much that same way as the submit button; we just have to change the type from "submit" to "reset":

<input type="reset" value="Reset" />

This will create a button like this:

A word of caution when using reset buttons - it is highly unlikely that your visitors will make a mistake on all of the form fields; normally if they make a mistake it is easier to just adjust that one field rather than resetting the entire form. Also, if you put a reset button right next to the submit button you increase the chances that they might actually click the wrong one, and it can be very frustrating to spend ages filling out a form only to click the wrong button and see it all vanish! reset buttons are entirely optional so feel free to leave them out.