Forms are often processed by a server-side CGI script:

• Client requests a web page with a form on it from the server.
• User completes the form and submits it to the server.
• The CGI runs the server-side script to process the form.
• The web server passes the appropriate reply to the user.

Typically a CGI script will send the form to an E-mail address (often using a script called FormMail, or similar, written in Perl).

The <form> tag

All form elements (check boxes, radio buttons etc.) are enclosed within a form identified by a name:

This pair of tags can enclose other formatting (tables etc.) to ensure the form appears correctly formatted. The elements themselves all have the name="..." attribute, and when the form is submitted the names are attached to the values entered into the form and sent to the server in a text string.

The form is usually submitted when the user clicks on a "submit" button (see below). At that point, the values of the elements are attached to their names using equal signs and chained together with ampersands (&) between them as separators. Any spaces entered in text are replaced by plus signs (+).

For instance, if the form had elements named yourname, address and age, then the submitted form would transmit a text string similar to this:

The way in which the text string is transmitted depends on the value of the method= attribute of the <form> tag:

• method=get This calls the CGI script to process the form by putting its address in the web address bar like a normal web address and appending the text string holding the form data to it. For instance:
  http://www.mysite.com/doform.pl&yourname=John+Smith&address=987+Short+Lane&age=39

  This isn't secure as the text string is not encrypted when it is sent. A more secure method is ...

• method=post which sends the text string to the CGI script directly. It can also cope with larger numbers of characters transmitted.

Whether you use method=get or method=post, the name of the CGI script is specified in the action="..." attribute of the <form> tag. For instance:

All elements should have a name="..." attribute so that the names can be attached to the values when the form is submitted. The most versatile form element is the <input> tag. <input> is not a container tag, so it should end with />. <input> creates a variety of different elements depending on the value of its type="..." attribute.

<input type="text"> gives a text slot

Try typing some text in the text slot above right. The value associated with a text slot is the text typed into it. The parameter size="..." is optional and specifies the width of the text slot in terms of the number of characters can be displayed. If you miss it out, you get a text slot this wide:

If you include the optional attribute value="...", then the value of the attribute appears as default text:

Variations on <input type="text">

All these variations have the same attributes as <input type="text"> (apart from type="text", obviously), but produce a slightly different effect:

<input type="password">. This produces a text box in which the text typed appears as asterisks (****). The text submitted is not changed - it's just how it appears in the text slot. This is used mainly for passwords, obviously.

<input type="hidden">. This produces an invisible text slot - one that exists and whose value is transmitted with the rest of the form contents, but which doesn't appear on the screen and whose contents the user can't change by clicking on it. Rather pointless, you might say. Well yes, but it does have its uses, such as passing variable values to a page. I just include it for completeness.

<input type="file">. This is a powerful one, used to select a file to upload or whatever. It produces not only a text slot but also a browse button, like this:

<input type="checkbox"> gives a check box

If you click repeatedly on the checkbox above right, a tick mark will appear and disappear. The value associated with the element is either true if the checkbox is ticked, or false if it isn't.

<input type="radio"> gives a radio button

Radio buttons are similar to checkboxes except they are designed to be used in groups, such as the trio above right. You will notice from the code that all the radio buttons have the same name (name="job"). This links the radio buttons to form one element, and you will find that you can only select one of them at a time. If you click on any of the three buttons, any other button that has been selected will deselect itself.

When the form is submitted, any radio buttons that have been been grouped together in this way are treated as one element and the value associated with it is 0 (if none has been selected), 1 if the first is selected (Butcher in this case), 2 if the second is selected etc.

The <textarea> tag gives a rectangular text area

This tag is a container tag and requires a </textarea> to close it. Any text (text only, mind! No images) between the opening and closing tag represent the default contents of the text area when the page is loaded.

The rows="..." and cols="..." attributes determine the size of the text area in terms of rows of text and the number of characters per line. The value associated with the text area when the form is submitted is the text in the area with the spaces between the words replaced by + signs:

The optional wrap="..." attribute controls whether the text you type in wraps round when you approach the end of the text area (wrap="virtual") or whether the text scrolls horizontally (wrap="none"). Whether the text wraps or not makes no difference to the string that is submitted.

Try typing a large amount of text into each of the following to see the difference:

N.B. Some tutorials give the two possible values of wrap as true and false. Having said that, neither of them seem to have any effect on my browser - the text always wraps!

The <select> tag gives a select list

The optional size="..." attribute controls how many items appear in the list. You will notice in the list above right that, although there are four items in the list, only three of them appear at any one time. Use the scrollbar next to the list to bring the missing one into view. If you use size="1", or miss out the size attribute altogether, the list becomes a drop-down list:

When the form is submitted, the value associated with the element is 0 if none of the options has been chosen, 1 if the first has been chosen, 2 for the second, and so on.

In a select list you can normally only choose one of the items. Clicking on another item will deselect the first one (a "single-select" list). If you add the optional attribute multiple="multiple" (yes the value must be "multiple" as well), then the list will allow you to choose more than one option. To choose more than one item, hold down the Ctrl key before clicking on additional items. If you don't, the select list will behave as a single-select list.

<input type="submit"> gives a Submit button

<input name="do_it" type="submit" value="Go for it!" />

Clicking on this button causes the form to be submitted according to the method="..." and action="..." attributes of the form. The value attribute of the button gives the caption that appears on it. If you don't specify a value, then the caption is "Submit".

<input type="reset"> gives a Reset button

<input name="scrub" type="reset" value="Abort! Abort!" />

Clicking on this button causes all the elements of the form to be reset to their initial values (blank, with nothing selected etc.). If you don't specify a value, then the caption is "Reset".

---

Previous chapter	Summaries menu	Next chapter

Hosted by www.Geocities.ws