More on HTML forms

In the previous sections you have learned to:

  • Create basic HTML forms with text boxes and submit buttons
  • Process data sent from a form using:
    • cgi.FieldStorage()
    • getvalue()
  • Create new databases and entities using MySQL
  • Insert records into existing entities
  • Select information from existing entities and display it as a HTML table

The next section will introduce an extended task centred around ordering pizzas but before we tackle that we need to learn more about HTML forms.

HTML form components

Forms usually contain several questions and whilst many will require written responses in a text box others may use:

  • Drop-down menus
  • Check boxes
  • Radio buttons

Example drop-down, radio buttons and checkboxes

In this section we will look at how to create these components are process the data they submit.

Drop-down menus

Drop-down menus allow you to select a single value for a list of values. They are generally used instead of radio buttons when there are too many options to fit comfortably on screen. In HTML a drop down menu might be written as follows:

1
2
3
4
5
<select name="mymenu">
    <option value="1">Option One</option>
    <option value="2">Option Two</option>
    <option value="3">Option Three</option>
</select>

Notice three things:

  1. That the drop down menu has a name
  2. That each option has a unique value
  3. That each option has some text to represent the value

Static and dynamic

A drop down menu can either be created statically, like the one above, or dynamically. In a static menu the options are hard coded into the HTML and can only change if the HTML itself is altered. In a dynamic menu the options are generated from values stored in the database - so it can update itself to reflect changes made to the database. We will focus on creating dynamic drop-down menus.

We can use the three thing identified above to help. The video below demonstrates how to create a dynamic drop-down menu:


Task 10a

Using the information above, create a form that contains a dynamic drop-down menu.


Radio buttons

Radio buttons are used when the wish to present the user with a range of options of which they can only select one. In HTML a set of radio buttons might be written as follows:

1
2
3
<input type="radio" name="rbuttons" value="1"/> Option 1
<input type="radio" name="rbuttons" value="2"/> Option 2
<input type="radio" name="rbuttons" value="3"/> Option 3

Notice three things:

  1. That the each radio button shares a name
  2. That each option has a unique value
  3. That each option has some text to represent the value

Radio buttons can also be created either statically or dynamically. The video below demonstrates how to create a dynamic set of radio buttons:


Task 10b

Using the information above, extend your form that contains a dynamic set of radio buttons.


Check Boxes

Check boxes are used when the user can select from multiple options and they are allowed to select more than one at a time. They may be represented in HTML as:

1
2
3
<input type="checkbox" name="cbox" value="1"/> Option 1
<input type="checkbox" name="cbox" value="2"/> Option 2
<input type="checkbox" name="cbox" value="3"/> Option 3

Notice three things:

  1. That the each radio button shares a name
  2. That each option has a unique value
  3. That each option has some text to represent the value

Check boxes can also be created either statically or dynamically. The video below demonstrates how to create a dynamic set of check boxes:


Task 10c

Using the information above, extend your form that contains a dynamic set of check boxes.