<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.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:
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:
end of form
<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:
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:
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.