Forms are designated within an HTML document by the fill-out form tag:
<FORM METHOD="POST" ACTION="http://form.url.com/servlet/serletName">
... Contents of the form...
</FORM>
The URL given after ACTION
is the
URL of your program. The METHOD
is the means of
transferring data from the form to the program. In this example, we have used
the "POST
" method.
In most cases, you can use "GET
" method instead.
Both will be discussed in the next section.
Within the form you may have anything except another form.
The tags used to create user interface objects are INPUT
,
SELECT
, and TEXTAREA
.
The INPUT
tag specifies a simple
input interface:
<INPUT TYPE="text" NAME="
thisinput
" VALUE="default" SIZE=10 MAXLENGTH=20>
<INPUT TYPE="checkbox" NAME="thisbox" VALUE="on" CHECKED>
<INPUT TYPE="radio" NAME="radio1" VALUE="1">
<INPUT TYPE="submit" VALUE="done">
<INPUT TYPE="radio" NAME="radio1" VALUE="2" CHECKED>
<INPUT TYPE="hidden" NAME="notvisible"
VALUE="5">
which would produce the following form:
The different attributes are mostly self-explanatory. The TYPE
is the variety of input object that you are presenting. Valid types include
"text
", "password
", "checkbox
", "radio
", "submit
", "reset
", and "hidden
". Every input but "submit
" and "reset
"
has a NAME
which will be associated with the value returned in
the input to the program. This will not be visible to the user (unless they
read the HTML source). The other fields will be explained with the types:
"text
" - refers to a
simple text entry field. The VALUE
refers
to the default text within the text field, the SIZE
represents the visual length of the field, and the MAXLENGTH
indicates the maximum number of characters the textfield
will allow. There are defaults to all of these (nothing,
20, unlimited).
"password
" - the same as
a normal text entry field, but characters entered are obscured.
"checkbox
" - refers to a
toggle button that is independently either on or off. The VALUE
refers to the string sent to the server when the button is checked (unchecked
boxes are disregarded). The default value is "on".
"radio
" - refers to a toggle
button that may be grouped with other toggle buttons such that only one in the
group can be on. It's essentially the same as the checkbox, but any radio
button with the same NAME
attribute will be grouped with
this one.
"submit
" and
"reset
" - these are the pushbuttons on the bottom of most forms
you'll see that submit the form or clear it. These are not required to have a NAME
,
and the VALUE
refers to the label on the button. The default
names are "Submit Query" and "Reset" respectively.
"hidden
" - this input is invisible as far as the
user interface is concerned (though don't be fooled into thinking this is some
kind of security feature -- it's easy to find "hidden" fields by
perusing a document source or examining the URL for a GET
method). It simply creates an attribute/value binding without need for user
action that gets passed transparently along when the form is submitted.
The second type of interface is the SELECT
interface, which includes popup menus and scrolling tables. Here are examples of
both:
<SELECT NAME="menu">
<OPTION>option 1
<OPTION>option 2
<OPTION>option 3
<OPTION SELECTED>option 4
<OPTION>option 5
<OPTION>option 6
<OPTION>option 7
</SELECT>
<SELECT NAME="scroller" MULTIPLE SIZE=7>
<OPTION SELECTED>option 1
<OPTION SELECTED>option 2
<OPTION>option 3
<OPTION>option 4
<OPTION>option 5
<OPTION>option 6
<OPTION>option 7
</SELECT>
which will give us:
The SIZE
attribute determines
whether it is a menu or a scrolled list. If it is 1 or it is absent, the
default is a popup menu. If it is greater than 1, then you will see a scrolled
list with SIZE
elements. The MULTIPLE
option, which forces the select to be a scrolled list, signifies that a more
than one value may be selected (by default only one value can be selected in a
scrolled list).
OPTION
is more or less self-explanatory
-- it gives the names and values of each field in the menu or scrolled table,
and you can specify which are SELECTED
by
default.
The final type of interface is the TEXTAREA
interface:
<TEXTAREA NAME="area" ROWS=5 COLS=30>
Mary had a little lamb.
A little lamb?
A little lamb!
Mary had a little lamb.
It's fleece was white as snow.
</TEXTAREA>
As usual, the NAME
is the
symbolic reference to which the input will be bound when submitted to the
program. The ROWS
and COLS
values are the visible size of the field. Any number of characters can be
entered into a text area.
The default text of the text area is entered between the
tags. Whitespace is supposedly respected (as between <PRE>
HTML tags), including the newline
after the first tag
and before the last tag.
INPUT
tag with the FILE
type as follows:
<FORM METHOD="POST" ENCTYPE="multipart/form-data" ACTION="URL"> File to upload: <INPUT TYPE=FILE NAME="upfile"><BR> <INPUT TYPE=SUBMIT VALUE="Submit"> </FORM>
which gives us:
Configuring a form for file uploads requires setting two attributes in the
FORM
in addition to using <INPUT TYPE=FILE>
POST
method and
ENCTYPE="multipart/form-data"
attribute