HTML Forms

Aims

• Learn how to add forms to a web page
• Learn how servers receive and process data from a HTML form

Purpose of Forms

HTML forms are used to pass data to a server and to make pages more interactive e.g. provide a quiz. Forms provide a range of controls that allow a user to enter data that can be sent to a server for analysis and/or storage in a database. When you create a new account with a web service such as a government department (e.g. DVLA) or email the browser page will include a form so that you can enter your data.

We add a form with the HTML tags <form> and </form> - Dreamweaver will do this for us.

We then add controls inside the <form> tags to collect the data:

Guide here: W3Schools

After reading through this page you should have some knowledge of the following:

• Text example: <input type="text" name="firstname" />
• Password example: Password: <input type="password" name="pwd" />
• Radio buttons:

<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female

• Check boxes:

<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car

• Submit button example: <input type="submit" value="Submit" />
• Select drop down list:

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

• Textarea example: <textarea rows="2" cols="20"> </textarea>
• Button example: <input type="button" value="Hello world!">

How Form Data Are Processed

To make use of the data you collect from these controls you would need access to a server. A typical <form> definition might be:

<FORM NAME="persdetails" METHOD="post" ACTION="mailto:myname@myemail.co.uk">

This sets the name of the form and declares that the action will be to post the data on the form to the given email address. This could also be done with:

<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">

These examples will work if the page is stored on a web server.

Two basic methods for submitting form data are get (the default) and post. If the method is 'get' then the data is appended to the URI so when the button is clicked the data is sent to the server included in the address. If the method is 'post' then the data is sent as a separate set of data corresponding to what was on the form.

The 'get' method is when the form causes no side-effects such as updating a database. Many database searches have no visible side-effects and make ideal applications for the "get" method.

The 'post' method should be used if the form has side-effects such as modifying a database or subscription to a service.