Syntax:

 <FORM ACTION="URL" METHOD="GET ¦ PUT" ENCTYPE="MimeType">
Label Text
<INPUT TYPE="FieldType" NAME="FieldName" [Other Attributes]>
<SELECT NAME="FieldName" [SIZE=n][MULTIPLE]>
<OPTION [SELECTED]> OptionText </OPTION>
…
</SELECT>
<TEXTAREA NAME="FieldName" [ROWS=n] [COLS=n]>
[Optional Text]
</TEXTAREA>
</FORM>

The FORM is a two-sided coin. The HTML portion displays fields in the browser that allow the user to fill in information and send it back to you. However, once the information is submitted, doing anything with it requires programming on the server. The server side programming is beyond the scope of this course and will not be covered here. Check with your ISP, many already have the needed programs set up for you. This document will discuss the HTML side of setting up a form.

The <FORM> Tag

The FORM tag defines the begining and end of the form code and has the following attributes:
 
 

Attribute
Action	This specifies the URL of the script that will be used to process the information that is submitted.
Enctype	This is set to the MIME type for the file being uploaded. It does not create the field for the file name but merely tells the browser what to expect.
Method	This specifies the HTTP method to use when passing data to the script. Method can take the value of Get or Post. If no method is specified, the default GET is used.  Value Get The GET method sends the data to the server appended to the end of the script's URL.  Post The Post method sends the data to the script in a separate HTTP transaction.  Note: Some servers may have operating environment limitations that prevent them from processing an URL that exceeds 1K characters. If this is a concern on your server, use the POST method when a large amount of data is being passed.

Named Input Fields

The named input fields usually make up the bulk of the form and appear on screen as standard GUI controls such as text boxes, check boxes or menus. Each field is given a unique name that is the same name as the variable used by the script. If you are not doing your own programming, it is important to get together with your programmer and agree on variable names. The name used in the form must exactly match those used in the script.

The tags that create the input fields produce the fields only. You will need to include some kind of descriptive text that tells the user what information to enter.
 
 

The <INPUT> Tag

The INPUT tag handles most of the input fields. The TYPE attribute determins what type of field is created. The TYPE and NAME attributes are required. The INPUT tag also has other attributes that vary according to the value assigned to TYPE.

Type

Description

Text Password

The TEXT and PASSWORD types create a textbox in the form. The only difference between them is that the PASSWORD does not display the text on the screen but appears as *. Using a password field will protect the users' password from people looking over their shoulder but does not protect the password as it travels over the Internet.     Other Attributes SIZE Optional. Specifies the width of the input box in characters. The default size is usually 20.  Previously, the size was specified as two numbers separated by a comma. The second number was the height in rows to create a multi-row box. With the advent of the <TEXTAREA> tag to create a multiline box, the height specification is no longer needed and, if included, will be ignored by the browser.  VALUE Optional. Specifies the starting value that is entered in the box. This comes in handy when most users will be entering the same value in the box; you can put it in for them and save them typing (and spelling errors).  MAXLENGTH Optional. Allows yoiu to specify the maximum number of characters that can be entered in the field.

CheckBox

The CheckBox presents the user with that can be checked or unchecked by clicking with the mouse. It is used for collecting data that is of a Yes/No nature. You can put any number of checkboxes on your form, each has its own input tag and functions independantly of the others; the user can select several at the same time. Other Attributes VALUE Specifies the value that is sent to the server when the box is selected. This value is transparent to the user and does not appear in the form.  CHECKED Optional. Preselects the box when the form is rendered on the browser screen.

Radio

Like the CheckBox, Radio Buttons present the user with Yes/No type choices. Unlike checkboxes, however, the radio buttons occur in groups and present mutually exclusive choices, only one choice can be selected within the group and when a button is selected, the previously selected button within the same group is automatically unselected. The control's name is derived from the tuner controls on older car radios; when a button is pushed, the other buttons pop out.  Radio Buttons are grouped together by giving all the buttons within the group the same name.  Other Attributes VALUE Specifies the value that is sent to the server when the button is selected. This value is transparent to the user and does not appear in the form.  CHECKED Optional. Preselects the button when the form is rendered on the browser screen.

Hidden

A hidden field does not appear on the form and is used to send data to the server without the intervention of the user. This can be used, for example, to carry data from one form to another when you have a long form that you want to break up into several smaller forms and still keep all the user's input together. Another common use is if you want a single general script to process data from several different forms; the script will need to know which form the data came from in order to process it correctly.  Other Attributes VALUE Specifies the value that is sent to the server when the form is submitted.

Multiple Line Text Input

The <TEXTAREA> tag creates a control that allows entering multiple lines of text. The NAME attribute serves the same function as mentioned above under the INPUT tag; it gives the field a unique identifier that is passed to the processing script. The optional ROWS and COLS attributes allow you to specify the size of the control when it is displayed on the screen. The default size varies with the browser. The Optional Text entry will appear in the control when it is rendered by the browser.
 

Menus

Option 1Option 2Option 3The Menu control gives the user the option of selecting one or more items from a predefined list. A Menu is created using the <SELECT> </SELECT> tag set. Within the SELECT tags, each menu item is created with the <OPTION> </OPTION> tag pair. Each menu item must have its own OPTION tag.

SELECT Attributes
Name	Specifies the name of the field that is passed to the script for processing.
Size	Optional. Specifies the width of the control on the screen in characters.
Multiple	Optional. Specifies that more than one option may be selected.
OPTION Attributes
Selected	Optional. Specifies that the option is selected by default.

Action Buttons
 
 

Once the data is collected in the form, you need some way to get the data to the script. Action buttons come in two varieties and to create them we must once again return to the INPUT tag. The syntax is:
<INPUT TYPE="Submit ¦ Reset" VALUE="ButtonText">

Attribute	Description
Type	Determines the type of action performed when the user clicks on the button.  SUBMIT Sends the data in the form to the server for processing.  RESET Clears all fields in the form to their default values.
Value	Set the text that appears on the button.

---

Using Images as Submit Buttons

You can also use an image file as a custom Submit button. Again the key is the INPUT tag. You cannot, however, add text to an image button using the INPUT tag as you can with the standard button; you will have to use a graphics manipulation package to add text to the image itself. The syntax for this tag is:

<INPUT TYPE="IMAGE" SRC="URL" [ALIGN="top ¦ middle ¦ bottom ¦ left ¦ right"]>
The SRC and optional ALIGN attributes have exactly the same effect as they do with the <IMG> tag discussed earlier in the section on graphics.

---

The NAME attribute of the Submit Buttons

The SUBMIT button also has a NAME attribute. This theoretially makes it possible to have more than one Submit button on the same form. Since multiple Submits are not standardized, the handling of this situation is not supported by all browsers and therefore the results you will get are not going to be consistent. I recommend that you avoid the use of multiple SUBMIT buttons until their use has been standardized.

---

Putting it all Together

Now that we have seen what goes into building a form, lets put one together. Suppose you want your customers to enter their contact information and the configuration of their computer plus give them the opportunity to enter comments. The source document for this form might look like this:

<H2>SAMPLE FORM</H2>
<FORM>
Name <INPUT TYPE="text" NAME="name" SIZE=31>
Email <INPUT TYPE="text" NAME="mail" SIZE=19><BR>
Address <INPUT TYPE="text" NAME="add1" SIZE=60><BR>
        <INPUT TYPE="text" NAME="add2" SIZE=60><BR>
City <INPUT TYPE="text" NAME="city" SIZE=27>
St <INPUT TYPE="text" NAME="st" SIZE=6>
Zip <INPUT TYPE="text" NAME="zip" SIZE=16><BR>
<HR> <BR>
Computer
<SELECT NAME="brand">
<OPTION>Generic</OPTION>
<OPTION>IBM</OPTION>
<OPTION>Compaq</OPTION>
<OPTION>Dell</OPTION>
<OPTION>Gateway</OPTION>
</SELECT>
<INPUT TYPE="checkbox">Sound Card
<INPUT TYPE="checkbox">Modem
<INPUT TYPE="checkbox">Printer
<INPUT TYPE="checkbox">CD-ROM<BR>
RAM&nbsp;&nbsp;
<INPUT TYPE="radio" NAME="ram">8Mb&nbsp;
<INPUT TYPE="radio" NAME="ram">16Mb&nbsp;
<INPUT TYPE="radio" NAME="ram">32Mb&nbsp;
<INPUT TYPE="radio" NAME="ram">64Mb
HD&nbsp;&nbsp;
<INPUT TYPE="radio" NAME="hdd">2Gb&nbsp;
<INPUT TYPE="radio" NAME="hdd">4Gb&nbsp;
<INPUT TYPE="radio" NAME="hdd">6Gb&nbsp;
<INPUT TYPE="radio" NAME="hdd">8Gb
<P>
Comment
<TEXTAREA NAME="comment" ROWS=5 COLS=55></TEXTAREA>
<P>
<INPUT TYPE="submit" VALUE="Send">
<INPUT TYPE="reset" VALUE="Clear">
</FORM>
The resulting form will be rendered by the browser to look like this:
 
 

SAMPLE FORM

Name Email 
Address 

City St Zip 


---


Computer GenericIBMCompaqDellGatewaySound Card Modem Printer CD-ROM
RAM 8Mb 16Mb 32Mb 64Mb HD 2Gb 4Gb 6Gb 8Gb

Comment 

Wow! After all that work, that sure is an UGLY form. If you will recall from the first part of this course I mentioned that HTML ignores white space. Since the text used to label the form controls is all different lengths, the controls will be placed on the screen in different positions resulting in the haphazard appearance of the form shown above. So what can you do about it? In our previous discussion of tables, I mentioned that one of the things that can be placed in a table cell is a form control. The code below combines a table with the same form code listed above.

<TABLE>
<FORM>
<TR><TH COLSPAN=6 ALIGN="left"><H2>SAMPLE FORM 2</H2>
<TR>
<TD>Name
<TD COLSPAN=2> <INPUT TYPE="text" NAME="name" SIZE=31>
<TD>Email
<TD COLSPAN=2> <INPUT TYPE="text" NAME="mail" SIZE=19>
<TR>
<TD>Address
<TD COLSPAN=5><INPUT TYPE="text" NAME="add1" SIZE=60>
<TR>
<TD>&nbsp;
<TD COLSPAN=5><INPUT TYPE="text" NAME="add2" SIZE=60>
<TR>
<TD>City
<TD><INPUT TYPE="text" NAME="city" SIZE=27>
<TD>St
<TD><INPUT TYPE="text" NAME="st" SIZE=6>
<TD>Zip
<TD><INPUT TYPE="text" NAME="zip" SIZE=16>
<TR>
<TD COLSPAN=6><HR>
<TR>
<TD>Computer
<TD>
<SELECT NAME="brand">
<OPTION>Generic</OPTION>
<OPTION>IBM</OPTION>
<OPTION>Compaq</OPTION>
<OPTION>Dell</OPTION>
<OPTION>Gateway</OPTION>
</SELECT>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
              <INPUT TYPE="checkbox" NAME="sound">Sound Card
<TD COLSPAN=2><INPUT TYPE="checkbox" NAME="modem">Modem
<TD COLSPAN=2><INPUT TYPE="checkbox" NAME="print">Printer
   &nbsp;&nbsp;
<INPUT TYPE="checkbox" NAME="cdrom">CD-ROM
<TR>
<TD COLSPAN=2>RAM
<INPUT TYPE="radio" NAME="ram">8Mb&nbsp;
<INPUT TYPE="radio" NAME="ram">16Mb&nbsp;
<INPUT TYPE="radio" NAME="ram">32Mb&nbsp;
<INPUT TYPE="radio" NAME="ram">64Mb
<TD COLSPAN=4>HD
<INPUT TYPE="radio" NAME="hdd">2Gb&nbsp;
<INPUT TYPE="radio" NAME="hdd">4Gb&nbsp;
<INPUT TYPE="radio" NAME="hdd">6Gb&nbsp;
<INPUT TYPE="radio" NAME="hdd">8Gb
<TR><TD COLSPAN=6>&nbsp;
<TR>
<TD VALIGN="top">Comment
<TD COLSPAN=5>
<TEXTAREA NAME="comment" ROWS=5 COLS=55>
</TEXTAREA>
<TR><TD COLSPAN=6>&nbsp;
<TR VALIGN=top>
<TD COLSPAN=3><INPUT TYPE="submit" VALUE="Send">
<TD COLSPAN=3><INPUT TYPE="reset" VALUE="Clear">
</FORM>
</TABLE>
The result is that you can use the columns of the table to align the form controls to a more aesthetically pleasing appearance. Note that the table's border is turned off so that nobody will know that you 'cheated'. 

SAMPLE FORM 2
Name			Email
Address
City		St		Zip
Computer	GenericIBMCompaqDellGatewaySound Card	Modem		Printer CD-ROM
RAM 8Mb 16Mb 32Mb 64Mb		HD 2Gb 4Gb 6Gb 8Gb
Comment