Inside
a FORM you can have anything except another FORM. Specifically,
INPUT, SELECT, and TEXTAREA tags are used to specify interface
elements within the form.
The
<INPUT> Tag
The INPUT tag is used to specify a simple input element inside a
FORM. It is a standalone tag; it does not surround anything and
there is no terminating tag -- i.e., there is no need for a </INPUT>
tag.
The INPUT tag has a number of options:
NAME
- the symbolic name for the input field. This must be present
for all types except "submit" and "reset".
TYPE
- one of text (default), checkbox, radio, password, submit, reset.
VALUE
- the default contents of the field. For radio and checkboxes,
the return value for a selected button is "on" unless
the VALUE option is specified.
CHECKED
- specifies that a checkbox or radio button is checked by default.
SIZE
- is the physical size of the input field in characters.
MAXLENGTH
- the maximum number of characters that are accepted as input.
Simple
input field
Type in your name:
<INPUT
NAME="name">
Input
field with default entry
Type in your City:
<INPUT
NAME="city" VALUE="Surrey">
Input
field with default entry and maximum length
Type in your phone number:
SELECT
has both opening and closing tags. Inside SELECT, only a sequence
of OPTION tags, each followed by an arbitrary amount of plain text
(i.e. no other HTML markup tags), is allowed.
The attributes to SELECT are as follows:
NAME
- the symbolic name for the SELECT element. This must be present.
SIZE
- if SIZE is 1 or if the SIZE attribute is missing, by default
the SELECT will be represented by a pull-down menu.
If
SIZE
is 2 or more, the SELECT will be represented as a scrolled list;
the value of SIZE then determines how many items will be visible.
MULTIPLE
- specifies that the SELECT will be represented as a scrolled
list and should allow multiple selections.
The
attributes to OPTION are as follows:
SELECTED
- specifies that this option is selected by default. If the MULTIPLE
attribute is specified, multiple options can be specified as SELECTED.
Pull
Down Menus
What do you think of our pizza service?
<SELECT
NAME="service">
<OPTION> Excellent
<OPTION> Good
<OPTION SELECTED> Average
<OPTION> Below average
<OPTION> Poor
</SELECT>
Scrolling
Selection Lists (Mutually Exclusive)
What would you like to do today?
<SELECT
NAME="what-to-do" SIZE=6>
<OPTION VALUE="drink"> Drink Coffee
<OPTION VALUE="read" SELECTED> Read A Book
<OPTION VALUE="walk"> Take A Walk
<OPTION> Watch TV
<OPTION> Attend A Concert
.
.
</SELECT>
Scrolling
Selection Lists (Multiple Selections)
What items of clothing do you plan to wear?
(If
using Mosaic, hold down Control to select or deselect items.)
The
TEXTAREA tag can be used to place a multi-line text entry field
with optional default contents in a fill-out form. The TEXTAREA
element requires both an opening and a closing tag.
The attributes to TEXTAREA are:
NAME
- the symbolic name of the text entry field.
ROWS
- the number of rows (vertical height in characters) of the
text entry field.
COLS
- the number of columns (horizontal width in characters) of
the text entry field.
Multi-line
Text Entry Areas
Please
enter any comments below:
<TEXTAREA
NAME="comments" ROWS=10 COLS=40>Default text goes
here</TEXTAREA>
Other
Fancy TAGS
The
File Field
There are several other tags you can use in your form. These are
just some.
What file would you like to upload?
<input
type="file" name="file">
The
Hidden Field
Hidden fields are handy to have if you need information that you
do not want your form user to see. For example, you have several
forms and you could name your form "form1". You can
assign a hidden field to report on the form name. No visual example
as it is hidden.
<input
type="hidden" name="hiddenField">
We
hope this tutorial was helpful. If you like, you can link to our
tutorials from your web site. Just use the following code:
<a
href="http://www.ezi-hosting.com/tutorials.htm">Free
Scripting Tutorials from EziHosting</a>
Remember,
if you want to use forms with CGI then we have a CGI
tutorial here.
Web Hosting Australia Monthly
Special 