Forms can have three types of tags, all used to collect input from the user.

1. <TEXTAREA> allows input of many lines of text. Use this tag when you need a detailed answer from the user.

2. <SELECT> allows you to offer multiple choices in the form of a drop-down menu or a scrolling box. Use SELECT when you know the options you wish to offer.

3. <INPUT> includes the remaining input methods including radio buttons, check boxes, single lines of text, as well as the submit and reset buttons.

Combine these three formats and you can gather information in a variety of ways.

The HTML

You need an opening and ending tag to create a form, just as you would with tables or frames. Begin with <FORM>. Within this first tag you will include attributes that define what script the form will use and how it will send the collected data to the server. The term ACTION is assigned a URL that will accept the information and the term METHOD defines how the information will be sent to the script. The most common method is POST, which sends the information separately from the URL to the script.

Here is an example of a form tag:

<FORM METHOD="POST" ACTION="/cgi-bin/script">

You now need to define the parts of your form. Each of the three form input types have their own attributes.

1. <TEXTAREA NAME="input" ROWS=4 COLS=20>A textarea box</TEXTAREA>
   • NAME: This is a required field. It defines the name of the data that is returned. So if your form asks your user to describe their favorite food, you might name this field "favorite_food." The name is for you to see, and the easier it is to recognize the better.
   • ROWS and COLS: Set each of these equal to a number to define the size of the textarea box. There is no default size in browsers to determine this size, so it is best to set it yourself.
   • Any text placed between the <TEXTAREA> and the </TEXTAREA> tags will appear as default text inside the text box.

   A textarea box

   <SELECT MULTIPLE SIZE=3>
   <OPTION VALUE="pork chop"> Pork Chop
   <OPTION SELECTED VALUE="mashed potatoes"> Mashed Potatoes
   <OPTION VALUE="broccoli"> Broccoli
   </SELECT>

   • NAME: Same as above.
   • SIZE: Sets the number of choices available in the pull-down or scroll box. If you leave out size, or set it to zero, this field will automatically be a drop-down menu.
   • Add MULTIPLE to the select tag and your user can choose more than one option.
   • Below the select tag, use an OPTION tag for each choice. Value should represent the option you give to the user. This value is returned to you and does not have to match what the user sees. Values should be recognizable to you and should be similar to the visible option so you can find it in the data returned to you.
   • SELECTED: Include this in one of your options if you wish it to be selected. If selected is not included, no choices will be highlighted.

   
   Pork Chop
   Mashed Potatoes
   Broccoli

   Do you like JP3? <INPUT TYPE="radio" NAME="choice" VALUE="yes" CHECKED>yes
   <INPUT TYPE="radio" NAME="choice" VALUE="no">no

   • NAME: Defines name for data
   • SIZE: This determines the length of characters when used for single line of text or password.
   • MAXLENGTH: Specifies the maximum number of characters to be allowed
   • VALUE: For text or password input, this defines the default text displayed. For a check box or radio button, this is the value returned to the server if that box or button is selected. When used with the SUBMIT or RESET button, it determines the text inside the button.
   • CHECKED: This sets the checked box or button.
   • TYPE: This sets the type of input field. Types include: check box, radio, text, password, reset, and submit. Text refers to the single line of text entry. Password is the same as text except that the characters entered are represented by bullets. Reset and Submit are used as the buttons at the bottom of the form.

   Do you like JP3?Yes No

   Use the same format as above for check boxes, text, password, reset, and submit.

Format Your Form

As with any other text on your website, you will have to format your forms to make them look good. You can use any HTML that you would with regular text, but there are a few caveats. You cannot format the text used inside of text boxes.

You can use the <PRE> tag to organize your forms so that the boxes line up. This can cause some problems however as not all fonts have equal sized characters. So what looks good for you, may not appear correctly in different browsers and systems.

The best organization is usually achieved when you place your forms inside a table. In this case, the table is placed within the beginning and ending FORM tags and each input field is placed within the table tags as needed.

Some tips for form layout:

• Try to keep your forms short. It is rare that you will find someone who likes to fill them out. If you are trying to solicit information from people, the less the better.
• Plan the layout of your form in advance. It is much easier to enter all your fields if you have guidelines to work with.
• If your form is too large to fit on one page, consider breaking it into more forms.

Gather the Data

CGI, or Common Gateway Interface, was created to allow HTML documents to communicate with other applications. It provides a common environment and a set of protocols for applications to use when working with the Web server. Let's say you are searching for something on the Internet. Once you enter your query, the browser asks the server to run the correct CGI script. The script communicates with the database archive and finds information requested by the form. This information is then sent the server which feeds it back to the browser.

CGI scripting is pretty advanced. If you feel like conquering CGI scripting, you will need to talk to your ISP and find out if you have permission, as not all ISPs will let you have access to the CGI-bin. Then visit Devhead or Webmonkey for some tips and tutorials.

If you'd rather leave the scripting to someone else, you could download some shareware. Silicon Ali tried one called WebForms, available from the ZDNet Software Library. Not only will it create a form for you, but it allows you to choose whether you would like to receive the form information via a CGI response, or have it mailed to your email address.

Once the data is collected, you can enter it into a database program such as FileMaker.