The first of this 2-part series showed you how to use the
<form> tag and the many uses of the <input> tag, including
hidden fields. This second part completes the tutorial
with multi-line text input areas, selection lists, and
a complete form using all the examples and a script to
process the form's information.
:: The <textarea> Tag
When asking for multi-line input from the form user, use
the <textarea> tag.
The optional attributes "cols" and "rows" specify how many
characters wide and how many lines deep to make the text
area input field. If these are not specified, individual
browsers will use their own default sizes.
The optional attribute "wrap" specifies what to do with
lines that are longer than the width of the text area input
field.
wrap="off" specifies that the text is displayed exactly as
typed. No lines will wrap.
wrap="hard" specifies that any line that is longer than the
width of the text area input field will wrap to the next
line. When the information is sent to the processing
program or function, the hard wraps will be sent with the
information.
wrap="soft" is the same as "hard" except the wrap applies
only to the visual text area input field. The soft wraps
are removed before the information is sent to the
processing program or function.
Which wrap attribute you choose depends on the type of
information the text area field will hold and your
preference. If you're asking for multi-line postal
addresses, you'll probably want "off" so the line-by-line
formatting of the addresses are not compromised. For
free-form text paragraphs, "soft" may be appropriate.
If the line lengths must not exceed a certain number
of characters (when pre-formatting for an outgoing email,
as example), then "hard" is the logical specification.
If you do not specify a wrap attribute, wrap="off" is
assumed.
Anything between the <textarea> and </textarea> tags,
including spaces or tabs, will be put into the text area
field when the form is loaded. If you don't want any
default text, keep those two tags together.
<form method="POST" action="/cgi-bin/handler.cgi">
<textarea name="message" cols="20" rows="5"></textarea>
<input type="submit">
</form>
:: The <select> Tag
The <select> tag is used to construct drop-down list boxes
(sometimes called drop-down menus) and scrolling list boxes
(sometimes called scrolling menus).
The <select> tag may contain a "size" attribute (which
determines whether you get a drop-down or a scrolling
list). It may also contain a MULTIPLE attribute (applicable
only to scrolling lists). Both of these are optional.
If the size attribute is used, it's value determines how
many lines are visible in the scrolling list box. If the
size attribute is not used, you will have a drop-down list
instead. Here is an example of a size attribute:
size="4"
If the MULTIPLE attribute is used, then the user can
select multiple items in the scrolling list box. If it
is not used, only one item can be selected.
The <select></select> tags contain a list of items. Each
item on that list is specified with the <option></option>
tags. (Examples of a drop-down list box and a scrolling
list box are in the "The <option> Tag" section, below.)
~ The <option> Tag
Each <option></option> tag set contains one item for a
drop-down list box or a scrolling list box.
The <option> tag may contain the SELECTED attribute to
pre-select that item.
The "value" attribute may be optional. Most CGI programs
require a value to work with the information to be
processed. Some JavaScript functions do not.
Here are examples of a drop-down list box and a scrolling
list box:
<form method="POST" action="/cgi-bin/handler.cgi">
<select name="myselect">
<option value="1">First</option>
<option value="2" SELECTED>Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
<option value="5">Fifth</option>
</select>
<input type="submit">
</form>
<form method="POST" action="/cgi-bin/handler.cgi">
<select name="myselect" size="4" MULTIPLE>
<option value="1">First</option>
<option value="2" SELECTED>Second</option>
<option value="3">Third</option>
<option value="4" SELECTED>Fourth</option>
<option value="5">Fifth</option>
</select>
<input type="submit">
</form>
:: A Complete Example
Forms collect information and/or present it. When the
submit button is clicked, information is sent somewhere.
Once the information is sent somewhere, the form has done
its job.
Here is an example form using all of the tags mentioned in
this tutorial:
<form method="POST"
action="/cgi-bin/formupload/handler.cgi"
enctype="multipart/form-data">
<input type="hidden"
name="something"
value="A line of content">
<p>
What is your home page URL?<br>
<input type="text" name="url" size="17" maxlength="44">
</p>
<p>
What is your password?<br>
<input type="password" name="P" size="9" maxlength="20">
</p>
<p>
Select one or more colors that you like:<br>
<input type="checkbox" name="c_blue" value="yes">
<input type="checkbox" name="c_red" value="yes" CHECKED>
<input type="checkbox" name="c_pink" value="yes" CHECKED>
<input type="checkbox" name="c_yellow" value="yes">
</p>
<p>
What is your favorite color?<br>
<input type="radio" name="color" value="blue">
<input type="radio" name="color" value="red" CHECKED>
<input type="radio" name="color" value="pink">
</p>
<p>
Upload any type of file:<br>
<input type="file" name="upfile">
</p>
<p>
<input type="button"
value="Give me a message"
onClick="return alert('a message')">
<!-- Note: onClick works only with JavaScript
enabled browsers. -->
</p>
<p>
Tell me why you are here!<br>
<textarea name="message" cols="20" rows="5"></textarea>
</p>
<p>
What is your most <b><u>un</u></b>favorite color:<br>
<select name="s_unfav">
<option value="green">Green</option>
<option value="red">Red</option>
<option value="blue" SELECTED>Blue</option>
<option value="yellow">Yellow</option>
<option value="pink">Pink</option>
</select>
</p>
<p>
Select one or more colors you do not like:<br>
<select name="s_like" size="4" MULTIPLE>
<option value="green">Green</option>
<option value="red" SELECTED>Red</option>
<option value="blue" SELECTED>Blue</option>
<option value="yellow">Yellow</option>
<option value="pink">Pink</option>
</select>
</p>
<p>
<input type="image"
name="imageclick"
xsrc="myimage.gif"
border="0">
</p>
<p>
<input type="reset" value="Erase Everything!">
</p>
<p>
<input type="submit"
name="1"
value="This is my first visit">
</p>
<p>
<input type="submit"
name="2"
value="I've been here before">
</p>
</form>
A web page with the above form, along with a script written
especially to handle the form's information, can be download
at http://willmaster.com/master/cgi-bin/arts/pl.pl?formtut
Decompress the downloaded ZIP file. (If you're uncertain
about decompressing a ZIP file, the FAQ at
http://MasterCGI.com/faq/ has information.)
Once decompressed, there will be four files: form.html,
myimage.gif, handler.cgi, and readme.txt.
File form.html is the web page with the form. File
myimage.gif is an image used by the form. File handler.cgi
is the script to handle the information submitted by the
form. And file readme.txt has preparation and installation
instructions.
Installation is easy. Just a few simple steps.
When the form is used, the script will display a page with
the form field information you supplied. It will also
upload any file you specify into the same directory where
the script is installed -- the script does not check for
the "accept" attribute.
Forms can be fun :)
With a little practice, you can be an expert.
Again, the complete HTML Form Tutorial article is available
as an ebook at http://willmaster.com/a/8/pl.pl?83eba
William Bontrager
Copyright 2006 William Bontrager Programmer/Publisher, http://willmaster.com/possibilities/ |
