HTML: Forms (Part 2)

 

Forms

There are two tags related to forms that don't involve the <INPUT> tag; they are <TEXTAREA> and <SELECT>.

 

<TEXTAREA>

The <TEXTAREA> tag provides a box in which the viewer can write. The ROWS attribute determines the number of rows in the box; the COLS attribute sets the number of columns. The WRAP=VIRTUAL setting assures that text will wrap appropriately inside the box. The <TEXTAREA> tag terminates with a </TEXTAREA> tag.

Let's continue the music quiz we started in Part 1, and ask the viewer a question that can be answered in a <TEXTAREA> box. Here is an example:

 

<form>

<p><b>Why is the band you listed above your favorite band?</b>

<textarea rows=5 cols=60 name="whyFavoriteBand" wrap=virtual>

</textarea>

</form>

to see this how this code looks in a window.

 

<SELECT> Tag

The <SELECT> tag offers the viewer a pop-up menu. Inside the <SELECT> tag is a series of <OPTION> tags that lists the contents of the pop-up menu. If you want one of the items listed in the pop-up menu to be initially chosen as the default, add the SELECTED attribute to that <OPTION> tag. For example: <OPTION SELECTED value="Chocolate Cake"> causes "Chocolate Cake" to show up as the initial choice. The <SELECT> tag terminates with a </SELECT> tag.

Let's use a pop-up menu to ask the viewer which musical genre is his favorite. The SELECTED attribute is used for the "Rock" option.

 

<p><b>Select your favorite musical genre:</b>

<select name="musicGenre">

<option selected>Rock

<option>Alternative

<option>Rap

<option>Classical

<option>Bluegrass

<option>Folk

<option>Pop

<option>Blues

<option>Jazz

<option>R&B

<option>Other </select>

to see this how this code looks in a window.

 

If you would prefer that several items in the pop-up menu show at a given time, add the SIZE attribute to the <SELECT> tag. For example, to have all 11 items in this menu show up at the same time, here is what you might write:

<p><b>Select your favorite musical genre:</b>

<select size=11 name="musicGenre">

<option selected>Rock

<option>Alternative

<option>Rap

<option>Classical

<option>Bluegrass

<option>Folk

<option>Pop

<option>Blues

<option>Jazz

<option>R&B

<option>Other </select>

to see this how this code looks in a window.

 

Submit and Reset

Two important additional <INPUT TYPE= > options are SUBMIT and RESET. SUBMIT is used to send the form to the server for processing. RESET is used to clear the form so that the viewer can start over. Here is how the SUBMIT and RESET buttons might be set up:

<center><input type=submit name="Submit">

<input type=reset name="Reset"></center>

 

to see this how this code looks in a window.

 

 

Processing the Form

As mentioned above, when the viewer clicks on SUBMIT the form and its contents are sent to the server for processing. One simple option that does not require the use of CGI or ASP scripts is to e-mail the contents of the form to yourself. To do this you modify the <FORM> tag. Here is how you might set this up:

 

<form method="post" action="mailto:yourName@someISP.com">

 

The METHOD="POST" command specifies that the form contents are sent to the server as a data stream. The ACTION="MAILTO:YOURNAME@SOMEISP.COM" command specifies that the form contents are to be e-mail'd to the address YOURNAME@SOMEISP.COM.

You might like to set the subject line of each e-mail that you receive from this web page, so that you know its source at a glance. Modify the <FORM> tag in this way to set the subject line of each such e-mail (for example) to "from eEverything.com customer service:"

 

<form method="post" action="mailto:yourName@someISP.com?subject=from eEverything.com customer service">

 

Finally, to make the e-mail you receive from this web page more readable, you might like the contents of each form element to be on its own line in the e-mail. To achieve this, add enctype="text/plain" to the <FORM> tag:

 

<form method="post" action="mailto:yourName@someISP.com?subject=from eEverything.com customer service" enctype="text/plain">

 

to see the entire form we built in Parts 1 and 2.

 

Other Resources

Try these links on forms:


Page Link
Forms Tutorial www.htmlgoodies.com/tutorials/forms/article.php/3479121

or check out one of our reference books, or look for other help on the Web.

 

Exercise

Work on either 1) your own web page, or 2) the eEverything.com site. Add a <TEXTAREA> box and a <SELECT> pop-up menu with at least 4 options. Add SUBMIT and RESET buttons. Finally, modify the <FORM> tag so that when the viewer hits SUBMIT, you get an e-mail with the contents of the form.

If you work on eEverything.com, the <TEXTAREA> box could be a Customer Service box in which users enter complaints, questions and comments. The <SELECT> pop-up menu could be to select a sweater in an available color.