Forms

A form is an area that can contain form elements. Form elements allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form. A form is defined with the <form> tag.

Text Fields

Text fields are used when you want the user to type letters, numbers, etc. in a form.

1: <form action="">
2: First name: <input type="text" name="firstname" size="20">
3: <br>
4: Last name: <input type="text" name="lastname" size="20">
5: </form>

Here is how it looks:

Note that the form itself is not visible. Also note that in most browsers, the width of the text field is 20 characters by default.

The Form's Action Attribute and the Submit Button

When the user clicks on the "Submit" button, the content of the form is sent to another file. The form's action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the received input.

1: <form name="input" action="showfields.py" method="get">
2: Username: <input type="text" name="user">
3: <input type="submit" value="Submit">
4: </form>

Following is how it looks in a browser:

If you type some characters in the text field above, and click the "Submit" button, you will send your input to a page called "showfields.py". That page will show you the received input.

`tconv.py`

This is a small Python CGI script that converts Celsius to Farhenheit temperature and vice versa, taking its arguments from a query string.

For more information on the methods defined by the cgi module, consult

Python Library Reference

especially the section on the higher-level interface.

01: #!/usr/bin/python
02: import cgi, cgitb, os, sys
03: cgitb.enable(); # formats errors in HTML
04: 
05: sys.stderr = sys.stdout
06: print "Content-type: text/html"
07: print
08: print """<html>
09: <head><title>Temperature Conversion</title></head>
10: <body>
11: <p>"""
12: 
13: form = cgi.FieldStorage()
14: 
15: if not (form.has_key("from") and form.has_key("value")):
16:     print "<b>Error</b>: request did not provide the proper query string."
17: else:
18:     # This illustrates alternative ways of extracting field
19:     # parameters. The getfirst method is safer.
20:     convert = form.getfirst("from")
21:     v = float(form["value"].value)
22:     if (convert=='F'):
23:         C = 5.0*(v-32)/9.0
24:         print "%.1f F equals %.1f C" % (v,C)
25:     elif (convert=='C'):
26:         F = 9.0*v/5.0 + 32
27:         print "%.1f C equals %.1f F" % (v,F)
28:     else:
29:         print "<b>Error</b>: <i>from</i> field must be either F or C"
30: print "</body></html>"

`tconv.html`

The HTML page activates the CGI script in a form with the POST method.

Try it: tconv.html

01: <html>
02: <head><title>Temperature Converter Form</title></head>
03: <body>
04: 
05: <h1>Temperature Converter</h1>
06: 
07: <p><form action="https://johnloomis.org/python/tconv.py">
08: 
09: <input type="text" name="value" size=10>
10: 
11: <select name="from">
12:    <option value="F" selected="selected">F</option>
13:    <option value="C">C</option>
14: </select>
15: 
16: 
17: <input type="submit" value="Submit">
18: </form>
19: 
20: </body></html>

Results

The following link, tconv.py?value=70&from=F, calls the CGI script directly with the GET method. The result should be:

70.0 F equals 21.1 C

Here is a live instance of the form described above:

The calculation described here is simple enough that we do not really need a CGI script. The INPUT tag has an OnChange attribute. For example:

1: <FORM>F:&nbsp;<INPUT type="text" name="F" value="32"
2:     onChange="C.value = 5/9 * (this.value - 32 )">
3: <BR>C:&nbsp;<INPUT type="text" name="C" value="0"
4:     onChange="F.value = 9/5 * this.value + 32 ">

Below is a live version of this form:

Enter a number in either field, then click outside the text box.

Maintained by John Loomis, updated Tue Feb 19 16:52:28 2008