Forms are used to collect information from the user, which is then sent to the web server for processing.

This usually involves the use of PHP to create SQLs commands to access a database. This is covered in the Advanced Higher Computing Science course. At Higher level you need to know how to create a form, but do not need to process the data.

A form includes several elements – both HTML and from specific. Any element that collects data must have a unique name:

<form action="xyz.php" method="get">
    First name: <input type="text" name="firstname"><br>
    Last name: <input type="text" name="lastname"><br>
    <input type="submit" value="Submit">
</form>

Form Header

A <form> tag schould have an action and a method. You do not need to use these for the Higher level course, but they can be used to help test your forms.

• action=”xyz.php”
  This is the name of the program which is to process the form data. This will fail, as there isn’t an xyz.php to process the data. However, if you look at the address bar you will be able to see the data values sent.
• method=”get”
  The “get” method includes data as part of the page address, and can be viewed in the address bar. This is suitable for testing, and for bookmarking results. However, the data is recorded in web histories, which could be accessed without permission.
  The “post” method does not include data as part of the age address, so is the better option for confidential data.

Form Elements

There are many input types, the following are the ones required for Higher Computing.

input type=”text”

Used to collect textual data in a single-line text box.

   Username: <input type="text" name="userid">

Optional parameters:

• value=”Enter name”
  Default value shown in the input box
• size=”30″
  set the width of the box, in characters
• maxlength = “15”
  limit number of characters allowed (length check)
• required
  presence check

input type=”number”

Used to collect numeric data in a single-line text box.

Rating (1-5): <input type="number" name="rating">

Optional parameters:

• value=”1″
  Default value shown in the input box
• min=”1″ max=”5″
  set minimum and/or maximum values allowed (range check)
• required
  presence check

input type=”textarea”

Used to collect textual data in a multi-line text box.

Comments:
<input type="textara" name="comments" rows="3" cols="50">

Required parameters:

• rows=”3″
  height of box in lines of text
• cols= “50”
  width of box in characters

Optional parameters:

• value=”Enter your review”
  Default value shown in the input box
• maxlength = “100”
  limit number of characters allowed (length check)
• required
  presence check

input type=”radio”

Radio buttons several options, of which only one can be chosen.

All buttons in a group have the same name.

Choose your age:<br>
<input type="radio" name="age" value="12 to 14">12-14
<input type="radio" name="age" value="15 or 16">15,16
<input type="radio" name="age" value="17 or over">over 16

Required parameters:

• value=”12 to 15″
  the value to be submitted to the web server

Optional parameters

• checked
  default selection

input type=”submit”

Display a button to submit the form data to the web server.

<input type="submit" value="Submit">

Optional parameters:

• value=”Submit”
  Text to display on the button

select

Choose option(s) from a drop-down list.

<select name="play" size="3" multiple>
    <option value="hamlet">Hamlet</option>
    <option value="godo">Waiting for Godo</option>
    <option value="brothers">Blood Brothers</option>
    <option value="curious">Curious Incident</option>
</select>

Required parameters:

• value=”hamlet”
  the value to be submitted to the web server

Optional parameters

• size=”3″
  the height/number of options displayed. A scroll bar will appear if the size is less than the number of options
• multiple
  allow several options to be selected