Forms can also be used for a dynamic presentation. The Free Buttons and Frames pages with 'How to' tutorials involve a simple interface to change the background colour when viewing the images. This way, forms and server scripts can be used if the viewers browser cannot handle Java Script (and there are many).

"Form" is an HTML tag with only a few attributes. But nested within the <form> ... </form> tag pair can be a number of other tags and attributes that help the server relate to the viewer (the user). Whether you just want to write code for forms under instruction, or also create the server programs your forms submit information to, an understanding of the tags and attributes will help you master yet another complex set of HTML Tags; and be able to decipher source code.

The most common server scripts still in use on the Internet today are Perl CGI scripts (an interpreted computer language). MS FrontPage can also be used to design Forms that interact with 'FrontPage Extensions' installed on many servers - not all Hosting Services support FP extensions, but they can certainly take a lot of the pain out of working with forms. (see the General Studies Lab). Personally I do not use FP Extensions because too many hidden values (see below) are used that can direct surfers to areas on the server that would not be known otherwise. Also one is confined to the inbuilt options of the FP extensions. I prefer to write my own Perl CGI scripts. This is a personal view and it does not suggest a security hole, just be aware and check your code if creating FrontPage forms; and FrontPage can be used to create the html forms for normal server cgi scripts too.

But first!
In the listing below, the Form tags and attributes are listed separately allowing clear tutorial descriptions for each. However, multiple tag attributes should always be included in the one tag.

Although the tags are shown in upper case, it is suggested that lowercase be used for all HTML code, ensuring file/path name compatibility with all servers. Many servers are case sensitive or do not accept special characters and spaces. What ever you do, be consistent for legibility.

An HTML 3.2 tag list, Tables, Frames and Image Maps all have their own free tutorials on this site. After completing this page, follow the back button above to learn more from these free tutorials.

Comments or suggestions are welcome; contact me via e-mail at webmaster@dtp-aus.com.

Except for text and text-box objects, the value is set and cannot be changed. However, in many cases the value that is returned to the server script (or program as in the case of MS FrontPage Server Extensions) is one of several possibilities from multiple choices OR multiple objects with the same "name" but different values. I will list most alternatives below for an easy comparison with the code.

The script is run as soon as it is called. With the call or browser command sent to the script is a string of data that contains each form object "name" and its corresponding value. A typical data string (..cgi?string) sent by the browser for the above form could look like the following, described in text format:

URL?email=bob@abc.net+mf=F+hitched=N+id=jim+pwrd=2d3abc+letter=+colour=gn
+agegrp=g4+comment=

.. where the (?) defines a separation between the call and the data string, and each name and value pair is separated by (+), and each name is separated from its coresponding value by (=). Therefore, without knowing how to write the script, you can see that it should be an easy task to separate and store each name and value in the servers memory before doing with it (the values) whatever the script has to do with it. If you know what the script is expecting in "name"s and possible "value"s, you can create a form for it as long as you also know the URL to the script:

The ?,+ and = characters are actually sent by the browser in a special representation format so they can be differentiated from normal or ascii ?, + and = characters that might be contained in the returned values. In the string shown above the Checkbox (letter) was not selected and no comments were added to the Comments text area (comment), so the return values are empty (null); ie: if the checkbox is not selected and does not return "Y", then the e-mail address will not be added to the News Letter mailing list.

1. Text boxes and Text Area boxes return the value entered - or null.
2. Text boxes and Text Area boxes can be made to display default contents by entering the default text in a "value=" attribute. ie: value="http://" can be used to prompt users to enter a full URL in a Text box
3. The browser can be forced to hide entries in a Text box by the 'type="password"' attribute.
4. The browser can be forced to display Text boxes to a defined width in characters (size= attribute).
5. Only one Radio button can be selected from multiple buttons with the same "name". Sample above uses four - two named "mf" and two named "hitched".
6. Of multiple Radio buttons with the same name, the value of the selected button only is returned.
7. If a Checkbox is not selected, its returned value is nothing (null).
8. Drop down menu lists can have one "option" pre selected (as in both Drop Down menus in the sample), or none pre selected. It is the selected option that is returned, null if none are pre selected AND none are actively selected, and an active choice will override a pre selected option.
9. The browser can be forced to display one or more lines (options) of a Drop Down Menu by the 'size=' attribute.
10. The browser can be forced to display Text Area boxes by width in characters (cols=), and by height in character lines (rows=). Larger text lengths entered will scroll.
11. Text boxes and Text Area boxes use a fixed browser default font face and size.
12. Input 'type="submit"' (a button) forces the browser to send the data string to the URL entered in the <FORM ....> tag. The "value" attribute represents the text that appears on the button.
13. Input 'type="reset"' (a button) simply forces the browser to restore the default values to each object in the form. The "value" attribute represents the text that appears on the button.
14. The Form attributes POST and GET allow different methods of receiving and responding to calls by scripts. By far the most commonly used for general form handling is POST.

Considerations for the most recent browsers should be ignored unless you are willing to confine efficient viewing to only a portion of visitors to your site! 'Toys' are one thing, but efficient information transfer should be your prime concern for some time yet.
  

<form method="POST" action="http://www.adomainname.com/cgi-bin/dowhatever.cgi">
<strong>Enter your ID:</strong>
<input type="password" name="ident" size="10" value="">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>

Action defines the FULL path to the script, program or extension that will receive the forms data and perform appropriate actions.

Method defines the way the data is to be sent to / received by the server script. The data is received differently depending on this attribute. (Most forms use the POST method where as manually entering a script path plus appropriate name=???? values in the Browser text entry pane will use the GET method. Scripts or extensions can detect the method and include code to reject either.)

<input type="hidden" name="pagename" value="wallyworld.html">

This sample might be used to tell a script which page is calling it so that it responds in a manner different to the way it would for another page.

Often it is easier to place default values that will not change, into the form code; rather that have them included in the server scripts. (ie one script can be used for multiple purposes.) So-called hidden values should not include secret data, as a quick view of the page source code will reveal the information.

<input type="password" name="ident" size="10" value="">

Using this "type" definition will ensure that user entered text appears only as asterisks, not as normal text.

<input type="checkbox" checked>

Checkboxes operate as separate objects. Radio Buttons are usually grouped by a common name allowing only one of several to be selected at once. Checkboxes have an on off action, Radio Buttons can be switched on, but cannot be switched off unless another button is clicked to an 'on' state. Click on the samples above.

<select>
<option>Bacon</option>
<option>Cheese</option>
<option>Tomato</option>
</select>

The 'Select' object appears as a multiple choice drop down menu. The user is expected to select one of the choices or leave the default displayed, - if one has been set by the option 'Selected' (below).

<select name="extras">

Scripts or Extensions can identify data as belonging to a particular input object.

Click here to view a couple of prepared common Menu Lists for your forms (new window).

<select name="extras" size="2">

The default without the size attribute is one line only (drop down menu). Multi-line displays allow scrolling only (single lines enable the drop down list).

<select multiple>

(Multi selection requires the use of the control key on PCs)

<option>Bacon</option>
<option>Cheese</option>
<option>Tomato</option>

The selected value(s) highlighted in the web page will be submitted to the server.

<option>Bacon</option>
<option selected>Cheese</option>
<option>Tomato</option>

This sample displays the second option by default. <option selected>Cheese</option>

<select>
<option value="add1">Bacon</option>
<option value="add2">Cheese</option>
<option value="add3">Tomato</option>
</select>

A predefined value can be passed to the receiving server program (script or extension). The value does not have to be the same as the text appearing in the drop down list.

The same value can appear very different amongst browsers as some use proportional fonts and others use non-proportional fonts. (Affects the layout appearance only)

Scripts or Extensions can identify data as belonging to a particular input object.

  
IMAGES as Buttons

An image can be used instead of the default "submit" button by using this code inplace of the <input type="submit" ... tag.

<form method="POST" action="http://yourdomain.name/cgi-bin/wooza.cgi">
<em>Enter Your Name</em>:<input type="text" name="namein" width="15">
<input type="image" src="nicedsgn.gif" width="87" height="15" alt="Nice Design Award">
</form>

  
Form BUTTON HYPERLINKS

Form Buttons can be used in place of Text and Image hyperlinks. However, NOTE; there are still many browsers in use (and therefore, visitors) that will not enable multiple forms on the same page - the choice is yours.

Referring to the samples below, all you have to do is insert your own URL or Relative Path in place of mine.

This form will take you to the top of the page.
<form action="#_top">
<input type="submit" value="top of page" name="B1">
</form>