9.6 Input Submit

So far all these different types of form inputs have been interesting, but then the collected data hasn't actually gone anywhere. Setting the value of the attribute type to submit allows form data to be submitted for processing using a submit button, which should be placed last in a form and have its name attribute set to "Send" or "Submit". In addition, a destination for the form data needs specifying, including how it is to travel. This is added into the form tag itself using the attributes action and method.

  • action - Specifies the URL to send the data to, such as an IP or email address.
  • method - The default is "get" and sends the form contents in the URL. "post" is the HTTP method for sending data to the action URL. If the form values contains non-ASCII characters or exceeds 100 characters then "post" must be used.
<form action="mailto:whoever.co.uk" method="post" >
Username: 
<input type="text" name="user">
<input type="submit" value="Submit">
</form>

This would look like this in a browser:

Username:

When a visitor enters the requested information and hits the submit button, the information is emailed to the specified email address. However, this method is not the best because it leaves the specified email address open to hackers, who may use it to send you span emails. A better method is to pass the information to a form processor. These can be found online, or you can write your own using PHP or download one, but would need to have web hosting that supports PHP too. This means the information and email are hidden from unscrupulous people. For example:

<form method="post" action="form-processor.php">

Reset

Another handy feature that all forms should include is a way for a visitor to clear or reset a form if they find they have made a few mistakes in filling out a form. This can be accomplished by including a reset button, often sited near a submit button. We can add one to the form used earlier:

<form action="mailto:whoever.co.uk" method="post" >
Username: 
<input type="text" name="user">
<input type="reset" name="reset">
<input type="submit" value="Submit">
</form>

This would look like this:

Username: