Select element with symbolic name, name,
N selections visible at a time;
multiple selections possible;
selections defined using OPTION
<OPTION Value="string"> text <OPTION>
Option element used with SELECT;
with returned value string or text if not provided.
Forms
<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.
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.
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 VALUE isn't displayed in the form,
the user can see the hidden text by viewing the HTML source of
the document, just like in a PASSWORD field.
Input Password Tag
INPUT elements of type PASSWORD are just like text entry 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.
INPUT tags of 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 MULTIPLE list by having
CHECKBOXESwith the same NAME
but different VALUES.
Input Radio Tag
The Radio type means that the user can only select one checkbox at one time; clicking on another causes the existing one to become unchecked. RADIO buttons are similar to CHECKBOXES, but only one option may be chosen among many.
RADIO buttons are not good for lists with many items,
because the browser has trouble displaying a lot of buttons.
It would be best to use a SELECT menu element.
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
RESET button.
If you have a bunch of RADIO buttons with the same
NAME and no VALUES specified, the server
won't be able to tell which is selected, since a default value of
"on" will be sent.
Textarea
The <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 </TEXTAREA> tag.
<Form Method=POST
Action="mailto:blah@blah.com">
<Textarea rows=5 cols=55
name="msg">Hi blah,
</Textarea>
<BR>
<Input type=submit
value="Send it to blah">
</Form>
ROWS is the number of vertical rows to be displayed for text entry. COLS is 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 TEXTAREA tags.
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.
Select Tag
This tag allows the user to choose from a fixed set of values; one or several at once.
The <SELECT> tag has OPTIONs in between the initiating <SELECT> tag and the terminating </SELECT> tag. The OPTION tag may have these attributes:
VALUE
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.
SELECTED
By default, the first OPTION is displayed in the menu.
This tag sets the default OPTION to be displayed in the
menu, in case it isn't the first OPTION.
<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!).
The following code can be combined with a bit of JavaScript code to allow the user to select an option and immediately be redirected to that page.
Notes
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 RADIO buttons.
The decoding script on the server will probably appreciate having
a single-word VALUE value instead of multiple-words.
Use the MULTIPLE keyword to allow the
user to select several items at once.