Social Technology: Forms
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.
Read Chapter 17: Forms by Elizabeth Castro in HTML, XHTML, & CSS, Sixth Edition.
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:
- checkbox: one or more choices can be made by selecting a checkbox
- radio button: only one choice can be made of any radio-button group
- drop-down selection: one or more choices can be made from a list
- text entry: free data entry is allowed
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
Check out a mail-to form in action of Central Middle School.
Learn More
Form Basics from WEBalley
Form Mail - Service to handle form mail
Form Resources and Tutorials from W3 School
Form Tutor from PageTutor