bannermuseum

Many people like to add interactive elements to their website such as surveys, guestbooks, and registration forms. Forms are used for people to enter their information and submit this information for posting or analysis.

It's easy to incorporate the form tags into your page. The tough part is getting the form to work in practice. This is because the data handling part of a form is often handled by your web server. You may or may not have control over the scripts on your web server. Before jumping into the development of forms, check with your service provider and ask about access to CGI scripts and other server-side processing tools.

readRead Chapter 11 by Rob Huddleston in HTML, XHTML, & CSS.

Forms Basics

There are many times when you may wish users to complete forms. In most cases, you'll want a record of the information entered into the form. This information might be sent to the webmaster through email, posted in a guestbook, or recorded in a database. Teachers use forms for online homework. Librarians use forms for patron inquiries, surveys, and book reviews.

Most forms involve a combination of JavaScripts and CGI scripts.

Using CGI

CGI (Common Gateway Interface) is a protocol for how the Web server communicates with a program. While a HTML document is static, a CGI program outputs dynamic information.

Forms are generally written in HTML and delivered to the server with a submit button. The information from the user's browser is sent through the Web server to a program that processes information entered by the user. The server then sends information back through the server to user's browser. Special software or CGI scripts must be added to the web server for this process to work. As such, beginning web developers sometimes stay away from CGIs. However, many web service providers include popular CGIs such as form mail on their web servers making the procedure much easier.

Using Forms

You can categorize forms into four basic types:

Every type of form is contained within a <form> tag. You commonly use the method and the action attributes if you are sending data to a server to be processed. In this example, the value of the action attribute is the location of a CGI script:

<form method="post" action="cgi-bin/filename.cgi">The Form Goes Here</form>

Unless you have a web server that allows CGI scripts to be run, you won't be able to test this action, however. You can find on the Web many services (free and fee-based) that allow you to process scripts. We will discuss this topic more in class, so don't get too sidetracked with all that you can possibly learn about forms. Know at least how to construct the basic forms types.

Note: Forms do not need to be used solely for server-side processing. Keep this fact in mind for when you study DHTML later this semester.

The method of submitting or resetting the form data is often via a pre-established set of buttons indicated in the <input> tag using the type attribute:

<input type="submit" value="text that appears on the submit button" />

<input type="reset" value="text that appears on the reset button " />

Note: The <input> tag does not have its own end tag. The preceding examples would thus be for XHTML compliance.

Here are the common form types. In each of these types, you would be interested in receiving the "value" of the value attribute. Look at the source of the samples so that this will all make sense.

Checkbox

<input type="checkbox" name="name" value="somevalue" / >Some choice

Sample: checkbox form

Radio button

<input type="radio" name="name" value="somevalue" / >Some choice

Sample: radio button form

Drop-down selection

<select name="name">
<option value="somevalue">Some choice</option>
</select>

Sample: drop-down selection form

Text entry

Note the two types of text-entry forms:

<input type="text" name="name" size="50" />

<textarea name="name" cols="60" rows="5" wrap="wrap" ></textarea>

Sample: text-entry forms

Using an e-mail form

You can take advantage of the user's own e-mail client software with this form. Unfortunately this doesn't work if the user's computer isn't configured for email:

<form method="post" enctype="text/plain" action="mailto:alamb@eduscapes.com">Form Goes Here</form>

Sample: non-CGI e-mail form

FYI: Here is an example of a CGI sendmail script (text file).

The method of submitting or resetting the form data is often via a pre-established set of buttons indicated in the <input> tag using the type attribute:

<input type="submit" value="text that appears on the submit button" />
<input type="reset" value="text that appears on the reset button " />

Your form needs a way to make selections or enter text.

* Checklist example is at form1.html
* Radio example is at form2.html
* Drop down selection is at form3.html
* Text entry is at form4.html
* Email book review form is at form5.html

Using a Service

There are a number of online services that will facilitate use of forms. Response-o-matic is one of the most popular. It allows users to create an online contact form.

Rather than using HTML, it's also possible to use other services to creating and embedding forms in your project. For instance, Google Forms allows users to create a form. The responses are accessed through Google Docs.

Learn More

CGI Resource Index

Form Basics from WEBalley

Form Mail - Service to handle form mail

Form Resources and Tutorials from W3 School

Form Tutor from PageTutor


| eduscapes | IUPUI Online Courses | Teacher Tap | 42explore | escrapbooking | About Us | Contact Us | ©2006-2011 Annette Lamb and Larry Johnson