Forms Introduction  

What are forms?
Forms are a collection of controls such as check boxes, text boxes, and buttons that are embedded within web pages. Forms serve as the friendly user interface between your users and you. It's a means with which your users can communicate back to you instead of the communication always going from the you to them. With forms you can get information from users and store it in a database for use in mailing lists or user accounts. Forms require another piece of the Internet to work though, CGI Scripts.

CGI scripts, the other side
Forms are processed through the use of CGI, or Common Gateway Interface. This is the nice, fluffy layer that provides a standard way for Internet Browsers and servers to communicate. It's actually a set of external programs on the server made with C/C++ or PERL that translate the data across the board. Some of the things that CGI scripts do include taking the data from a form and e-mailing it to you, managing a user's account on a web site or searching for web pages such as a search engine.

Keep in mind that use of a CGI script requires access to a CGI-BIN on a server.  So before you go making your forms expecting feedback from your users, make sure you have CGI script on the other side to drive the process.

How a form is setup
Forms can be divided into three parts, the form header which includes the <form> tag and information about the CGI script to use, the form fields which includes any number of <input> tags and field descriptions, and the form submission where the form's action buttons are.

The Form Header

     The <form> tag is where the form header exists. It encloses all the form fields (<input> tags), and where and how the form sends it's data to be processed.

Using the <form> tag
     Any form you create must be enclosed within a <form> and </form> tag. Below is a table of <form> properties.

*Required Property

Now let's talk about the properties that make up the form header and <form> tag. As you can see from above, the action property is required. That's because every form has to do something with it's data and the action property specifies what. The action property must have the form "protocol://servername/path/script.cgi".

The method property can have only one of two values, "get" and "post". These are the two methods used to transfer the form data. When the method property is omitted, the "get" method is assumed. When method is set to "get", the browser sends a single string of characters to the server containing the CGI script URL with the form data appended to it. So whole data transfer takes place in one process. This is good for short forms that don't include sensitive data such as passwords or credit card numbers. On the other hand, When method is set to "post" the data is send as a separate HTTP transfer. This is the recommended method when it comes to transferring sensitive information because it's harder to intercept.

The accept and enctype properties are used when a file on a user's computer is to be sent as part of the data. 

There are also two JavaScript event handlers made for the <form> tags, onSubmit, and onReset. These execute when the form's submit or reset button are pressed.

 Some Form Fields

Most form fields, or controls, use the <input> tag with properties that specify the type of field it is. The <input> tag can be made into a text box, password box, check box, radio button, hidden field or a file dialog box. Below is a table of properties that can be used with the <input> tags.

*Required Property

Name and type are required properties because each form field must have a unique identifier, or name, and type.

The text box
     The text box is a field that lets user's enter text such as a login name. Below is example.

<form action="aScript.cgi">

   <input name="txtTest" type="text" value="Text test 1">

</form>

We make a text box by setting the type to "text". We could also include the size and maxlength properties if we wanted to change the size and limit of the field.

The password box
This is the same as a text box except for when the user enters text it shows up as a bunch of asterisks, "*****". Below is an example.

<form action="aScript.cgi">

   <input name="pswTest" type="password" value="secret">

</form>

We make a password box by setting the type property to "password". These are usually used in conjunction with a text box to create a login form where a user enters their login name and password.

The check box
The check box is a little square box that when clicked toggles between a blank space and a little check mark. Below is an example.

<form>

   What systems do you like? <br>

   <input name="windows" type="checkbox"> Windows <br>

   <input name="linux" type="checkbox" CHECKED> Linux <br>

   <input name="mac" type="checkbox"> Macintosh <br>

</form>

We make a check box by setting the type property to "checkbox". Check boxes are setup a little different than text boxes. You must have an individual <input> tag for each check box. When a user submits a form with check boxes, the server takes the names of the check boxes that were checked, pairs them with the value you gave them and sends them to the server. If no value is specified, it just sends the name. You can also pre-check them by adding the "CHECKED" attribute within the <input> tag.

Radio Button
Radio buttons are like check boxes except that only one radio button in a collection can be selected at once. Below is an example.

<form>

   What's your favorite color? <br>

   <input type="radio" name="favclr" value="red" CHECKED>

      Red<br>

   <input type="radio" name="favclr" value="blue"> Blue<br>

   <input type="radio" name="favclr" value="green"> Green<br>

</form>

We make a radio button by setting the type to "radio". In order for a collection of radio buttons to work properly, you have to name all of them the same. This lets the browser know that they're all one group. When the form is submitted, the name of the radio button group is sent back to the server along with the value of the button the user checked . You can pre-check a radio button by adding the "CHECKED" attribute within the <input> tag.

Hidden Field
The hidden field is used to provide extra information to the server about the form. Users can't see or alter this field. Below is an example of a hidden field.

<input type="hidden" name="name" value="information">

This is useful if you have multiple forms being processed by one script and you want to tell the script some additional information about each form.

More Form Fields

The file field
The file field lets users select a file on their computer that is to be sent as part of the form data. This basically uploads a file to a server. Below is and example of a file field.

<form enctype="text/html">

   <input type="file" name="htmlfile">

</form>

     You also might want to add the enctype property to the <form> tag so the server knows what type of file is being sent. The only properties we have to worry about is type, which is set to "file", and name, just to give the field an identification.

The text area field
     A text area field is like the text box except that it can span multiple columns and rows. This field is made with the <textarea> and </textarea> tags. Below is an example.

<form>

   <textarea name="txtaTest" rows=4 cols=30>

   This is a

   text area!

   </textarea>

</form>

     The text area field is a little different from the previous fields we've seen. Whatever is between the opening and closing text area tag is displayed as the default text in the box. The only property that we have to worry about is name. We can control how big the text area is with the cols (columns) and rows properties. These are useful for comments or questions from users.

The menu field
     The menu field, or sometimes called a combo box, is a like a text box with a drop down menu displaying a list of choices. They function like a group of radio boxes but in less space. Below is an example.

<form>

   What's your favorite TUCOWS site?<br>

   <select name="selText">

   <option>HTML</option>

   <option>Themes</option>

   <option>Music</option>

   <option>Games</option>

   </select>

</form>

     To make a menu we use the <select> and </select> tags, and for each individual entry we use an <option> and <option> tag. The only property we have to worry about is name in the <select> tag. Each entry in the menu is made with the text in between each <option> tag. The selected text is what is sent back to the server. You can also add a value property to each <option> tag with some descriptive value that will be sent back to the server instead of the selected text.

     By adding the "MULTIPLE" attribute in the <select> tag, multiple selections can be made with the CTRL key. You can also control how many entries are visible with the size property. (1 = one visible entry, 2 = two visible entries, ...)

The Form Submission

     When a form is submitted, all the data entered into the form is packed together and sent to the server to be processed by a CGI script. But before a form can be submitted, there must be some control that users can use to start the submission. That's where the submit button comes in.

The submit button
     The submit button is a button with text that signals the browser to send the form data back to the server. Like most form fields, it's made with the <input> tag. Below is an example.

<form action="aScript.cgi">

   <input type="submit" value="Submit">

</form>

     We made the submit button by setting the type property to "submit". The value property is the text that will show up on the button. If it's omitted, the default "Submit Query" is displayed. Don't forget to specify an action in the <form> tag so something happens when a user presses the submit button. There is another button that is more for user convenience than necessity. It's the reset button.

The reset button
     The reset button, when pressed, clears all the data that was entered into the form, returning all fields to their default value. This is useful for those long forms. Below is an example. Type something in over the "Test text" then press "Clear".

<form>

   <input type="text" name="txtName" value="Test text">

   <input type="reset" value="Clear">

</form>

     The reset button is made by setting the type property to "reset". The default text on the reset button is just "Reset". To change that just set the value property to what you want it to read. It's real easy.

Submit button tricks
     You can also use an image instead of that boring looking "Submit" button. All you have to do is set the type property to "image" and add a src property containing the URL of the image you want to use. Below is an example.

<form action="aScript.cgi">

   <input type="image" src="images/submit.gif">

</form>

     You can also add an align property to control where the text goes next to your button. If you add an "onClick" event handler you can have the browser execute some code when the user presses the submit button. 

What Happens After Submission?

     When the user has finished filling out a form and presses the submit button, the browser takes the data and URL encodes it.

URL encoding the form data
     URL encoding takes all the data in a form and packs it into one single string, structuring the string in "name=value" pairs. Each "name=value" pair is then separated by an ampersand "&". Below is an example.

<form action="http://www.aserver.com/cgi-bin/aScript.cgi">

   <input type="text" name="favOS">

   <input type="text" name="favSite">

</form>

string = "favOS=windows&favSite=tucows"

If the method property is set to "post" then the string is sent to the server as a separate request. If the method property is set to "get" then the string is appended to the end of the CGI script URL and separated with a question mark "?". 

This whole string is then sent to the server, taking care of addressing the CGI script and providing the data all in one shot.

On the other side, depending on the type of method used to transfer the form data, the server saves the string in either the QUERY_STRING environment variable or the server's standard input device

Basic HTML Tutorial | Table Tutorial | Frames Tutorial | Meta Tags Tutorial | Style Sheet Tutorial