HTML Forms: Forms provide a means of interaction between the user and publisher of a web site. Forms can be used to collect information or to provide customized responses.

Uses of Forms: Forms are used for simple data collection, such as surveys or feedback, for creating customized responses, such as setting up web pages, or for complex commerce systems, such as online order forms. Forms can also be used to customize the appearance of a web page interactively.

Controls: Controls are the means forms use to collect data. There are a number of controls available, such as buttons, checkboxes, radio buttons, reset buttons, submit buttons, selection lists, text areas and text fields.

Form Processing: Information collected by a form must be sent to the web server to be processed. The form simply packages the information contained in its controls and sends it to the server. One typical method of processing data sent from a form to a web server is Common Gateway Interface (CGI) programming. A form can also be emailed to a specified address, although this method is generally not preferred.

CGI: CGI (Common Gateway Interface) scripts are the usual interface between HTTP (the program responsible for web transactions) and other programs on the server. CGI scripts (or programs) can be written in a number of programming languages. Perl is one of the most popular ones but C, C++, Visual Basic and Applescript can be used. Internet service providers often provide standard scripts that can be used to process forms.

Form Element: A form is created with the <FORM> tag. A document can have several forms, but they cannot be nested. Control elements as well as standard HTML tags can be included within a form.

  <FORM>
       Enter information:
       <i>First Name:</i>
       <INPUT TYPE="text" NAME="first">
       <i>Last Name:</i>
       <INPUT TYPE="text" NAME="last">
   </FORM>

Form Attributes: The ACTION attribute provides the URL of the program used to process the form. For example, a CGI script residing in the cgi-bin directory of the server. The METHOD attribute specifies one of two ways - GETor POST - to send the data. With the GET method, the browser transfers the data from the form appended to the end of the URL. The POST method transmits the data separately after the URL. The POST method is preferred in most cases. The ENCTYPE attribute specifies the encoding of information sent to the server (default is ENCTYPE="application/x-www-form-urlencoded").

   <FORM NAME="form1" METHOD=POST ACTION="http://www.website.com/cgi-bin/mailform.cgi">
       ...................
       ...................
   </FORM>

Control Elements and Attributes: A form is made up of a number of control elements used for entering information, such as buttons, text fields and lists. Control elements should be given names so the form processing program can process them correctly. There are three main control tags, <INPUT>, <TEXTAREA> and <SELECT>. The TYPE attribute is used to define a number of controls with the <INPUT> tag.

• text entry (single line of text)
   Enter your name: <INPUT TYPE="text" name ="name" SIZE="30" MAXLENGTH="100">

• text field, autoclear (single line of clearing text)
   <INPUT TYPE="text" name ="n" value="Type here..." onFocus="if(this.value=='Type here...')this.value='';">

• password text entry (masks typed characters, doesn't provide real security)
   Type your password: <INPUT TYPE="password" NAME="password" SIZE="8" MAXLENGTH="8">

• checkbox (multiple choice input, value is submitted to server)
   Which operating systems do you use?
   <INPUT TYPE="checkbox" NAME="os" VALUE="Win" checked> Windows
   <INPUT TYPE="checkbox" NAME="os" VALUE="Mac"> Macintosh
   <INPUT TYPE="checkbox" NAME="os" VALUE="Unix"> Unix

• radio button (toggle between choices, value is submitted to server)
   Which operating system do you use most often?
   <INPUT TYPE="radio" NAME="os" VALUE="Win" checked > Windows
   <INPUT TYPE="radio" NAME="os" VALUE="Mac"> Macintosh
   <INPUT TYPE="radio" NAME="os" VALUE="Unix"> Unix

• submit button (sends form data to server)
   <INPUT TYPE="submit">

• reset button (resets default values of form)
   <INPUT TYPE="reset" VALUE="Clear">

• image button (like submit with image)
   <INPUT TYPE="image" NAME="order" SRC="images/filename.gif">

• file selection (select a file to transmit to server; set ENCTYPE="multi-part/form-data")
   <FORM METHOD="POST" ENCTYPE="multipart/form-data" ACTION="/cgi-bin/getfile.cgi">  
       <INPUT TYPE="file" NAME="filename" SIZE ="50">
       <br>
       <INPUT TYPE="submit" NAME="submit" VALUE="Upload">
   </FORM>

• hidden entry (control that is not displayed; used to send information required for processing)
   <INPUT TYPE="hidden" NAME="my_email" VALUE="name@xxx.com">

•custom button (button that can be customized with javascript))
   <INPUT TYPE="button" VALUE="Reload Page" onClick="location.reload()">
   <INPUT TYPE="button" VALUE="View Source" onClick='window.location = "view-source:" + window.location.href'>

• text area (creates a multiline, scrollable text entry box)
   <TEXTAREA NAME="story" COLS="40" ROWS="5">It all began long ago ...</textarea>

<SELECT NAME="colors1">
    <OPTION SELECTED>red</OPTION>
    <OPTION>green</OPTION>
    <OPTION>blue</OPTION>
    <OPTION>cyan</OPTION>
    <OPTION>magenta</OPTION>
    <OPTION>yellow</OPTION>
</SELECT>

• scrolling menu (SELECT tag with number of lines specified by size attribute)

<SELECT NAME="colors2" SIZE="3">
    <OPTION SELECTED>red</OPTION>
    <OPTION>green</OPTION>
    <OPTION>blue</OPTION>
    <OPTION>cyan</OPTION>
    <OPTION>magenta</OPTION>
    <OPTION>yellow</OPTION>
    <OPTION>black</OPTION>
    <OPTION>gray</OPTION>
    <OPTION>white
</SELECT>

<select name="colormenu" onChange="MM_jumpMenu('parent',this,0)">
    <option value="http://www.red.com" selected>red</option>
    <option value="http://www.blue.com">blue</option>
    <option value="http://www.yellow.com">yellow</option>
  </select>
  

Design Issues: Control over the appearance of forms is limited and affected by the browser. Control elements can be aligned by using the <PRE> tag or by using a table (i.e. embedding a table within the form). Since the width of menu elements is determined by the longest item, adding a dummy option, such as hyphens, can be used to set width (as well as to divide list into sections). As all web page elements forms should be carefully designed and integrated into page.

Testing Forms: Most web servers provide scripts to process forms. It is often useful to test forms before uploading them to a web site. There are a number of free service providers that can be used to test forms before uploading them. The two basic methods of doing this are to email the form data to a specified address or to return it as an HTML page. Another method is to use a javascript to test the form.