HTML Form Tutorial, Part II

The first of this 2-part article (HTML Form Tutorial, Part I) 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