HTML Form Tutorial

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.

Source	Result
<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:

Source

Result

<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>

First Second Third Fourth Fifth First Second Third Fourth Fifth

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:

Source

Result

<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" src="/img_articles/2732/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>

What is your home page URL? What is your password? Select one or more colors that you like: What is your favorite color? Upload any type of file: Tell me why you are here! What is your most unfavorite color: Green Red Blue Yellow Pink Select one or more colors you do not like: Green Red Blue Yellow Pink

A web page with the above form, along with a script written especially to handle the form's information, can be downloaded here.

Decompress the downloaded ZIP file.

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.