Lesson 5: Forms

LESSON 5: Forms

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

TODAY's TOPICS
· The HTML form element
· Front end vs. back end/client vs. server
· Form tags, names and values
· CGI script and PERL
· The data process

FORMS
· 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.

STEP 1: 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.

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.

EXERCISE 1: CREATE A FORM USING THE FOLLOWING CODE
A simple form for users to send comments:
<html>
<head>
<title>Send us an e-mail...</title>
</head>
<body>
<font size="5">Send us an e-mail...</font>
<font size="4"><br></font>
<form method="POST" action="/cgi-bin/AlphaMail.pl">
<p><font size="4">Your Name (required):</font><br>
<input type="text" name="Name" size="50"></p>
<p><font size="4">Your E-mail (required):</font><br>
<input type="text" name="Email" size="50"></p>
<p><font size="4">Your message (required):</font><br>
<textarea name="Message" rows="6" cols="45" "WRAP"></textarea></p>
<p><input type="submit" value="Click Once to Send" name="B1">
<input type="reset" value="Clear" name="B2"></p>
</form>
</body>
</html>

STEP 2: Adding the Checkbox:
· 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.

EXERCISE 2: Add the following HTML code to create check boxes:
<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

STEP 3: Add 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.

EXERCISE 3: Add the following HTML code to create radio buttons:
<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

STEP 4: Add 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.

EXERCISE 4: Add submit and reset buttons to your page
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>

STEP 5: Add Drop Down menus and Lists with the Select Tag
Drop Down Menus:
· 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.

EXERCISE 5: Add a Drop Down menu to your form:
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>

HOMEWORK: BRINGING IT ALTOGETHER
Create the following form using tables and the form tags and attributes that you learned today in class.

Form 1