HTML Forms

HTML forms are used to gather data from a visitor to your website. You have most probably encountered forms on many websites, from registration forms to search forms to contact forms.

All HTML forms work in the same basic way. First, they ask the user to input information, such as their name, password, credit card number, or whatever. Once all this information is entered into the form, the user clicks the submit button, and all of the information is sent over to a separate page, which then processes it. This processing might include things such as checking a username and password against a database of users, or charging a credit card.

In this section we are going to look at the various types of form input available, and how we can construct a form to gather the data we want. However, we will not be covering the topic of processing form data; this is a large subject and is outside the scope of this website, but there are many other useful resources out there. Before you go looking for these sites though, it is essential that you have a solid grasp of the HTML side.

HTML forms all have the same basic layout. We begin a form using the <form> tag. Inside this tag we must include a couple of attributes. The first is the action attribute, which tells the browser the name of the web page to send the information to once the form is completed. Then we have the method attribute, which tells the browser how it should send the information. This can either be "get" or "post". get will send the information to the next page as part of the URL, whereas post will send it in a hidden format. If you omit the method attribute then the form data will be sent using the get method as default. This method is limited to 100 characters though, so you will most likely find that post is more useful. Here's how you would begin a typical form:

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

Once you have begun your form you can fill it with any combination of input tags you like. We will come to these in detail in a moment.

At the end of your form you must include a button called the submit button. This button does exactly what it sounds like it should do - submits the form data to the web page specified in the action attribute of the form tag. Although this button is technically called the Submit button, you can use whatever text you like on it by using the value attribute, for example:

<input type="submit" value="Click here to submit" />

Note that because this tag does not surround any text, we must close it by adding a forward slash at the end.

After your submit button you can close your form by using the closing tag </form>.

Ok so now you know the basics, let's move on and look at the various types of input available.