This Lesson Is Designed for You to Gain Some Basic Information About HTML Forms. When You

T3L7

Forms

Introduction

This lesson is designed for you to gain some basic information about HTML Forms. When you finish this lesson, you should be able to:

• Describe the basic HTML Form elements.
• Recognize the importance of “intelligent” HTML Forms.

HTML Forms allow the developer to begin creating a more intelligent and interactive aspect to the traditionally limited interaction capabilities of HTML.

HTML forms, or forms as they are commonly referred, place a form type object on the web page that allow the user to input data and submit it for various reason. Essentially, a form is a graphical user interface with text entry fields and areas, buttons, checkboxes, drop-down menus, scrolling lists, etc. Form objects can be used to let the user submit comments, or enter database search criteria, or select from a host of other input options.

HTML Forms:

• Elements of HTML Forms
• An example of an HTML Form
• HTML Forms Activity
• HTML Form Summary

Additional Resources

BigNoseBird.com <Form> tag

[[link to ]]

Elements of HTML Forms

Form Elements

Basic form input elements include:

• Check box
• Radio Button
• Drop Down Menu
• Edit Box
• Submit Button
• Reset Button

Each form element has a NAME associated with it. For example, if you had a form with a text area where the user was to type in a company name, the HTML tag would look like this:

<input type="Text" name="Customer_name">

When a user clicks a radio button, checks a block, or types data into an edit box the information is encoded in the form data.

When a user presses a form button indicating the form should be "submitted," this initiates sending information stored in the form to the server via a CGI program (see the lesson on CGI for more information)However, if you don't have CGI capability or you simply want to have the data emailed to you, you may use the mailto: action attribute (in this case the form information will appear in the browser's mail window; then you click on the Send button to actually mail it). The real value of a form is what you can do with the information it captures. When designing your form take the time to lay out the format and ensure it contains all the elements you wish to capture.

You must determine if your service provider supports CGI. If they do not support CGI, the mailto option is a suitable workaround but shouldn’t be relied upon as a complete solution. A mail script or program is much more reliable. Here's a example form tag with mailto information:

<FORM METHOD = POST

ENCTYPE = "text/plain"

ACTION = "mailto:">

The ACTION tag tells the browser to pop up an e-mail window with all the form information in the body of the e-mail when the used click on the Submit button.

Construction Elements of a Form

The following elements are used to create forms:

• <FORM> A document containing a form.
• <INPUT> An input field.
• <SELECT> & <OPTION>A selection from a list of menu options.

• <FORM> This tag is the container for the entire form and has several attributes that dictate how it interacts with the server. This tag cannot be nested. In other words, you cannot place one <FORM> tag within another <FORM> tag.

<Form Action = “ URL” Method=”Get|Post” Enctype=”Mime Type”

:

:

</Form>

The Action URL is typically the address of a CGI script that is called in order to decode the information being passed.

The Methods are Get or Post. When you use the Get method (also the default method), the form information is appended onto the end of the action URL being requested. A new screen appears with the form data showing. This is used with simple forms or if you would like the user to be able to bookmark the results.

The Post method transmits all posted form information immediately after the form is submitted. The Post method is good to use when you have a great deal of information to send. The Get method is unable to hold as much information as the Post method. The Post method also provides a little bit of security since the user cannot see how the information is being passed to the server.

The Enctype is usually "text/plain."

• <INPUT> - This tag represents an object on the form that a user can edit or activate.

These type of input form objects include:

Button – Allows you to embed a button directly on an HTML form.

Checkbox – Used when presenting the user with several options that can be chosen in any combination.

Hidden – No field is visible to the user but information stored here is submitted with the form information.

Image - Works in the same manner as the Button except you can embed an image of your choice instead of the traditional grey button.

Password – This works identical to the Text item except when a user types in this space they cannot see the results in order to maintain security.

Radio – Used when needed to evaluate a single value. Can only be used in the “either / or “ sense.

Reset - Used to clear all the form elements so a user can start entry over.

Submit - Places a button on the form that submits the form when clicked.

Text – A single line entry field.

TextArea – A multiline entry field.

• <SELECT> - Allows the user to select from a list of options that have descriptive labels.
• <OPTION> - Used in conjunction with the <SELECT> and represents each choice in the menu.

The <SELECT> element is usually employed as a drop –down menu as seen in the following example.

<SELECT Name=”Colors”>

<OPTION>Red

<OPTION>Green

<OPTION>Blue

<OPTION>Black

<OPTION>Silver

</SELECT>

HTML Form Summary

This lesson is designed for you to gain some basic information about HTML Forms. When you are finished with the lesson, you should be able to do the following:

• Describe what an HTML Form is.
• Describe the essential HTML Form tags.
• Explain the difference between the GET and POST methods.
• Understand the role of a CGI script.

A short summary of these topics are listed below. If you do not understand these things, you should review the lesson at least once. If you are still having difficulty, you should consider other sources of information that compliment this lesson, such as textbooks, tutors, and instructors.

HTML Form

A mechanism that you can build into your web page to make it more interactive by capturing information.

Essential HTML Form Tags

• Form
• Input
• Select & Option

Essential HTML Form Elements

• Button
• Checkbox
• Hidden
• Image
• Password
• Radio
• Reset
• Submit
• Text
• TextArea

GET and POST Methods

Get

Appends information to URL.

• Easily bookmarked.
• Not very secure.

Post

Keeps form information hidden.

• Used when needing to pass a large amount of information.

CGI Scripts

Provides forms with the ability to have their information processed on the server.

1