LESSON 5: FORMS

< Back to table of contents
<Previous lesson               Next lesson >

HTML RESOURCES MATERIAL FOR GETTING STARTED:
Online HTML Reference Guide

On the Web:
· Webmonkey (www.webmonkey.com)
· HTML writer's guild (www.hwg.org)
· CNET's Builder.com (builder.cnet.com)
· World Wide Web Consortium (www.w3c.org)
· Lynda.com (www.lynda.com)

Printed material:
Elizabeth Castro, HTML 4.0 for the World Wide Web: Visual QuickStart Guide, PeachPit Press.

Forms in HTML
Forms are the key to interactivity and the manner in which you find out what your user is interested in. Forms turn the Web from a billboard into an interactive playground by allowing for a two-way transfer of information. What's behind this transfer? A frontend action that interacts with a backend computation.

THE FRONT END:
The user input from the browser is the front end. Included in the front end is the HTML the structure or shell that consists of gifs, jpgs, text, fields, labels, buttons that the visitor sees and fills out.

THE BACK END:
The server is the backend where the information that's input is processed.

CGI - The Bridge Between the Two
The link between these two aspects of interactivity is called the CGI (Common Gateway Interface) script, which takes the front-end information and converts it into a format that a server can process. The process is executed in real-time, so that it can output dynamic information. It communicates with applications on the server to provide customized information or to builds interactive exchanges. CGI scripts are usually written in Perl, though they can be written in any script or programming language.

Browser-Server Interaction:
During a document exchange, you (the client) request a document from a WWW by indicating a domain name. The WWW server displays that document on a user monitor through a browser. If that document contains a link to another document, and the user activates that link, the WWW client will then fetch and display the linked document.
When we get to form, the HTML identifies a file that contains a program or script rather than an HTML document. That program may be executed when a user activates the link containing the URL.

HOW A CGI SCRIPT IS INVOKED IN HTML:
<a HREF=http://www.bethcataldo.com/cgi-bin/feedback_form/>Feedback form</a>
· The URL declaration says to execute the feedback-form cgi program on www.bethcataldo.com from the cgi-bin directory.
· The hypertext document links to a file that holds the CGI program that will be executed if a user activates the link. This link is a "normal" http: link, but the file is stored in such a way that the server can tell that the file contains a program that is to be run, rather than a document that is to be sent back to you.
· When the program runs, it prepares an HTML document on the fly, and sends that document to you, which displays the document as it would any other HTML document.
· On most HTTP servers these CGI programs are stored in a directory called cgi-bin, and so they are also sometimes called "cgi-bin scripts."
· Once the CGI script is invoked, it performs whatever actions it's been built to supply based on the input from the browser. Each element on the form you create will have a name and a value associated with it. The name identified the data that is being sent. For example: visitor_name. The value is the data (say, Cataldo) and comes from the form that's been filled out.
· When you hit a submit button, the information is sent to the server. The CGI script takes the information and sorts it so that a database or a human being can make sense of it. These could include getting user information (including how much time and the path they followed throughout your site, searching a database, subscribing)
· The CGI program formats the results and delivers them to the server. The server accepts the results and passes them to the browser, which renders them for display for the user. This cycle can continue until the form is completely filled out or the information that the user has requested is displayed.

CREATING A FORM Vs. WRITING A SCRIPT
Creating a form is straightforward and we'll learn how to do that in class. Writing a CGI script is a different animal altogether because you have to know some programming language to make it happen. You can easily find free CGI scripts on the Internet and most ISPs offer up common ones for features such as measuring traffic, registration, feedback and message boards.

FINDING SCRIPTS:
If you don't want to learn programming, there are many places to find CGI scripts on the net. If you sign up with and ISP, they will probably provide you with some standard CGI scripts. Here are some sites that offer free scripts to get your started:

Dream Catcher's Web
http://www.dreamcatchersweb.com/scripts/

Best-of-the-Web forms and scripts: (portal)
http://best-of-web.com/computer/cgi_forms.shtml

The CGI Directory
http://www.cgidir.com/

Hosted scripts.com
http://pages.hostedscripts.com/

THE SYNTAX OF FORMS
· Basic forms are created by code from which the user's browser interprets into graphic elements such as textboxes, radio buttons and checkboxes. These elements constitute the FRONT END of the information exchange. While HTML and JavaScript can handle some tasks, modest math and information distribution, the vast majority of form use requires backend calculations. Most of these calculations, however, use the existing set of forms.

· The first part of the form syntax, not surprisingly, is the <FORM> tag, which sets the method for handling the information. The form tag alerts Netscape that a form or forms are coming. Internet Explorer will usually post without the form tag, but since it's rare that anyone would be programming just for one browser, it should be a regular part of your layout. The attribute usually will be "POST" in order to send the information for processing. The "ACTION" tag tells the browser where to post the information, which is usually toward a server-based CGI script application. Form tags must also be closed at the end of your form or page. NOTE: Form elements cannot be nested.

<FORM ACTION="ANYURL.ext" METHOD="GET/POST">

INPUT TAG AND ITS ATTRIBUTES
· Next, comes the <INPUT> tag, which designates where the users will provide their information. The associate TYPE tag dictates which form will be used and the type of data the form will take. Text is the default. Each input should also be named.

TEXT:
· Text is used for either single line entry, such as name or address input lines, or for larger blocks, such as feedback forms. The SIZE attribute designates the size of the text box in characters. Larger text boxes are designed in the same fashion as table cells, by setting rows and columns (a column is a single character).
Note: Substituting PASSWORD for TEXT will substitute dots for text.

· You can also use the TEXTAREA tag to create a larger space for text to be typed into. The following code would create a text box that would accommodate ten lines of text, with 100 characters in each row.

<TEXTAREA NAME="bodytext" ROWS="10" COLS="100" WRAP="HARD">

The following HTML code creates check boxes:
· Checkboxes are for multiple fields, that is to say where users choose one or more than one option. This requires that they're all named the same name. The value will be the information sent to the backend server identifying the items that the user choose. Using the attribute "checked" will make that item be checked as a default.. A takeout menu from the Web is a good example of where you'd use checkboxes: choose a salad, a main course and a dessert from a list of choices.

<font size="4">What are you interested in learning?
<p>
<input type="checkbox" name="programs" value="html" checked>HTML
<input type="checkbox" name="programs" value="cgi">CGI
<input type="checkbox" name="programs" value="javascript">JAVASCRIPT
<input type="checkbox" name="programs" value="perl">PERL

The following HTML code creates radio buttons:
· Radio buttons are used to select a single value from a set of alternatives. Payment options are a good example: Choose: VISA, M/C or AMEX.

<font size="4">What are you interested in learning?
<p>
<input type="radio" name="programs" value="html" checked>HTML
<input type="radio" name="programs" value="cgi">CGI
<input type="radio" name="programs" value="javascript">JAVASCRIPT
<input type="radio" name="programs" value="perl">PERL

The following HTML code creates submit and reset buttons:
· The Submit tag is the code that creates the gray button that all Web users are accustomed to clicking on to submit a form. The submit button sends the information within the named parameters to the designated location. The VALUE attribute tells the browser what text to put on the button. The RESET tag works the same way, creating a reset button, which clears whatever information was entered by the user.

Replace the Input type="submit" with the following:
<p><input type="submit" value="Click Once to Send" name="B1">
<input type="reset" value="Clear" name="B2"></p>

The following HTML text creates Drop Down menus and lists:
· Drop down menus are best used to offer users pre-set options. Drop down menus are created using the <SELECT> tag, with its subset of options, using the <OPTION> tag. In addition, the MULTIPLE SIZE attribute dictates how many of the options will be initially visible.
· You can create a list by putting a SIZE attribute with the SELECT tag. That will display the number of items that you've designated.
· Note: The SELECTED attribute attached to an OPTION, (not to be confused with the SELECT tag) will highlight the option initially offered.
You must close the SELECT tag.

To add a dropdown menu (user can check more than one):
<font size="4">How long have you been studying programming?
<p><select name="experience">
<option value="none" selected>NONE
<option value="1-2 years">1-2 years
<option value="3-4 years">3-4 years
<option value="5 years">5 years
<option value="More than 5 years">More than 5 years
</select>

<back to top>