Doug's Form Tutorial

Forms serve as the basic input function in HTML. Before forms were implemented there was no true interaction on the Web. Forms allow you to receive information from those accessing your Webpage. The <FORM> tag and the the closing </FORM> tag occur within the body of the HTML document. Forms CANNOT be nested in other forms.The <FORM> tag can contain 3 attributes: Action, Method and Enctype. These attributes allow the Web author to inform the server what form the input will take and how it will be handled. The two most common Method attributes are Get and Post. The Action attribute must refer to the url that the output is directed to. The HTML of our Join page at the IBM/PCUG looks like this:

<FORM METHOD="POST" ACTION="MAILTO:ricerl@snowcrest.net">

This tells the server to take the output of the form in e-mail protocol and send it to Bob Rice, our Membership Chairman.

If you use a cgi script to handle the output, such as the Alta Vista Search form included on the Internet Sig Page, the HTML would look like this:

<FORM METHOD="GET "ACTION="http://www.altavista.digital.com/cgi-bin/query">

Once the form is filled in and submited, the server takes the data and sends it to Alta Vista's search engine, which then returns the results in the form of an Webpage to you in your browser.

The Enctype attribute is used to tell the server if the data is some type other than the default implied by the . Encrypted data or a file transfer as supported in HTML 3.0 spec.'s would be an example. The following is the HTML to send a file to a fictitious URL:

<FORM ENCTYPE="multipart/form-data" ACTION="_URL_" METHOD=POST>

This tells the server to send a file to a specified URL.

Elements

Now that we've told the server how to handle the input from the form. We have to create a form itself ( the part that the browser displays). Within the <FORM> tag there are several tags used to describe the different elements of the form: checkboxes, radio buttons, selection lists, text inputs and various other inputs that make up a form.
They are:<INPUT>, <TEXTAREA>, <SELECT> and <OPTION>. These tags allow input in name/value pairs. Meaning the tag designates a name for the input field and the value is the actual input. The most widely used and flexible one of these is the <INPUT> tag.

<INPUT>

The <INPUT> tag does not require a closing tag. The <INPUT> tag has several attributes. These attributes tell the browser the type of input device to display, the name of the field, the size (if applicable), the value of the field and the maximum size of the input field. This HTML:

<HTML>
<HEAD>
<TITLE>Just a silly form demo </TITLE>
</HEAD>
<BODY>
<FORM ACTION="MAILTO:dougbnt@snowcrest.net" METHOD=POST>
Enter your name.   <INPUT TYPE="TEXT" NAME="USER"><BR>
Enter your password.<INPUT TYPE="PASSWORD" NAME="PW" SIZE=10 MAXLENGTH=10><BR>
<INPUT TYPE="CHECKBOX" NAME="UPDATE" CHECKED><BR>
Do you think yourself a little odd? YES<INPUT TYPE="RADIO" NAME="ODD" VALUE="YES">
NO<INPUT TYPE="RADIO" NAME="ODD" VALUE="NO"><BR>
Pick a spot on Buddha. Careful, by clicking you submit the form.<INPUT TYPE="IMAGE" NAME="COORDINATES" SRC="gbuddha.gif" ALIGN="MIDDLE" HSPACE=20><BR><BR> <INPUT TYPE="HIDDEN" NAME="EOF" VALUE="EOF">
<INPUT TYPE="SUBMIT" VALUE="SEND THIS FORM TO ME">
<INPUT TYPE="RESET" VALUE="TRY AGAIN">
</FORM>
</BODY>
</HTML>

Produces this form:


start of form
Enter your name.       
Enter your password.
Check here for an update to this page.
Do you think yourself a little odd?YES NO
Pick a spot on Buddha. Careful, by clicking you submit the form.

end of form
The TYPE attribute defines the input field and in turn determines the appearance of the field. There are several types defined by the current spec.; they are TEXT, PASSWORD, CHECKBOX, RADIO, IMAGE, HIDDEN, SUBMIT, RESET and FILE. These types are modified by the other attributes of the <INPUT> tag. These attributes are NAME, VALUE, SIZE, MAXLENGTH and CHECKED.

The NAME attribute must be present for all types except SUBMIT and RESET. The VALUE attribute can be used to define the default value of a text field. For a CHECKBOX or RADIO types it defines the "on" value of the field. VALUE can be used to define the label for the SUBMIT and RESET buttons. The SIZE attribute is used to define how many characters will be displayed in the text entry fields. The default is 20 characters. MAXLENGTH is used to limit the size of the text entry field itself. The default is unlimited. The CHECKED attribute is used with the types, CHECKBOX and RADIO to set them to the "on" position at initialization. An <INPUT> tag with TYPE="FILE" has to be a separate form,because the browser has to handle it differently than the paired data. The HTML for a file input (form) could look like this:

<FORM ENCTYPE="multipart/form-data" ACTION="mailto:dougbnt@snowcrest.net" METHOD=POST>
Send me a file? <INPUT NAME="userfile" TYPE="file">
<INPUT TYPE="submit" VALUE="Send File">
</FORM>

This is how the form looks:


start of form
Send me a file?

end of form


The <INPUT> tag allows for many different types of input and is a very valuable element within forms. An <INPUT> tag with TYPE="TEXT" is limited to one line of text. In order to display more text, we need to understand how to use the element,<TEXTAREA>

<TEXTAREA>

The <TEXTAREA> element does have a closing tag, and allows us to input multiple lines of text. Textareas automatically have scroll bars and unlimited text can be entered in them. The attributes within the <TEXTAREA> tag are NAME, ROWS, COLS and WRAP(not recognized by all browsers). Default Text can be entered in the textarea box. Here is the HTML for a typical form using the <TEXTAREA> element of forms.

<FORM ACTION="Mailto:dougbnt@snowcrest.net" METHOD="POST">
<P ALIGN=CENTER ><B>Pleeeease, send me some e-mail!</B></P>
<CENTER>
<TEXTAREA NAME="DearDoug" WRAP="PHYSICAL" ROWS=15 COLS=50>Dear Lonely Doug,</TEXTAREA>
<INPUT TYPE="SUBMIT" VALUE="SEND NOW!"><INPUT TYPE="RESET" VALUE="FORGET IT, LOSER!"> </CENTER>
</FORM>

This is how the form looks:


start of form

Pleeeease, send me some e-mail!


end of form


The attributes within the <TEXTAREA> tag are fairly self explanatory. NAME being the name assigned to the text field. ROWS being the number of rows displayed. COLS are the number of columns displayed. WRAP enables word-wrapping in the textarea window. WRAP can have several values: OFF, VIRTUAL and PHYSICAL. WRAP="OFF" is the equivalent of no wrapping, sent as typed. WRAP="VIRTUAL" means words will wrap on the display, but will be sent as long lines without new-lines. WRAP="PHYSICAL" indicates there is word-wrapping and is sent with breaks at all wrap points.

<SELECT> and <OPTION>

That brings us to the the <SELECT and <OPTION> tags. These tags combine to present you with a list of choices in the form of a drop-down menu or list window. The <SELECT> tag requires a closing tag, and has several attributes. They are NAME, SIZE and MULTIPLE. The NAME attribute assigns the field a name. SIZE effect the display; in that SIZE=1 displays a drop-down menu with choices. Greater sizes define the list window. MULTIPLE indicates that more than one option may be included in the value. <OPTION> like <INPUT> does not reqire a closing tag and can only occur inside a <SELECT> tag. The <OPTION> element defines the choices available for selection, and it has two attributes: SELECTED and VALUE. SELECTED indicates this option is initially chosen ( the default is the first option). VALUE is the value to be returned if this option is chosen, otherwise the content of the option is returned. Here's the HTML to demonstrate all these variations:

<CENTER>
;<H2><FONT COLOR="GREEN">What are your peferences?</FONT></H2>
</CENTER>
<P>What flavors do you like?
<SELECT NAME="FLAVORS" MULTIPLE=5 SIZE=5>
<OPTION>Vanilla
<OPTION SELECTED>Chocolate
<OPTION>Strawberry
<OPTION VALUE="RandR">Rum and Raisin
<OPTION>Other
</SELECT>
<IMG WIDTH=30 SRC="dot_clear.gif">What's your favorite color?
<SELECT NAME="COLOR" >
<OPTION>Red
<OPTION>Green
<OPTION>Yellow
<OPTION>Other
</SELECT>
<BR><BR>
<CENTER><INPUT TYPE="SUBMIT" VALUE="GIVE ME INFO">
<INPUT TYPE="RESET" VALUE="CHOOSE AGAIN">
</CENTER>
</FORM>

This coding produces this form:


start of form

What are your peferences?

What flavors do you like? What's your favorite color?

end of form


In summary, the implimentation of forms in the current HTML specifications gives you many ways to solicit information from those visiting your Webpages. How you put this information to use is another topic altogether. To really make use of form output you will need access to CGI privileges from your service provider, and, of course, some CGI programs or applicable scripts to handle form output. Many CGI programs and fill-out-form tutorials are available on the Web. Maybe handling form output will be a topic for another tutorial in the future.

As with any HTML, it is subject to browser interpretation. These examples seem to work fine with both the latest versions of Netscape and Internet Explorer. Netscape did give you an added bonus when inputting a file. Netscape included a "browse" button; a nice touch. As always, if you have any suggestions or additions please, e-mail me.

Created by Doug Bennett on July19th, 1996.