Capturing and processing data

One useful role of server-side scripting is capturing data from the user. To do this we need to create a HTML form that will enable the user to enter data via their web browser.

To start with we will create a simple form which will ask the user for their name. Once the user has entered their name they will submit the form and the data will then be processed by a cgi script. This script will process the data passed by the form and display an appropriate message in the web browser e.g. "Hello John!".

Before we begin

In the Getting Ready For Server Side section you were advised to download a HTML editor to assist in creating HTML pages. Whilst it is possible to create and edit HTML documents in IDLE, it is not designed for this purpose and lacks many useful features that will make editing your scripts easier.

Please make sure you have a suitable editor before continuing with this section.

Creating the HTML template

The HTML form that we will create is shown below. It is very simple, containing only two main components:

  • Text box - for entering the name
  • Submit button - for submitting the form for processing

    first form

Before we construct the form we will need to create a HTML template that we can reuse. The video below demonstrates how to do this:

Task 4

Create an appropriate HTML template using the above advice.

HTML forms and validation

When creating the HTML form we will use some features that are available in HTML5 to make validating your form easier. Generally validation of a form is a two step process

  1. Client-side validation with JavaScript
  2. Server-side validation with your scripting language

HTML5 provides some features which simplify the client-side validation process but unfortunately they are not widely supported in all web browsers at this time. However, since we are not going to be learning another language at this point they are quite handy as they give us some validation pretty much for free.

If you are interested in finding out more about HTML5 forms then a good resource on the topic is Dive into HTML5.

Creating the HTML form

Now that we have a template we can produce a simple form to gather data from the user. The video below demonstrates this:

Task 5

Create a form to gather the user's first name.

In the next section we will discover how to process the data that is submitted by the form.