[warebiz] :: HTML Made Simple :: HTML Forms

You are here --> [HTML Forms - Forming What?] --> Jump To Article

HTML Made Simple
Author: Mike Ware
Website: [warebiz] :: "The Programmer's Domain" - http://warebiz.tripod.com/
Email: warebiz@yahoo.com
Copyright © 2002 Michael Shawn Ware, All Rights Reserved.

TABLE OF CONTENTS
***************************************************************************************
    --> Getting Started with HTML - First Things First
    --> Ground Zero - Where Do I Begin?
    --> HTML Tags - It's All About Tags
    --> Character Formatting - How to Spice Up Text
    --> HTML Lists - Looking Sharp and Organized
    --> Hyperlinks - Getting Out and Around
    --> HTML Tables - Far From Picnic Tables
    --> Displaying Images - Adding Life to Your Pages
    --> [HTML Forms - Forming What?]
    --> Image Mapping and Editing - Importance of Being Unique
    --> Frames - Structuring Static Document Layout

***************************************************************************************

HTML Forms - Forming What?

An HTML document form allows the visitor to input information and possibly send that information to a server on the internet for processing. Form elements such as text boxes, radio buttons, checkboxes, and text fields provide a graphical interface so visitors can specify data very easily. Creating the HTML code to devise a web page is not difficult, but creating the scripting code that receives and processes the form data can be unintuitive. Constructing an HTML form for a web page is a two-part process. The first part being the actual creation of a form in an HTML document, which is covered in this article. The second part is the creation of a CGI (common gateway interface) program that will receive the form data and implement the action specified within the program located on a web server. The creation of a CGI program requires knowledge of a high-level programming language such as Perl, C, C++, ASP, PHP, etc.

A form is generated in HTML using the <form> element. All other form <form> elements such as <input>, <select>, and <textarea> must be placed within the opening and closing <form> tags. The <form> element has the following standard attributes:

    [ action="", method="", enctype="" ]

    action="" --> specifies the URL of the CGI program located on a web server which will process all active form data elements.
    method="" --> specifies the way in which the form data will be transferred to the HTTP server. Method options are "get" and "post" with "get" being the default method type.
    enctype="" --> specifies the way in which the form data will be encoded before it is transferred to the HTTP server.

The syntax for creating an HTML form consists of 3 distinct elements between the <form> tag. The best way to learn the types of form elements is to see first-hand examples with source code. Here is an outline of the <form> elements:

1 - input : This element is the basis for various button types and text types. <input> attributes are as follows:

Attributes:
    type="text | button | checkbox | file | hidden | image | password | radio | reset | submit" (default = text)
    --> Specifies the data entry field property to use as input.

    name=""
    --> Gives the input type a name for CGI processing purposes. Required for all form types except submit, reset, and button.

    value=""
    --> Either gives a form field an initial value or gives a label to a button. Required for radio and checkbox form types.

    align="top | middle | bottom | left | right" (default = bottom)
    --> Provides an alignment for an image form type.

    checked
    --> Specifies the initial state of a radio or checkbox form type to be selected.

    maxlength="#"
    --> Specifies the maximum length of form textfield characters.

    size="#"
    --> Specifies the visual number of textfield characters in a textfield.

    src="imageURL"
    --> Specifies the URL of the image for an input image type.

The type="" attribute is used to specify which input form type to use. Study the examples that follow to see which attributes may be used for each type. Some possible input types are as follows:

    text --> specifies single line text window
    radio --> specifies a group of buttons in which only one may be selected
    checkbox --> specifies a box which may be checked or unchecked; multiple boxes are allowed to be checked or unchecked
    reset --> specifies a button to clear all form values
    submit --> specifies a button to send the form data to a specified CGI program on a web server

The following HTML code segment is needed to produce a text box:

<form>
Example Text Box: <input type="text" size=25 name="examplebox">
</form>

The above HTML code segment would produce the following results in a web browser:

Example Text Box:

The following HTML code segment is needed to produce a set of radio buttons:

<form>
<input type="radio" name="size" value="small">Small
<input type="radio" name="size" value="medium">Medium
<input type="radio" name="size" value="large">Large
</form>

The above HTML code segment would produce the following results in a web browser:

Small Medium Large

The following HTML code segment is needed to produce a set of checkboxes:

<form>
<input type="checkbox" name="topping" value="pepperoni">Pepperoni
<input type="checkbox" name="topping" value="sausage">Sausage
<input type="checkbox" name="topping" value="mushrooms">Mushrooms
<input type="checkbox" name="topping" value="black olives">Black Olives
</form>

The above HTML code segment would produce the following results in a web browser:

Pepperoni Sausage Mushrooms Black Olives

The following HTML code segment is needed to produce a reset and submit button:

<form>
<input type="reset" value="Reset">
<input type="submit" value="Submit">
</form>

The above HTML code segment would produce the following results in a web browser:

2 - select : This element creates a pull-down menu. The <option> element is included inside the <select> element in order to define menu choices. The selected attribute in the <option> element specifies the default menu option to be selected.

Attributes:
    name=""
    --> Gives the <select> element a name for CGI processing purposes. (required)

    size="#"
    --> Specifies the number of visible rows.

    multiple
    --> Specifies whether multiple <select> entries may be selected simultaneously.

The <option> element is used to specify the menu options of a <select> form type.

Attributes:
    value=""
    --> Specifies the value to be associated with the <select> form type name if the menu option is selected.

    selected
    --> Specifies that the menu option is selected or shown by default.

The following HTML code segment is needed to produce a pull-down menu:

<form>
What is your favorite meal?
<select name="type of food">
<option selected value="pizza">Pizza
<option value="hamburgers/fries">Hamburgers and Fries
<option value="tacos">Deluxe Tacos
<option value="lasagna">Hot Lasagna
<option value="chicken">Bar-b-Que Chicken
<option value="burritos">Bean Burritos
<option value="ribsteak">Prime Rib Steak
</select> </form>

The above HTML code segment would produce the following results in a web browser:

What is your favorite meal?

3 - textarea : This element specifies a multi-line text area. The columns and rows attributes in the <textarea> specify the default dimensions of the field.

Attributes:
    name=""
    --> Gives the <textarea> element a name for CGI processing purposes.

    rows="#"
    --> Specifies the number of visible <textarea> row dimensions.

    cols="#"
    --> Specifies the number of visible <textarea> column dimensions.

The following HTML code segment is needed to produce a multi-line text field:

<form>
Enter comments:
<textarea name="words" cols="45" rows="8">
Start...
</textarea>
</form>

The above HTML code segment would produce the following results in a web browser:

Enter comments:

When the "submit" button is clicked, the form data is sent to a CGI program (specified in the action attribute of <form> tag which should be running on a web server. The CGI program receives the form data and processes the data. If the CGI program is not created, the HTML form basically serves only a visual appeal with no interaction or processing capabilities.. It will only look like an online form is on a web page until a CGI program is implemented to process the active form data.

With HTML forms covered in an extremely brief fashion, we can now cover how image maps provide efficient navigational methods in an HTML document. Read on for more about image mapping and editing...

Move on to next topic: Image Mapping and Editing - Importance of Being Unique

Back to Top