Introduction to HTML
Forms
Copyright © 2000 - 2002 Randy D. Ralph.  All rights reserved.

  Audio Tables   Course Contents  
In place June 2, 2000.

Contents:
Basics <FORM> <INPUT> <OPTION> <SELECT> <TEXTAREA>

Forms Basics:

|   Go to:   |   Basics   |   <FORM>   |   <INPUT>   |   <OPTION>   |   <SELECT>   |   <TEXTAREA>   |

<FORM> Command:

Command Syntax -

<FORM command parameters>
  Form Elements
</FORM>

Defines and contains a form which can be used to gather user input, format it and process it according to provided parameters and included form elements.

Command Parameters:

action="URL"

Defines an URL to which the output of the form is directed.  This is generally a CGI script or some other program capable of processing the information gathered by the form.  The access protocol set for the target URL, along with the enctype and method command parameters determine the way in which gathered information is submitted and processed.

If no action parameter is included, then the URL of the HTML document which includes the form, itself, becomes the target of the form.

enctype="data encoding format"

Defines the format to be used to transmit user form responses to the host server if the protocol provided by the action command parameter does not require a specific format.  Generally, this parameter is not necessary if data is MIME encoded.

method="get|post"

Defines the method by which the form contents will be transmitted to the host server.

Where:

  • get -
    is the default method - may require an enctype.
  • post -
    is the generally preferred method which formats data using MIME encoding type application/x-www-form-urlencoded.
     
Form Elements:
Follow the links below to learn more about form elements:

<INPUT command parameters>

<OPTION command parameters></OPTION>

<SELECT command parameters></SELECT>

<TEXTAREA command parameters>

Example:
<FORM method="post" action="../cgi-bin/gform"> Name: <INPUT type="text" name="Name" size=40><br> Email: <INPUT type="text" name="EMaddress" size=40><br> Site Name: <INPUT type="text" name="PTitle" size=40><br> URL: <INPUT type="text" name="URL" size=40> <INPUT type="submit" value="Send"> </FORM> Yields -
Name:
Email:
Site Name:
URL:

  • Defines a form which contains five data input elements that solicit information from the form user.

  • Declares that the form method is post.

  • Declares that the URL to which the form output should be directed is ../cgi-bin/gform.  This would submit the form output to the program gform for processing.
Forms and form elements can be included within tables for precise alignment of components to produce a more pleasing effect.

Forms cannot be nested one within another, but a single web page can contain multiple forms.

|   Go to:   |   Basics   |   <FORM>   |   <INPUT>   |   <OPTION>   |   <SELECT>   |   <TEXTAREA>   |

<INPUT> Command:

Command Syntax -

<INPUT command parameters>

Defines a data input field within a <FORM> in any one of several types as defined below.

Command Parameters -

align="left|right|top|middle|bottom"

This parameter uses the same values as does the <IMG src=> command used for placement of inline images, however, precise alignment of form elements is best accomplished using tables.

checked

This parameter requires no value.  It indicates that if the form element is a radio button or a check box it is preselected as the default in a defined list of options.

maxlength="# of characters"

Defines the maximum response length, in characters, that is allowed for input in a text box.

name="input element name"

Provides the defined input element with a name.  The name should be unique within the form.

size="# of characters"

Defines the display width of a text input element in characters.  Input is allowed beyond the size of the input box, but cannot exceed any set maxlength.  Long input simply scrolls the content of the box toward the left so that the user can see what is being keyed.

src="URL"

Defines the URL of an image to place in a form only where type is image.

type="input type"

Where input type can be any from the list of predefined types below:

  • checkbox -
    declares the input type to be a checkbox

  • hidden -
    declares the input type to be hidden from the user's view
    useful for using the form to send identifying information back to the server

  • image -
    places an image in the form for use as an alternative to the standard submit button

  • password -
    declares a text type box, but the input is not displayed as it is keyed

  • radio -
    declares the input type to be a radio button
  • reset -
    defines a form reset or clear button

  • submit -
    defines a form submit button

  • text -
    declares the input type to be simple text

  • textarea -
    declares the input type to be a text block area capable of receiving a large block of input text.

    Use the more advanced <TEXTAREA> command instead.

value="default value"

Establishes a default value in any defined input element.  Radio buttons require values to permit selection.
 

Examples:
<INPUT type="checkbox" name="pick" value="First" checked>First<br> <INPUT type="checkbox" name="pick" value="Second">Second<br> <INPUT type="checkbox" name="pick" value="Third">Third<br> <INPUT type="checkbox" name="pick" value="Fourth">Fourth Yields -

First
Second
Third
Fourth
All defined checkboxes share the same name but represent different values.

When the form is submitted, only the values corresponding to the checked boxes are transmitted to the server.

Checkbox selections are not mutually exclusive.

<INPUT type="hidden" name="return_address" value="rdralph@netstrider.com"> Produces no visible display within the form but instructs the server that the return_address value is rdralph@netstrider.com.
<INPUT type="image" src="../graphics/submit.gif" name="submit" align="middle" border=0> Yields -

A placed image as a clickable submit button.

The image placement takes the same command parameters as the <IMG src=> command for placement of inline images.

Language:<br> <INPUT type="radio" value="Danish" name="language" checked> Danish<br> <INPUT type="radio" value="Icelandic" name="language"> Icelandic<br> <INPUT type="radio" value="Norwegian" name="language"> Norwegian<br> <INPUT type="radio" value="Swedish" name="language"> Swedish Yields -
Language:
Danish
Icelandic
Norwegian
Swedish

An array of radio button choices.  Try selecting a different choice from the preselection Danish.

All defined radio buttons share the same name but represent different values.

When the form is submitted, only the value corresponding to the selected radio button choice is transmitted to the server.

Radio button selections are mutually exclusive.

<INPUT type="reset" value=" Clear "> <INPUT type="submit" value=" Submit "> Yields -
Standard reset and submit buttons which display the text set as the value.  The reset button clears form content.  The submit button sends the form content to the host server using the proscribed method and action.
Name: <INPUT type="text" name="name" size=40><br> Address: <INPUT type="text" name="address" size=40><br> City: <INPUT type="text" name="address" size=14> State: <INPUT type="text" name="address" maxlength=2 size=2> Zip: <INPUT type="text" name="address" maxlength=5 size=5> Yields -
Name:
Address:
City: State: Zip:

Each text field defined is independent of all others so long as the field name is unique to the form.  Maxlength parameters are set on State and Zip to control input length.

Much tighter and more precise control over placement of form text input fields can be achieved if they are arranged in tables.

|   Go to:   |   Basics   |   <FORM>   |   <INPUT>   |   <OPTION>   |   <SELECT>   |   <TEXTAREA>   |

<OPTION> Command:

Command Syntax -

<SELECT command parameters>
  <OPTION command parameters>Displayed Option 1
  <OPTION command parameters>Displayed Option 2
  . . .
</SELECT>

The command defines all the available choices in a drop down selection list when used in conjunction with the <SELECT> statement within a <FORM> command.

Command Parameters:

selected

Indicates which, if any, of the option choices is selected as the default choice.

value="select list name"

Provides a choice value if different from the displayed choice, otherwise the displayed choice becomes the value when selected.

The width of the largest displayed option text determines the width of the selection list drop down selection dialog box.

Example:
<B>Menu of Fruits:</B><BR> <SELECT name="fruit" size=6> <OPTION value="err">--Select One-- <OPTION value="app">Apples <OPTION value="ban">Bananas <OPTION value="chr">Cherries <OPTION value="grp">Grapes <OPTION value="prs">Pears </SELECT> Yields -
    Menu of Fruits:
When placed within a <FORM> command, produces a selection menu.

Unless the multiple command parameter is used, options are mutually exclusive.

The selection list returns the displayed values for the selected options to the file server unless alternate value parameters are set in the <OPTION> statements.

|   Go to:   |   Basics   |   <FORM>   |   <INPUT>   |   <OPTION>   |   <SELECT>   |   <TEXTAREA>   |

<SELECT> Command:

Command Syntax -

<SELECT command parameters>
  List of Options
</SELECT>

The command encloses, defines and contains an option list used in conjunction with <OPTION> statements within a <FORM> to produce a drop down selection list.

Command Parameters:

multiple

Permits the user to select multiple listed options.

name="select list name"

Provides the name of the select list for forms information processing purposes.

size="# of visible items"

Defines the height of the viewable area by the number of items in the selection list to be displayed.

Must contain a list of <OPTION> statements which define the choices available and establish any default choice.

The width of the largest displayed option text determines the width of the selection list drop down menu dialog box.

Example: <B>Select a Study Area:</B><BR> <SELECT name="major" size=1> <OPTION>Biology <OPTION>Chemistry <OPTION>Engineering <OPTION>Mathematics <OPTION>Physics </SELECT> Yields -

Select a Study Area:

When placed within a <FORM> command, produces a drop down menu.

Unless the multiple command parameter is used, options are mutually exclusive.

The selection list returns the displayed values for the selected options to the file server unless alternate value parameters are set in the <OPTION> statements.

|   Go to:   |   Basics   |   <FORM>   |   <INPUT>   |   <OPTION>   |   <SELECT>   |   <TEXTAREA>   |

<TEXTAREA> Command:

Command Syntax -

<TEXTAREA command parameters>
  included text
</TEXTAREA>

The command encloses, defines and contains a text input block in a <FORM>

Command Parameters:

cols="# of characters"

Defines the width of the text area by the number of characters.

name="text area name"

Provides the name of the text area for forms information processing purposes.

rows="# of lines"

Defines the height of the text area by the number of lines.

Example: 
<TEXTAREA name="comments"
  cols=30
  rows=4>
Comments:
</TEXTAREA>
            </pre></big>
            <b>Yields -</b>
            <p>
<font size=3><FORM>
<TEXTAREA name="comments"
  cols=30
  rows=4>
Comments:
</TEXTAREA>
</FORM>

When placed within a <FORM> command.

Basics <FORM> <INPUT> <OPTION> <SELECT> <TEXTAREA>

  Audio Tables   Course Contents  
You are here:  NetStrider   »   Tutorials   »   HTML   »   FORMS   «