CGI HTML Forms
Here's a quick reference for all the different types of forms that HTML supports:
FORM Method="GET|POST" Action="URL"> <
a Form with a CGI program at URL <
INPUT Name="name" Type=" text | hidden | password | image | submit | reset | checkbox | radio">
Input widget with symbolic name, name <
TEXTAREA Name="name" Rows="R" Cols="C">
Text area (lines of editable text) with symbolic name, name and R rows and C columns visible at a time. <
SELECT Name="name" [Size="N"] [Multiple]>
Select element with symbolic name, name, N selections visible at a time; multiple selections possible; selections defined using
OPTION Value="string"> text <
Option element used with
SELECT; with returned value string or text if not provided.
<FORM METHOD="POST" ACTION="blah.cgi"> Form elements and other HTML </FORM>
There can be several forms in a single document, but the FORM element can't be nested.
ACTION specifies the action URI for the form. This URI will almost always point to a CGI script to decode the form results; but it could, for example, be a mailto. METHOD selects an HTTP method of accessing the action URI. There are two methods, GET (the default) and POST. Generally speaking, you use GET for only the simplest forms, or when you want the user to be able to bookmark the query or use it as a link - it will work just as if the user had filled in the form as before and submitted it. Use POST for forms with a lot of fields (GET might not be able to pass all the data) and for scripts that are supposed to change something on the server - you normally don't want anyone to do that from a bookmark or link.
METHOD=GET Information from a form using the GET method is appended onto the end of the action URI being requested. Your CGI program will receive the encoded form input in the environment variable QUERY_STRING. METHOD=POST This method transmits all form input information immediately after the requested URI. Your CGI program will receive the encoded form input on stdin. The server will NOT send you an EOF on the end of the data, instead you should use the environment variable CONTENT_LENGTH to determine how much data you should read from stdin. ENCTYPE specifies the media type used to encode the name/value pairs for transport, in case the protocol does not itself impose a format. With the POST method, the ENCTYPE attribute is a media type specifying the format of the posted data (by default application/x-www-form-urlencoded). Rarely used (??).
Input Text Tag
This tag allows the easy input of a single word or line of text, and typically defaults to a width of 20 characters. You will usually precede it with some descriptive text.
This example shows a simple form for asking a user their name. It presupposes a CGI script to process the user's response.
<FORM ACTION = "blah.cgi"> Enter your name: <INPUT TYPE = text SIZE = 20 > <INPUT TYPE = SUBMIT VALUE = "Send!" </FORM>
Here's how it looks (non-functional):
- Even though your
HIDDEN VALUEisn't displayed in the form, the user can see the hidden text by viewing the HTML source of the document, just like in a
Input Password Tag
INPUTelements of type
PASSWORDare just like
textentry fields, except all characters are displayed with an asterisk
<FORM METHOD="POST" ACTION="blah.cgi"> Enter your 8-character password: <INPUT TYPE="password" NAME="your_password" SIZE="8" MAXLENGTH="8"> </FORM>
Input Image Tag
<Form Action="blah.cgi"> Name: <Input name = "Name"> <Input type = image alt = "Submit :-)" src = "/images/icon-happy.gif"> </Form>
Creates a graphical submit button. The value of the src attribute specifies the URL of the image to act as the button. As with regular images, you should provide alternate text to the image to allow access in cases where the image is not displayed.
When a pointing device, e.g. mouse, is used to click on the image, the form is submitted and the (x,y) location passed to the server. The x value is measured in pixels from the left of the image, and the y value in pixels from the top of the image. The submitted data includes name.x=x-value and name.y=y-value where "name" is the value of the name attribute, and x-value and y-value are the x and y coordinate values respectively.
Input Submit Tag
These buttons are actually done with Input tags. A RESET button can be used to reset all input values to their defaults, as if no information had been given so far. The SUBMIT button transfers all the form data to the URL specified in the ACTION element.
<Form method=POST action="CGI/Menu.cgi"> <Table> <tr align=left><th> <input type=submit name=Button value="Home."> <input type=submit name=Button value="Library"> <input type=submit name=Button value="Search"> HTML: <input type=submit name=Button value="Head."> <input type=submit name=Button value="Body."> <input type=submit name=Button value="Tables"> <input type=submit name=Button value="Forms"> <input type=submit name=Button value="CGI...."> <input type=submit name=Button value="DB....."> <input type=submit name=Button value="HTTP."> <input type=submit name=Button value="Style."> <br> <input type=submit name=Button value="<"> <input type=submit name=Button value="X"> <input type=submit name=Button value=">"> </Table> </Form>
Input Checkbox Tag
TYPE="checkbox"are best used to select members of small sets.
<Form ACTION="blah.cgi"> <table border=2> <tr> <th align=right> <INPUT TYPE = "checkbox" NAME = "color" VALUE = "Red" Checked> Red </th> <th align=center> <INPUT TYPE = "checkbox" NAME = "color" VALUE = "Green"> Green </th> <th align=left> <INPUT TYPE = "checkbox" NAME = "color" VALUE = "Yellow"> Yellow </th> </tr> </table> </form>
- Decide whether the label goes to the left or the right, and stick to that convention.
- Ensure that for checkboxes in the midst of several, it's clear which checkbox the label refers to, by means of some visual cue such as colon after the label, or a comma between label/checkboxes, or by placing in a bordered table.
- If you have many, it may help to arrange them in preformatted columns.
- You can emulate a
SELECT MULTIPLElist by having
CHECKBOXESwith the same
Input Radio Tag
Radiotype means that the user can only select one checkbox at one time; clicking on another causes the existing one to become unchecked.
RADIO buttonsare similar to
CHECKBOXES, but only one option may be chosen among many.
<Form ACTION="blah.cgi"> <table border=2> <tr> <td align=right> <INPUT TYPE="radio" NAME="color" VALUE="Red" Checked> <font size="4"> Red</font> </td> <td align=center> <INPUT TYPE="radio" NAME="color" VALUE="Green"> <font size="4"> Green</font> </td> <td align=left> <INPUT TYPE="radio" NAME="color" VALUE="Yellow"> <font size="4"> Yellow</font> </tr> </table> </form>
RADIO buttonsare not good for lists with many items, because the browser has trouble displaying a lot of buttons. It would be best to use a
- Once a radiobutton is selected, it cannot be deselected without choosing a radiobutton with the same
NAME. The default selection can be restored with the use of the
- If you have a bunch of
RADIO buttonswith the same
VALUESspecified, the server won't be able to tell which is selected, since a default value of "on" will be sent.
<TEXTAREA>allows a text entry area with multiple rows. Note that it's a container: it has a closing tag. The enclosed text is displayed as the window contents. tag and the terminating
<Form Method=POST Action="mailto:email@example.com"> <Textarea rows=5 cols=55 name="msg">Hi blah, </Textarea> <BR> <Input type=submit value="Send it to blah"> </Form>
ROWSis the number of vertical rows to be displayed for text entry.
COLSis the number of horizontal columns to be displayed for text entry. If you would like default text to appear within the textarea, simply type the text in between the start and end
Be warned that putting email addresses into web pages (or anything on the Internet) will get you spam. The one in the example is fake.
This tag allows the user to choose from a fixed set of values; one or several at once.
<SELECT>tag has OPTIONs in between the initiating
<SELECT>tag and the terminating
</SELECT>tag. The OPTION tag may have these attributes:
Specifies the value of the option to be sent to the server. If not defined, the label next to the option is sent as the value.
By default, the first
OPTIONis displayed in the menu. This tag sets the default
OPTIONto be displayed in the menu, in case it isn't the first
<FORM Action="blah.cgi"> <SELECT NAME="Button" SIZE=3> <OPTION> Contact <OPTION> Help <OPTION> Docs <OPTION> Downloads <OPTION> Home <OPTION> Toys </SELECT> </FORM>
This presents a window with 3 items displayable at once. If there are more than 3 then the window has a scrollbar. If you want a drop-down menu, just set the SIZE to 1 or omit it. Only one item may be selected by the user.
This very simple and elegant example depends on the fact that the directory names at The WDVL are meaningful words. If you want something more sophisticated, e.g. say the menu labels are not exactly the same as the directory names, or comprise longer phrases, simply modify the CGI program to use a hash table to look up the URL from the supplied OPTION value (left as an exercise for the reader!).
- Be careful that the open pull-down doesn't exceed the screen size; if you're on a large workstation screen remember the PC user with a small screen.
- If you have more than 3 or 4 options to choose from, and the user may only select ONE, then this input element is the best. People are often tempted to use multiple
- The decoding script on the server will probably appreciate having a single-word
VALUEvalue instead of multiple-words.
- Use the MULTIPLE keyword to allow the user to select several items at once.