Introduction to <FORM>

Web pages are more engaging when the user is involved. One way to get information from the user is through the <FORM> tag. There are a few options you have to set. You will be referring to the users' input by the name of the form, and you must specify the action that should be taken when they submit the form:
<FORM name="myForm" method="POST" action="http://geocities.yahoo.com/forms">
<input type="hidden" name="login" value="webschool101">
<input type="hidden" name="subject" value="Survey Results">
<input type="hidden" name="next_url" value="http://www.geocities.com/webschool101/index.html">

</FORM>
(Change this red part to YOUR geocities ID)

 The action above will work at sites that are at Geocities (Most ISPs will allow this sort of action where the responses are e-mailed to you, but the syntax is different. Look for a FAQ at your ISP for details).

Types of input

Text

This is a common way to enter a singe line of text like a name, or a street address
<FORM name="myForm" method="POST" action="http://geocities.yahoo.com/forms">
<input type="hidden" name="login" value="webschool101">
<input type="hidden" name="subject" value="Survey Results">
<input type="hidden" name="next_url" value="http://www.geocities.com/webschool101/index.html">


<INPUT name="FavoriteBand" type=TEXT size=45>
</FORM>
(Change this red part to YOUR geocities ID)

buttons

The two default buttons are "Submit" and "Reset" though you can have a button of any type if you write a script (more about this next time).
<FORM name="myForm" method="POST" action="http://geocities.yahoo.com/forms">
<input type="hidden" name="login" value="webschool101">
<input type="hidden" name="subject" value="Survey Results">
<input type="hidden" name="next_url" value="http://www.geocities.com/webschool101/index.html">


<INPUT name="FavoriteBand" type=TEXT size=45>
<INPUT type="SUBMIT" value="Click here to Submit your Choice">
<INPUT type="RESET" value="Click here to Clear the form">
</FORM>
(Change this red part to YOUR geocities ID)

Other types

Next time you'll see some of the other more exotic types of buttons including pop-up menus, radio buttons, check boxes, text areas and hidden information.

Challenges

  1. Can you make a page that asks for the persons name and favorite band and have a button to submit the information to your geocities (yahoo) e-mail address?
  2. Change the message on the button to clear or submit the form