Designing WEB Forms

Introduction

HTML supports online forms. These can be used for subscribing to mailing lists, voting on topics, or for any other interface where a user should set parameter values to a URL. This document describes the syntax of HTML forms, and how they can be used when the user is not permitted to design a private CGI script.

Forms in HTML

<FORM> ... </FORM>

Parameters: ACTION, METHOD
Arguments for the parameters:

ACTION: The URL of the query server similar to:
<FORM ACTION="URL"> ... </FORM>
METHOD: One of GET, PUT, or POST similar to:
<FORM ACTION="URL" METHOD=PUT> ... </form>

Form Interface Implementation

The following tags implement the interface for the form. They are valid only when used inside the <FORM> ... </FORM> element.

<INPUT> (there is no ending tag)

TYPE

NAME

VALUE

CHECKED

SIZE

MAXLENGTH

TYPE
One of: TEXT, HIDDEN, PASSWORD, CHECKBOX, RADIO, SUBMIT, or RESET
TYPE="TEXT" and TYPE="PASSWORD" accept character data; TYPE="CHECKBOX" is either selected or not; TYPE="RADIO" allows selection of one of several options; TYPE="SUBMIT" is an action button that sends the completed form to the query server; TYPE="RESET" is a button that resets the applicable default values in the form; TYPE="HIDDEN" is an invisible character data field.
NAME
"textstring" is a symbolic name (not displayed) identifying the INPUT field as in:
<INPUT TYPE="CHECKBOX" NAME="box1">
VALUE
"textstring" depends on the argument for TYPE.
- TYPE="TEXT" or TYPE="PASSWORD" - "textstring" is the default value for the INPUT.
- TYPE="CHECKBOX" or TYPE="RADIO" is the value of INPUT when it is selected.
- TYPE="RESET" or TYPE="SUBMIT" is a label for the INPUT field.
CHECKED
No arguments. For TYPE="CHECKBOX" or TYPE="RADIO", if CHECKED is present the INPUT field is selected by default.
SIZE
width or width,height where width and height are integer values representing the number of characters by number of lines for the TYPE="TEXT" or TYPE="PASSWORD" input fields.
MAXLENGTH
length is the number of characters accepted for TYPE="TEXT" or TYPE="PASSWORD". This attribute is only valid for single line TEXT or PASSWORD fields.

<SELECT> ... </SELECT>

<OPTION>

Attributes: NAME, SIZE, MULTIPLE
Arguments for the parameters:

NAME
"textstring" is the symbolic identifier for the <SELECT> field.
SIZE
The argument for SIZE is an integer value representing the number of <OPTION> items that will be displayed at one time.
MULTIPLE
No arguments. If present, the MULTIPLE attribute allows selection of more than one <OPTION>.

<OPTION> (there is no ending tag)

<SELECT>

<OPTION>

SELECT

  <SELECT NAME="a-name">
  <OPTION>textstring 1
  <OPTION>textstring 2
  <OPTION>textstring 3
  </SELECT>

The textstring fields represent possible values of the SELECT field.

Attributes: SELECTED
Arguments for the parameters:

SELECTED
No arguments. If SELECTED is present then the <OPTION> is selected by default.

<TEXTAREA> ... </TEXTAREA>

<TEXTAREA></TEXTAREA>

<TEXTAREA>

default text

</TEXTAREA>

Defines a rectangular field where the user may enter text data.

Attributes: NAME, ROWS, COLS
Arguments for the parameters:

NAME
"textstring" is a symbolic name that identifies the <TEXTAREA> field.
ROWS and COLS
Both attributes take an integer value which represents the lines and number of characters per line in the <TEXTAREA>.

The mail_form script

To use the parameters that are passed to a form, CGI scripts are required. Unfortunately, it is too insecure to let users design their own private CGI scripts. An alternative is presented by the script.

The form should make use of the HIDDEN type of <INPUT> field to pass extra parameters to this script. An example form (similar to the one generated by the script when no parameters are passed) is presented.

<FORM METHOD=PUT ACTION="http://www.science.uva.nl/cgi-bin/mail_form">
<INPUT TYPE="hidden" NAME="sendto" VALUE="nobody@www.science.uva.nl">
<INPUT TYPE="hidden" NAME="sendsubj" VALUE="Join mailing list">
<INPUT TYPE="hidden" NAME="gotourl" VALUE="http://www.science.uva.nl/">
Subscribe to our mailinglist!<P>
Receiving mail address:
<INPUT SIZE=32 NAME="receiveat" VALUE="user@client.site.org">
<BR>Join list:
<SELECT NAME="listname">
<OPTION>alphabet
<OPTION SELECTED>democracy
<OPTION>republic
</SELECT><P>
<INPUT TYPE="submit" VALUE="Mail to me (nobody)">
<INPUT TYPE="reset" VALUE="Reset">
</FORM>

Which looks like: (mail sending disabled...)

When sending mail is not disabled, an analogous message is mailed (to nobody@www.science.uva.nl):

From nobody Wed Nov  9 14:02 MET 1994        HTTP daemons user ID
Return-Path: <nobody>                        don't reply!!!
To: nobody@www.science.uva.nl
From: user (user@client.site.org)
Subject: Join mailing list
Content-Type: text
Content-Length: 728

What you probably need:

Apparently-From: user@client.site.org

QUERY_STRING=sendto=nobody@www.science.uva.nl&sendsubj=Join+mailing+list&\
gotourl=http%3A%2F%2Fwww.science.uva.nl%2F&receiveat=user@client.site.org\
&listname=democracy

> sendto=nobody@www.science.uva.nl
> sendsubj=Join mailing list
> gotourl=http://www.science.uva.nl/
> receiveat=user@client.site.org
> listname=democracy

Other variables in the environment:

GATEWAY_INTERFACE=CGI/1.1
HTTP_USER_AGENT=NCSA Mosaic for the X Window System/2.4  libwww/2.12 modified
REMOTE_ADDR=127.0.0.1                      correct IP number here
REMOTE_HOST=client.site.org
REMOTE_IDENT=user
REQUEST_METHOD=GET
SCRIPT_NAME=/cgi-bin/mail_form
SERVER_NAME=www.science.uva.nl
SERVER_PORT=80
SERVER_PROTOCOL=HTTP/1.0
SERVER_SOFTWARE=NCSA/1.3

End of message.

For a more fascinating demonstration, for YOU, as a specific user, try the script with no parameters.