Forms

Objectives

In this module you will learn create interactive forms. A form is a great way for your user to communicate with you or to gather information. At the beginning of the course you filled out an online survey which is a good example of a simple form. Forms are used everyday on the Web for email forms, search boxes, guestbooks and more.

Forms may seem slightly intimidating at first, but as you work through this module you will find that a form is just a collection of fields. You can make forms as simple or as complex as you want.


CGI Scripts

Before you begin to create forms you need to understand how they are processed on the Web. One way of processing the information is by CGI script. A CGI (Common Gateway Interface) script is any program or set of commands running on a Web server that receives data from the Web page and then acts on that data to perform a certain task. These tasks might include adding the information to a database or posting it to a guestbook. CGI programs are often written in Java, C++, or Visual Basic programming languages. CGI scripts are written in Perl, AppleScript, or Unix programming languages. Because you will not generally have control over your Web server you would need to contact your host to see what scripts are available for your use.

You don't always have to use CGI. The most common alternative is to a mail program. You can use the mailto URL to designate an email address where the information would be sent. This command is supported by most of the latest browsers.You will use the mailto URL to complete the forms for this course.


<FORM> element

Every form must use a form element <form>, </form> which will designate where a form starts and what action is to be taken. The <form> tag uses three attributes: action, method, and enctype.

Action and Method are used to specify what action is to be performed. For the method="post" the action is the email address where the information is to be posted. For example <form method="post" action="mailto:tcanada1301@yahoo.com">. For the method="get" the action is the URL that the browser will go and get for the user. For example <form method="get" action="http://www.oocities.org;">.

Enctype indicates what MIME type should be used when the information is posted. Types would include plain text, audio files, or files for specific applications.


Input Types

The forms is then comprised of special elements for each input field. The input types include single-line text boxes, checkboxes and radio buttons, pull-down menus, multi-line text areas, and push buttons with preset function. Your forms will be a combination of these fields. The type is set with an attribute to the input element <input type="text" name="First Name">. The name attribute will appear when the information is posted to your email along with the information that was entered into the box. The value attribute sets the text that appears on button or beside checkboxes and radio buttons. There are ten types that can be specified:

"TEXT" - used for single -line text boxesb

"PASSWORD" - Similar to text, except characters are displayed as astericks when typed

"CHECKBOX" - A box that can be checked.

"RADIO" - Similar to checkbox, except that in a group of radio buttons only one button can be selected at a time.

"SUBMIT" - Submits the information to address set in the <form> element.

"IMAGE" - Exactly the same as a submit button, except that you can specify an image instead of the normal gray button.

"RESET" - Clears all of the input on a form.

"BUTTON" - Creates a button that can perform an action specified by you

"HIDDEN" - A hidden input is not displayed at all. It's used to send fixed information with the form data.

"FILE" - Can be used to send a file fron the surfer's computer along with the rest of the form data.

You can also use the <select> element to create a drop-down menu for your user.


View this form example and view the HTML source to see how it all fits together