# 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

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  

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  Option 1 Option 2 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  Option 1 Option 2 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.

by Adam McNicol.
26 April 2012.
updated on 31 August 2014.