| CIS 207 | Web Page Development - HTML |
Forms collect information from users by providing window-like controls on an HTML page. If you've ever signed up for a free email account or purchased anything online you've used a form to provide your name, address, phone number etc. to the web site you were visiting.
Although HTML supports tags that allow you to create forms, it does not have the ability to process that information. One way of processing information is to send it to a program running on the Web server, called a CGI script. A CGI (Common Gateway Interface) script is any program or set of commands running on the Web server that receives data from the Web page and then acts on that data to perform a certain task.
CGI is not a language. It's a simple protocol that can be used to communicate between Web forms and your program. A CGI script can be written in any language that can read STDIN, write to STDOUT, and read environment variables, i.e. virtually any programming language, including C, Perl, or even shell scripting.
Here's the typical sequence of steps for a CGI script:
See CGI Made Really Easy at http://www.jmarshall.com/easy/cgi.
By giving users access to programs that react to user input, the Web becomes a dynamic environment in which companies can interact with customers. Much better than users simply reading static web documents. CGI scripts make it possible for Web authors to:
Has anyone ever tracked a package online? UPS, USPS, FEDEX and many other companies offer online tracking of packages. You simply logon to their web site and punch in your tracking number, and instantly, you get current live data describing exactly where your package has gone since it left its destination. Once it arrives at its destination, you can even see who signed for it and exactly what time they received it. This is live data on the web!
When you signed our class guestbook to turn in the URL to your first web assignment, you filled out a form. When you clicked the SUBMIT button, your information was immediately added to the database. From that point forward, anyone that visited the guestbook and clicked on the VIEW button to view entries, got current information which included your newly added entry. This is live data on the web!
Since CGI scripts run on the Web server, you, as a Web page author, might not have the ability to create or edit them. In some cases, another programmer will create the scripts offered by the web server and provide you with their specifications, indicating what input the scripts expect and what output they create.
CGI scripts can be written in a variety of different computer languages:
Which language is used depends on the Web server. When you run a CGI script, you are actually running a program directly on the server. System administrators are often hesitant to grant access to the server due to the potential danger from computer hackers and the drain on system resources caused by large numbers of programs running simultaneously.
As we work through the Forms tutorial, we will not have access to CGI scripts on the Web server at Jackson Electronics, so we'll just be working with the HTML end of this process.
Forms often contain many of the following elements commonly used in Web page forms:
Each element in which the user can enter information is called a field. Information entered into a field is called the field value, or simply the value.
Before you can create any fields, you must tell the browser that the page will contain fields. You do this using the <FORM> tag. The <FORM> tag identifies the beginning and the end of a form, much like the <TABLE> tag. You can include several forms on one web page, but you can't nest one form inside the other. The general syntax of the <FORM> tag is:
<FORM Properties>
Form elements and layout tags
</FORM>
Place the tags for each of the fields in the form between the <FORM> and </FORM> tags.
The <FORM> tag includes properties that control how the form is processed, including information on what CGI script to use, how the data is to be transferred to the script, etc. Because a single Web page can contain multiple forms, the <FORM> tag includes the optional name property.
As you may recall, we often use tables to align objects on a web page. Often people are hesitant to fill out forms, so we often make forms appear organized and concise by controlling the layout with tables.
An input box is a single-line box into which the user can enter text or numbers. To create input boxes, we use the <INPUT> tag. The general syntax of the <INPUT> tag is:
<INPUT TYPE=option NAME=text>
where option is the type of input field, and
text is the name assigned to the input field. We can change the value
of the TYPE property to create a number of form elements. Here's the list of
TYPE options:
|
|
| HTML CODE: | First Name: <INPUT TYPE=TEXT NAME=FNAME>
|
| Browser View: | First Name: |
The browser sends a NAME/VALUE pair to the CGI script. In this example, the browser (once the SUBMIT button is clicked) will send the NAME/VALUE pair of FNAME/WhatEverUserTypesIntoTheBox.
Case is important in field names. It doesn't matter if you use caps, lowercase, or both - just use the same case to refer to the value, and it will work on all servers.
The complete syntax for an Input Box:
<INPUT NAME=text VALUE=value SIZE=value MAXLENGTH=value>
where the NAME property sets the field name, the VALUE property assigns a default value to the input box, the SIZE property defines the width of the input box in number of characters, and the MAXLENGTH property defines the maximum number of characters allowed in the field.
By default, browsers set the size of all input boxes to 20 characters wide. You can override this default by using the following syntax:
<INPUT SIZE=value>
where value is the size of the input box in number of characters.
Don't get the SIZE property confused with the MAXLENGHTH property. The MAXLENGTH property limits the number of characters the user can type into an input box. For example, the following input box has the SIZE property set to 30 characters (just makes it 30 characters wide) and the MAXLENGTH property set to 2 characters. The user can only enter a maximum of 2 characters in this box, even though there's plenty of room.
| HTML CODE: | State: <INPUT NAME=ST SIZE=30 MAXLENGTH=2>
|
| Browser View: | State: |
On the other hand, a small input box with the SIZE property set to 2 and a MAXLENGTH property set to 20 would allow the user to enter up to 20 characters, even though they won't fit. The information typed into the field will scroll, as you can see below.
| HTML CODE: | State: <INPUT NAME=ST SIZE=2 MAXLENGTH=20>
|
| Browser View: | State: |
Another property you can use with the <INPUT> tag is the VALUE property. The VALUE property sets the default value of the field and is also the value that appears in the input box when the form is initially displayed. The syntax for the VALUE property is:
<INPUT VALUE="value">
where value is the default text or number that will appear in the field.
Quotes are required for text strings with several words.
If your form had a field for Country, and you knew most visitors would type United States, you could set United States as the default value with the following code.
| HTML CODE: | Country: <INPUT NAME=COUNTRY VALUE="United States">
|
| Browser View: | Country: |
Visitors outside the United States could remove the default value and type their country information.
In order to prevent sensitive information like credit card numbers or passwords from appearing on the screen as users type them, we can set the Input type to PASSWORD. This causes each character typed to appear as asterisks in the input box. Although this will prevent the typed information from being displayed on the screen, and keep someone from looking over their shoulder and seeing the sensitive information, the information is not encrypted. It is still possible for someone to intercept the information as it is being sent from the browser to the CGI script, if the connection is not secure.
The syntax for the password field is:
<INPUT TYPE=PASSWORD>
As with input boxes, you can specify a size, maximum length ,and a name for your password. See example below.
| HTML CODE: | Enter Password: <INPUT TYPE=PASSWORD NAME=PW>
|
| Browser View: | Enter Password: |
To move from one input box to the next, you press the TAB key. To move to the previous input box, press the TAB key while holding down the SHIFT key. Test out the TAB and SHIFT + TAB keys in the following example. Start by clicking in the FIRST NAME text box since there are several text boxes on this page.
|
FIRST NAME: LAST NAME: CITY: STATE: |
Let's take a look at a BMI Index Form.
A selection list is a list box from which the user selects a particular value or set of values. If you know in advance what the possible responses should be, it is better to use a selection list rather than an input box. By using a selection list, you can avoid spelling mistakes and erroneous entries.
Create a selection list by using the <SELECT> tag. Add selection items with the <OPTION> tag. The general syntax for a selection list is similar to the syntax of an unordered list:
<SELECT NAME=text>
<OPTION>Option 1
<OPTION>Option 2
•
•
•
</SELECT>where text is the name you've
assigned to the selection field, and Option 1,
Option 2, etc. are the possible values displayed in the selection
list.
Here's an example of how you might have customers pick from the four states in your market area:
| HTML CODE: | State: <SELECT NAME=State>
|
| Browser View: | State: |
By default, the <SELECT> tag displays only one option from the selection list, along with a drop-down list arrow that you click to view other selection options. You can change the number of options displayed by using the SIZE property. The syntax for the SIZE property is:
<SELECT SIZE=value>
where value is the number of items that the selection list will display. By changing the SIZE to a value greater than one, you change the selection list from a drop-down list box to a list box with a scroll bar. We can modify the SIZE property to create the following variations of the above selection list.
| SIZE = 1 | SIZE = 2 | SIZE = 3 | SIZE = 4 |
By default, users can only make one selection. Add the MULTIPLE property to the <SELECT> tag to allow users to select multiple choices. Users know to hold down the CTRL key to select multiple noncontiguous selections and the SHIFT key to select contiguous items. Here is the syntax for the MULTIPLE property:
<SELECT MULTIPLE>
Since the browser will send multiple name/value pairs to the CGI script, one for each option the user selects, the CGI script needs to be able to handle a single field with multiple values. Here's an example using the MULTIPLE property:
| HTML CODE: | Browser View: |
<SELECT MULTIPLE NAME=State SIZE=7>
|
By default, the form will send to the CGI script the values that appear in the selection list. You can add a VALUE property to the <OPTION> tag if you want a special value or code sent in place of the actual list item. For example, we can add the following values. The form will now send AL for Alabama, FL for Florida, etc.
| HTML CODE: | Browser View: |
<SELECT MULTIPLE NAME=State SIZE=7>
|
By default, the first item in a list is selected (highlighted) when the form is displayed. We can specify which option is initially selected by using the SELECTED property. Here is the syntax:
<OPTION SELECTED>
Radio buttons (option buttons in VB) are similar to selection lists in that they display a list of choices from which the user makes a selection. Unlike items in a selection list, only one radio button can be selected at a time. If the user clicks on a second radio button, the first one deselects and the second one becomes selected.
Radio buttons use the same <INPUT> tag as input boxes, except that the TYPE property is set to RADIO. The syntax for an individual radio button is:
<INPUT TYPE=RADIO NAME=text VALUE=value>
where text is the name assigned to the field containing the radio button, and
value is the value of the radio button, which will be sent to the CGI script if
that option is selected.
The NAME property is important because it groups distinct radio buttons together, so that selecting one radio button in the group automatically deselects all of the other radio buttons.
In the following example, we are presented with a set of choices as we make our ice cream cone selection:
| HTML CODE:
|
| BROWSER VIEW:
What size ice cream cone would you like? |
The Triple choice is selected because we added the CHECKED property to the Triple option. By default, no option is selected.
When should you use radio buttons, and when should you use a selection list? Generally, if you have a very long list of options you should use a selection list. If you have a short list of possible options with only one option allowed at a time, you should use radio buttons.
A check box is either selected or not, but unlike radio buttons, the user can select none, one, or even all the check boxes. The general syntax for a check box is as follows:
<INPUT TYPE=CHECKBOX NAME=text>
where text is the name of the field. A check box field has the value "on" if
the check box is checked, and no value is assigned if the check box is left
deselected.
If we wanted to add toppings to our ice cream example, we would use check boxes so that users could select all the toppings, just one topping, or no toppings at all. Here's an example.
|
| HTML CODE:
|
| BROWSER VIEW:
What toppings would you like? |
Since EVERYONE wants FUDGE, it defaults to CHECKED (See HTML code). Also, since check boxes allow many choices, customers can select one or more to indicate all the toppings they want.
When an input box is too small to display responses with longer answers, such as for comments, we can use create a text area box with lots of room. The syntax for the <TEXTAREA> tag is:
<TEXTAREA ROWS=value COLS=value Name=text>default
text</TEXTAREA>
where the ROWS and COLS properties define the number of rows and columns in
the text box. ROWS is the number of lines, and COLS is the number of characters
allowed in each line. The optional default text is the text that
appears in the text box when the form opens. We can use an optional WRAP
property to change the way that the default text is displayed:
| HTML CODE: | <TABLE>
| ||
| Browser View: |
|
Form buttons are form fields that perform an action when activated - as a button does when the user clicks it. Buttons can be used to (1) run programs, (2) submit forms, or to (3) reset the form it its original state.
We can create a button that performs an action, such as calculating a value or validating the user's input on the form, by using the TYPE=BUTTON property. For example, the following code:
<INPUT TYPE=BUTTON VALUE="Calculate Total">
creates the following button:
We will learn to insert programs into a web page that will respond to a button being clicked when we cover JavaScripts.
When a user finishes entering information into a form, that information can be submitted to a CGI script, or, if the user wants to start over, the form can be reset to its original default values.
The submit button is used to submit the field values to a CGI script. The syntax for the submit button, with two optional properties NAME and VALUE are listed below:
<INPUT TYPE=SUBMIT NAME=name_of_button VALUE=button_caption>
where SUBMIT is the type of button,
name_of_button is the button name to tell a script which
button was clicked, and the button_caption is the words that
display on the button.
Here is the syntax for the reset button:
<INPUT TYPE=RESET>
Notice that by setting the TYPE equal to RESET, the button becomes a reset button that, when clicked, will reset the form to its original default values, before the user typed anything into the fields.
Inline images can act like submit buttons so that when the user clicks the image, the form is submitted. Image fields differ from submit buttons in what type information they send to the CGI script. To create an inline image, use the <INPUT> tag, but with the TYPE property set to IMAGE. The syntax for the IMAGE form elements is:
<INPUT TYPE=IMAGE SRC=URL NAME=text VALUE=text>where
URL is the filename or URL of the image, the NAME property
assigns a name to the field, and the VALUE property assigns a value to the
image. When the form is submitted to the CGI script, the coordinates
corresponding to where the user clicked inside the image are attached to the
image's name and value in the format: NAME.x_coordinate, VALUE.y_coordinate. For
example, if your web page contained the following inline image form element:
<INPUT TYPE=IMAGE SRC="usamap.gif" NAME=USA VALUE="STATE">
Assume that a user loads your page and clicks the inline image at the coordinates (15,30). The web page will send the field name and x
coordinate, USA.15, paired with the field value and y coordinate, STATE.30, to
the script. Once the CGI script receives this information, the action it
performs will depend on where the user clicked within the image.
If you've ever visited a real estate web site, you have probably clicked on a map that sent your coordinates to their server so that the listings in the area you clicked could be displayed.
Hidden fields are not visible to web page visitors, but are a part of the form. You may want to use a hidden field when you know in advance the value of a field For example, if you want form results sent to a specific email address, you can include the email address in a hidden field. The syntax for a hidden field is:
<INPUT TYPE=HIDDEN NAME=text VALUE=value>
where text is the name of the field, and value is the
value of the
field. To add a hidden field to a form, assuming you wanted to include an email
field for someone@yahoo.com you could use the following syntax:
<INPUT TYPE=HIDDEN NAME=EMAIL VALUE="someone@yahoo.com">
There are several form properties that deal with "where to send your form" and "how to send it."
ACTION Property: identifies the CGI script that will process your form.
<FORM ACTION=URL>
where URL is the URL of the CGI script. Your Internet
service provider or the person that wrote the CGI script will provide this
information for you.
METHOD Property: controls how the web browser send data to the web server running the CGI script.
<FORM METHOD=type>
where type is either GET or POST. The GET method, which
is the default, packages the form data by appending it to the end of the URL
specified in the ACTION property. The POST method sends the data in a separate
data stream, allowing the web server to receive the data through what is called
"standard input." Because it is more flexible, the POST method is considered the
preferred way of sending data to the web server. It is also safer, because some
web servers limit the amount of data sent via the GET method and will truncate
the URL, cutting of valuable information.
ENCTYPE property: specifies the format of the data when it is transferred from your web page to the CGI script. The syntax of this property is:
<FORM ENCTYPE=text>
where text is the data format. The default value is
"application/x-www-form-urlencoded." Another value that is often used
is"multipart/form-data," which allows the form to send files to the web server
along with form data.
TARGET property: is used if your form is part of a framed web site to specify which frame receives output from the CGI script.
We can use the MAILTO action property to access the user's mail program to send form information through email without using a script. The syntax of the MAILTO action is:
<FORM ACTION="mailto:email_address" METHOD=POST>
where email_address is the e-mail address of the
recipient of the form information. However, older browsers (prior to Netscape 3
or Internet Explorer 4) do not support this action. Another disadvantage of this
method is that your email address get revealed to the user sending the form. The
email will appear as follows:
We can also create a form field that will allow the user to browse their computer, and select a file to upload to the CGI script. Check out a browse button on a form upload sample page.
Check out this working example which demonstrates how to obtain the values.
Test out the following TEST FORM to see what happens.