www.dtp-aus.com

< back
back to many other free HTML tutorials and lessons

Using FORMS - HTML 3.2 Form <Tags>
 
We are all familiar with forms on html web pages. For many different reasons people or companies are asking for our e-mail addresses, names and site URLs. Buying products on the Internet today is mostly a breeze and with the advent of security devices, the method used for submitting your details and hard earned money is usually performed via forms.

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.

browser, server, e-mail, harddisk

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.


Start with a SAMPLE FORM, Code & descriptions
Do NOT Submit this sample as it will create an error - there is no script for it.

This is a sample form that includes most of the form objects familiar to users of the Internet. Below the form is the code used and an explanation of how a script would receive the information once submitted.

Enter your E-Mail Address:
Are you: Male Female. Married: Yes No
Enter your Log-In Details:
ID: Password: Send me the e-mail News Letter:
Select your Favourite Colour and your Age Group from these lists:
Favourite Colour: Age Group:
Enter any additional Comments you wish to make:

             .


<form method="POST" action="http://yourdomain.name/cgi-bin/sendapp.cgi">
  Enter your E-Mail Address:<br>
<input type="text" name="email" size="20">
  Are you: Male
<input type="radio" name="mf" checked value="M">
  Female
<input type="radio" name="mf" value="F">.
  Married: Yes
<input type="radio" name="hitched" checked value="Y">
  No
<input type="radio" name="hitched" value="N"><br>
  Enter your Log-In Details:<br>
     ID:
<input type="text" name="id" size="12">
     Password:
<input type="password" name="pwrd" size="12">
  Send me the e-mail News Letter:
<input type="checkbox" name="letter" value="Y"><br>
  Select your Favourite Colour and your Age Group from these lists:<br>
     Favourite Colour:
<select name="colour" size="1">
  <option selected value="any">Don't Care</option>
  <option value="rd">Red</option>
  <option value="gn">Green<
/option>
  <option value="bl">Blue<
/option>
  <option value="pl">Puple<
/option>
  <option value="or">Orange<
/option>
  <option value="gr">Grey<
/option>
</select>
     Age Group:
<select name="agegrp" size="1">
  <option selected value="g1">18 - 25</option>
  <option value="g2">26 - 35<
/option>
  <option value="g3">36 - 45<
/option>
  <option value="g4">46 - 55<
/option>
  <option value="g5">56 - 65<
/option>
  <option value="g6">66 +<
/option>
</select><br>
   Enter any additional Comments you wish to make:<br>
<textarea rows="3" name="comment" cols="50"></textarea><br>
   <input type="submit" value="Submit the application" name="b1"> .
   <input type="reset" value="Reset" name="b2">
</form>
  
I have highlighted each form object in blue, and the text is included so that you can identify where and what you are looking at in reference to the actual form. As you go down the list you should also note the "name" and/or "value" attributes of each object.

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.

top of page

FORM TAGS and Attributes

Amongst the tags are browser specific extensions. Use these with caution. Primarily, but not only, Netscapes "jumping the gun" by the early use of HTML 3.0 proposals has always created problems for web page designers. There is no ratified HTML 3.0, and that proposal was altered AND then ratified by the W3C as HTML 3.2.

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> </FORM>
 
The <form> tag without attributes does nothing. This tag must include the 'action' attribute which contains path information so the server knows what script or program it (the server) has to execute. It is the Submit Button that activates the Browser into sending the action data and form object values etc to the server. The script or program, once started, receives a string of information that is made up of the various data values. From there the possibilities are almost endless as to what is performed by the server program. The <form> tag must include a closing tag; </form>. 
 
<FORM ACTION="url" METHOD=GET|POST> </FORM>
Defines the whole Form. All form objects must be included within the <form> tag pair. Descriptive text, images and tables can be included within the form.

Enter your ID:

<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="text|password|checkbox| radio|hidden|submit|reset">
These are the objects that can placed within a Form.


Single line Text Entry Box


Password Entry Box (hidden text)


Multiple choice Drop-Down Menu


Scrolling Text Box for long entries


Check Box


Radio Button

HIDDEN
An embedded value sent to the server (not visible on the page).


Push Button
(Send the form results to the server)


Push Button
(Reset all input objects to defaults)

<INPUT TYPE=HIDDEN>
A value embedded in the form code, but will not appear on the web page.

<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>
Create a Text Box that hides user input.

<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 NAME="***">
Each object can have a name for identification when the submitted query string (Form Results) is passed on the server: i.e. ' if $FORM{objectname}="fred" then $hisage="??" '. The variable $hisage has been given the value, default or entered, sent from the browser object named fred. (probably by a CGI script, another server based program or by 'server extensions')
<INPUT VALUE="***">
The default value of an object. Visible objects can be changed by the user. i.e. as above. A multi lined Text Box would probably have a value of NUL (nothing) ready for user input.
<INPUT CHECKED> (checkboxes and radio boxes)
Checked = ON, or OFF by default when the form page loads.

*

<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.

<INPUT SIZE=?> (in characters)
Defines the length in characters a text entry box is to appear on the page. 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)
<INPUT MAXLENGTH=?> (in characters)
Defines the maximum number of characters the user can enter into text entry boxes and scrolling text boxes. Some older browsers do not support this attribute. Server scripts etc. should check the length once submitted.
<SELECT> </SELECT> (Drop-Down Menus)
Defines the enclosed items (options) in a Drop-Down Menu

<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="***"> </SELECT>
Name of the List object.

<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 SIZE=?> </SELECT>
Defines the number of lines of choices (height) that display on the form for drop down menus (the width is controlled by the widest 'option' text).

<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> </SELECT> (can select more than one item)
If the listed items for sandwich ingredients were bacon, cheese, tomato, pepper and egg, the user can be allowed to make more than one choice by including this attribute..

<select multiple>

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

<OPTION> </OPTION> (the list of items that can be selected)
Defines the choices that appear in the drop-down menu list.

<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 SELECTED> </OPTION>
Defines the list item that displays when the page is loaded into the browser. Note: If an Option is not set as 'selected' then the first item will appear by default.

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

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

<OPTION Value=??????> </OPTION>
An Option Value can be passed to a server script or extension.

<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.

<TEXTAREA ROWS=? COLS=?> </TEXTAREA>
Defines the appearance of a Scrolling Text Box. (height in lines and width in characters)

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)

<TEXTAREA NAME="***"> </TEXTAREA>
The name of a multi line Text Entry Box

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

<TEXTAREA WRAP=on|off> </TEXTAREA>
Wrap Text

No Wrap

One of the 'maverick' Netscape HTML extensions. This attribute only works in Netscape Browsers.

  
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>

Enter Your Name:

  
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>

This form button will open a page in another window, leaving this one on the screen (close the second window once you have viewed it).
<form action="where.htm" target="_blank">
<input type="submit" value="Open another window" name="B1">
</form>

Form buttons can also be used with JavaScript for a variety of results.

top of page


Over 120 pages: All major topics divided into Classrooms
Free Backgrounds & Buttons! DTP and HTML "My First Page" HTML lessons
Tutorial Text Search Perl CGI Scripts Typography & Layout
4 pages of Links Visitors Book Perl Scripts Forum n/a
Free Links page Feedback Form Q/A contact Forum

pages Designed & Published - Ron F Woolley
e-mail 1997 '98. Last Revised:  Friday, 31 October 2003 22:04