HTML Form Tutorial, Part II
The first of this 2-part article 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.
— 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 longer than the
width of the text area input field will wrap to the next
line. When the information is sent to the processing
software, 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 software.
Which wrap attribute you choose depends on the type of
information the textarea 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, the browser will assign a default.
Anything between the <textarea> and </textarea> tags in your web page source code,
including spaces or tabs, will be put into the text area
field when the form is loaded. If you don't want a
default value, 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="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="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.
— The <option> Tag
Whether for for a drop-down list box or a scrolling list
box, each <option></option> tag set contains one
item of the list.
The <option> tag may contain the selected="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. Additionally,
some browsers default the value to the list item when no
value attribute is provided.
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="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="multiple">
<option value="1">First</option>
<option value="2" selected="selected">Second</option>
<option value="3">Third</option>
<option value="4" selected="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="checked">
<input type="checkbox" name="c_pink"
value="yes" checked="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="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="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="multiple">
<option value="green">Green</option>
<option value="red" selected="selected">Red</option>
<option value="blue" selected="selected">Blue</option>
<option value="yellow">Yellow</option>
<option value="pink">Pink</option>
</select>
</p>
<p>
<input type="image"
name="imageclick"
src="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>
You now have information about all the different types of
HTML web page form fields. Let's build something :)
Will Bontrager
©2001, 2008 Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
