XP

Creating Web Page Forms

1
 XP
Objectives

 Learn about CGI scripts

 Review the various parts of an online form
 Create form elements
 Create a hidden field on a form
 Work with form attributes
 Learn how to send data from a form to a
CGI script
 Learn how to send form information without
using CGI scripts
2
 XP
An Example of a Form

This figure shows

a sketch of a
proposed
registration form.

3
 The Interaction between a XP
Web Page Form and a CGI Script

This figure shows

how a Web page
form interacts
with a CGI script.

4
 XP
Working with CGI Scripts

 CGI (Common Gateway Interface) script

runs on the Web server and receives data
from a form and uses it to perform a set of
tasks.
 Web page designers may not be able to
create or edit CGI scripts.
 Internet Service Providers (ISPs) and universities
may provide CGI scripts that their customers and
student can use on their Web sites, but which
they cannot directly access or modify

5
 XP

CGI Scripts
 CGI scripts made possible many things like;
 online database containing customer information
 catalogues for ordering and purchasing items online
 databases containing product support information
 determining the number of times a Web page has
been accessed
 server-side image maps
 message boards for online discussion forums
 e-mail for discussion groups

6
 XP
CGI Script Restrictions
 There are several reasons to restrict direct
access to CGI scripts:
 CGI scripts are actually running a program
directly on the server
 security risks from computer hackers
 drain on system resources caused by large
numbers of programs running simultaneously
 System administration are understandably
careful to maintain strict control over their
servers and systems.
7
 CGI Scripts and Computer XP
Languages
 CGI scripts can be written in a variety of different
computer languages. Some of the most commonly used
languages are:
 AppleScript
 ASP
 C/C++
 Perl
 TCL
 The UNIX shell
 Visual Basic
 The computer language used depends on the Web
server.
8
 Form Components and XP
Elements
text box
First Name Last Name
This figure shows Address #1

a form that Address #2

contains various City State Zip

control elements Country

commonly used in Item Purchased Purchase Date

Web page forms. drop-down Serial Number

group
list box box
Used For (check one) Network Operating System (check all that apply)
Netware
Home
Banyan Vines
Business
radio Religious or Charitable Institution Windows
IBM Lan Server check
buttons Government
Educational Institution PC/NFS
boxes
text
Comments?:
area

form Send
SendRegistration
Registration Cancel
Cancel
button
9
 XP
Form Control Elements

 Control elements that are commonly used:

 text boxes for text and numerical entries
 selection lists for long lists of options, usually
appearing in a drop-down list box
 radio buttons, also called option buttons, to select a
single option from a predefined list
 check boxes to specify an item as either present or
absent
 groups boxes to organize form elements
 text areas for extended entries that can include several
lines of text
 buttons that can be clicked to start processing the form
10
 Form Control Elements XP
Continued

 Each control 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.
 In some fields, users are free to enter
anything they choose.
 Other fields, such as selection lists, limit the
user to a predefined list of options.

11
 XP
The <form> Tag

 The <form> tag identifies the beginning and end of a

form.
 A single page can include several different forms, but
you cannot nest one form inside another.
 The general syntax of the <form> tag is:
<form attributes>
form elements and layout tags
</form>
 Between the <form> and </form> tags, place the
various tags for each of the fields in the form.
 Use standard HTML tags to specify the form’s
appearance.
12
 XP
The <form> Tag Continued

 A single Web page can contain multiple

forms, the <form> tag includes the name
attribute.
 The name attribute identifies each form on
the page.
 The name attribute is also needed for
programs that retrieve values from the
form.
13
 XP

Adding the <form> Tag

The <form> tag
includes attributes
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, and so forth.

This figure shows the

form name “reg.”

14
 XP

Structuring a Form
 Horizontal lines can provide structure
to a form by separating sections.

15
 XP

Layout of a Registration Form

This figure shows sections that are separated from each other with a horizontal line.
Structuring a form in this fashion can make it easier to identify the different sections.

contact information

product information

usage information

comments

buttons

16
 XP

Input Types
This figure Type Description
shows other type=”button” Display a button which can be clicked to
perform an action from a script
supported
type=”checkbox” Display a check box
HTML input
types. type=”file” Display a browse button to locate and select a
file
type=”hidden” Create a hidden field, not viewable on the form
type=”image” Display an inline image which can be clicked to
perform an action from a script
type=”password” Display a text box in which hides text entered
by the user
type=”radio” Display a radio (option) button
type=”reset” Display a button which resets the form when
clicked
type=”submit” Display a button which submits the form when
clicked
type=”text” Display a text box in which displays text
entered by the user

17
 XP
Working with Text Boxes

 Text boxes are created using the <input> tag.

 The general syntax is:
<input type=“type” name=“name” id=“id”>
 type specifies the type of input field
 name and id attributes identifies the input field for
the CGI script
 To create a text box, you would enter the tag:
<input type=“text”>
 If the type attribute is not included, the Web
browser assumes, by default, that you want to
create a text box.
18
 XP
The name and id Attribute

 The name and id attributes of the <input> tag

identifies the input field for the CGI script.
 The name attribute represents the older standard,
but it is deprecated in HTML 4.01, however, some
CGI scripts still recognize only the name attribute
 The newest standard uses the id attribute.
 The id attribute is required, if a form contains form
labels.
 It is best to duplicate the information by using both
the name and id attributes.
19
 XP
Creating a Text Box

 To create a text box, use the following HTML code:

<input name=“name” id=“id” value=“value”
size=“value” maxlength=“value”>
 name and id attributes identify the field

 value attribute assigns a default value to the text

box
 size attribute defines the width of the text box in

number of characters
 maxlength attribute defines the maximum number

of characters allowed in the field

20
 Name/Value Pairs sent from XP
the Web Form to the CGI Script

This figure shows

when form data is
sent to the CGI
script, the script
receives the name
or id of each field
in the form
paired with
whatever value
the user entered
in the field. The
script then
processes the data
according to each
name/value pair.

21
 XP
CGI Script Names

 Some CGI scripts require a particular field or groups

of fields.
 for example, a CGI script whose purpose is to e-mail
form values to another user might require a field
named “email” that contains the e-mail address of the
recipient
 Before using a CGI script, check the documentation
for any requirements and then design your form
accordingly.
 Case is important in field names.
 a field named “email” might not be interpreted by the
CGI script in the same way as a field named “EMAIL”
22
 XP
Text Boxes on the Form

Text boxes are

blank and do text box
not contain any
accompanying
text, a text
description
needs to be
inserted, such as
“Last Name”,
adjacent to each
box so that the
user knows what
to enter.

23
 Controlling the Size of a XP
Text Box

 By default, all text boxes are 20

characters wide.
 The syntax for changing the size of a
text box is:
<input size=“value”>
 value is the size of the text box in

characters

24
 Setting the Width of XP
Text Boxes
This figure
shows an
example of code
for setting the
width of text
boxes.

25
 Result of Setting the XP

Width of Text Boxes

Once changes text box width set to
are made, save 30 characters
the changes to a
file, and then
reload or
refresh it in the
browser.

Netscape users
may have to
close and open
the file for the
changes to the
Web form to
take effect.

26
 Setting the Maximum LengthXP
for Text Input
 Setting the width of a text box does not limit the
number of characters the box can hold.
 if a user enters text longer than the box’s width, the
text scrolls to the left
 the user cannot see the entire text, but all of it is
sent to the CGI script for processing
 The syntax for setting the maximum length for field
input is:
<input maxlength=“value”>
 value is the maximum number of characters that
can be stored in the field
27
 Specify the Maximum Length XP

for a Field
This figure shows an example of limiting the width of the zip code field to five characters.

no more than 5
characters are
allowed in this text
box

28
 Setting a Default Value for aXP
Field
 When the same value is entered into a field,
it may make sense to define a default value
for a field.
 Default values can save time and increase
accuracy for users of a Web site.
 To define a default value, use the following
syntax:
<input value=“value”>
 value is the default text or number that is
displayed in the field
29
 Defining a Default Value for a XP

Field
If customers from countries other than the United States use this Web form,
they can remove the default value by selecting the text and pressing the Delete key.

default value

30
 XP
Creating a Password Field

 A password field is a text box in which the

characters typed by the user are displayed as
bullets or asterisks i.e. ****.
 The syntax for creating a Password field is:
<input type=“password”>
 Using a password field should not be confused
with having a secure connection.
 The password itself is not encrypted.
 The password field only acts as a mask for a
field entry as it is entered.
31
 XP
Working with Form Labels

 HTML allows you to formally link a label with an

associated text element for scripting purposes.
 The syntax for creating a form label is:
<label for=“id”>label text</label>
 id is the value of the id attribute for a field on the

form
 label text is the text of the label

 you must bind the label to the id attribute of the

field and not the name attribute

32
 Creating a Label for the XP
fname Field
This figure shows
a label for the
fname field.

value of the id
attribute for the first
name field

33
 XP
Creating a Selection List

 A selection list is a list box from which a user

selects a particular value or set of values.
 Selection lists are good to use when there is a fixed
set of possible responses.
 Selection lists help prevent spelling mistakes and
erroneous entries.
 A selection list is created using the <select> tag.
 The <option> tag is used to specify individual
selection items.

34
 Using the <select> XP

and <option> Tags

 The general syntax for the <select> and <option> tags is:
<select name=“name” id=“id”>
<option> item1
<option> item2
.
.
.
</select>
 name and id attribute identify the selection field
 each <option> tag represents an individual item in the
selection list
 the text in the selection list is indicated by the text in item1,
item2, and so forth
 The <option> tag is a one-sided tag.
35
 XP
Creating a Selection List

selection list field name

items in the selection list

36
 XP
Using a Selection List

Your selection
list might look
slightly different
depending on the
browser and
browser version.

37
 Modifying the Appearance XP

of a Selection List
 HTML provides several attributes to modify the
appearance and behavior of selection lists and
options.
 By default, the <select> tag displays one option
from the selection list, along with a list arrow to view
additional selection options.
 The number of options displayed can be modified
with the size attribute.
 The syntax of the size attribute is:
<select size=“value”>
38
Modifying the Appearance XP

of a Selection List Continued

 value is the number of items that the
selection list displays in the form
 by specifying a value greater than 1, the
selection list changes from a drop-down
list box to a list box
 if the size attribute is equal to the number
of options in the selection list, the scroll
bar is either not displayed or is dimmed

39
 Selection Lists with XP
Different Size Values
This figure shows
selection lists with
different size
values. size = "1" size = "4"

size = "7" size = "9"

40
 XP
Making Multiple Selections

 When using multiple selections, users are not

limited to a single selection from a selection list.
 Adding the multiple attribute to the <select> tag
allows multiple selections from a list.
 The syntax for this attribute is:
<select multiple>
 A common method to make multiple selections from
a selection list is to hold down a specific key while
making selections.

41
 Making Multiple Selections XP

Continued
 The Windows operating system, multiple
selections can be made as follows:
 for noncontiguous selections, press and hold
the Ctrl key while you make your selections
 for a contiguous selection, select the first
item, press and hold the Shift key, and then
select the last item in the range
 Check and verify that the CGI scripts used are
designed to handle multiple selection lists.

42
 XP
Working with Option Values

 By default, a form sends the values that are

displayed in the selection list to the CGI script.
 Instead of sending an entire text string, an
abbreviation or code can be sent to the CGI
script.
 Specify the value that is sent to the CGI script
with the value attribute.
 Use the selected attribute to specify which item
in the selection is selected, or highlighted, when
the form is displayed.
43
 XP
Working with Option Groups

 The most recent releases of HTML allows

you to organize selection lists into distinct
groups called option groups.
 The syntax for creating an option group is:
<optgroup label=“label”>
 label is the label assigned to the option group

 the text for the label appears in the selection list

above each group of items but is not a

selectable item from the list

44
 XP
Option Groups

Internet Explorer and Netscape versions prior to 6.0 display

the selection list without the group labels.
option group
label

option
a single group label
option
group a single option
group

45
 XP
Working with Radio Buttons
 Radio buttons display a list of choices from which a
user makes a selection.
 Only one radio button can be selected at a time.
 The syntax to create a radio button is:
<input type=“radio” name=“name” id=“id”
value=“value”>
 name identifies the field containing the radio button
 id attribute identifies the specific option. Only required
if you intend to use a field label with the radio button
 value attribute indicates the value sent to the CGI
script, if that radio button is selected by the user

46
 XP
Creating Radio Buttons
This figure shows an example of HTML code that creates radio buttons for party affiliations.

In this sample code, the value sent to the CGI script does not match the field label.
If the user selects the Republican radio button, the value “gop”
is sent to the CGI script paired with the field name “party.”
47
 Selection Lists vs. Radio XP
Buttons

 If you have a long list of options, use a

selection list.
 If you want to allow users to select more
than one option, use a selection list with
the multiple attribute.
 If you have a short list of options, and
only one option is allowed at a time, use
radio buttons.
48
 XP
Creating a Group Box
 A group box labels an entire collection of
radio buttons.
 A group box is a box placed around a set of
fields that indicates that they belong to a
common group.
 The syntax for creating a group box is:
<fieldset>
<legend align=“align”>legend text</legend>
collection of fields
</fieldset>

49
 Creating a Group Box XP

Continued

 the <legend> tag is used to display a legend

on the group box
 legend text specifies the text for that legend
 the align attribute specifies where the legend
is placed in the box
 align values are “top” (the default),
“bottom”, “left”, and “right”
 browsers only support “top” and “right”
options at this time

50
 Creating a Group Box and XP

Legend
start of group box
This figure shows group box legend
an example of a
group box applied
to a set of radio
buttons.

resulting radio buttons and group box

51
 XP
Group Box Size
 There is no attribute to control the size of a group
box.
 The box’s height will be large enough to
accommodate the fields and labels in the field set.
 The width is the width of whatever space remains
on the Web page.
 To set the width to a specific value use a table cell
to place the group box and set the width of the cell.
 group boxes cannot extend across table cells; all of
the fields in the field set must be placed within a
single cell

52
 XP
Working with Check Boxes

 A check box is either selected or not, there is only one

check box per field.
 Check boxes are created using the following syntax:
<input type=“checkbox” name=“name” id=“id”
value=“value”>
 name and id attribute identify the check box
 the value attribute specifies the value that is sent to the
CGI script when the check box is selected
 The <input> tag for a check box does not display any
text.
 Check boxes are not selected by default.
 to do this, add the checked attribute to the <input> tag

53
 XP

Adding Check Boxes

This figure shows different check boxes. The user can click either the check box or
the label associated with the check box to select and deselect.

54
Group Boxes for Radio Buttons XP
and Check Boxes

55
 XP
Creating a Text Area

 To create a larger text area for a text

box, use the tag:
<textarea name=“name” id=“id”
rows=“value” cols=“value”> default
text </textarea>
 rows and cols attributes define the dimensions of
the text box
 the rows attribute indicates the number of lines in
the text box
 Default text can be specified in the text
box when the form is initially displayed.
56
 XP
Creating a Text Area

This figure shows an

example of a text
area with default
text.
default text
area text dimensions
The <textarea>
of text area
tag is a two-sided tag,
which means that it
has an opening tag
<textarea>, and a
closing tag,
</textarea>.

resulting text area

57
 XP
Wrap Attribute Values

The text entered in a text area wraps to the next line when it exceeds the width of the
box. To control how a browser wraps text to a new line use the wrap attribute.
This figure shows the three possible wrap options.

58
 XP
The wrap Attribute for Text

 Set the value of the wrap attribute to either

“soft” or “hard” to allow text to wrap within
the text box.
 If no value for the wrap attribute is specified,
a value of “soft” is used.
 For comment fields, use the <textarea>
tag with the wrap attribute set to “soft” so
that the user’s comments wrap to the next
line in the box.
59
 XP
Comment Text Area

In this figure the

text box includes a
vertical scroll bar,
so that a user can
scroll to see the
hidden text, if
needed.

60
 XP
Creating Form Buttons

Buttons can be clicked to:

 run programs
 submit forms
 reset the form to its original state

61
 XP
Creating a Push Button
 One type of button, called a push button, is
created using the <input> tag as follows:
<input type=“button” value=“text”>
 text is the text that appears on the button

 By themselves, push buttons perform no

actions in the Web page.
 To create an action, write a script or
program that runs automatically when the
button is clicked.

62
 Creating Submit and Reset XP
Buttons
 A submit button is a button that submits
the form to the CGI script for processing.
 A reset button resets the form to its original
(default) values.
 The syntax for creating these two buttons is:
<input type=“submit” value=“text”>
<input type=“reset” value=“text”>
 value attribute defines the text that appears on

the button
63
 The name and value XP

Attributes
 The name and value attributes can be used
for push, submit, and reset buttons.
 Use these attributes when the form contains
multiple buttons and a program that
processes the form needs to distinguish one
button from another.
 for example, a Web page advertising a shareware
program might include three buttons:
 one used to download the program
 another used to retrieve information
 the third to cancel the form

64
 XP
Creating a Form Button
The figure shows HTML tags for buttons that download a program,
retrieves information, and resets the form to its original values.

65
 Creating Buttons XP
with the <button> Tag
 Buttons created with the <input> tag do not allow the Web
page designer to control the appearance of the button.
 For greater artistic control over the appearance of the
button, use the <button> tag.
 The syntax of the <button> tag is:
<button name=“name” value=“value”
type=“option”>
button text and HTML tags
</button>
 name attribute specifies the name of the button
 value attribute sends to a CGI script
 type attribute specifies the button type (submit, reset, or
button)

66
 XP
Using the <button> Tag

The figure shows how

to create a button that
the button type is a
contains formatted
simple push button
text and an inline
image.

The default value for contents

the type attribute is of the
“button”. Within the button
<button> tags you
can place whatever
HTML tags you wish
to format the button’s button image
appearance. This
includes inline
images.

67
 XP
Creating File Buttons

 A file button is used to select files so that

their contents can be submitted for
processing to a CGI script.
 The contents of the file are not displayed--
only the file’s location.
 A programmer can then use that information
to retrieve a file and use it for whatever
purpose is required by the script.

68
 XP
Using a File Button

The figure shows

an example of
using the file 1. User clicks the Browse button
button to return
the location of a
file named
2. Selects a file from the
“report.doc.” Choose File dialog box

3. The filename and location

are automatically placed in
the text box
69
 XP
Creating Image Fields

 Inline images can act like submit buttons, so that when the user
clicks the image, the form is submitted.
 The syntax for this type of control element is:
<input type=“image” src=“URL” name=“text”
value=“text”>
 URL is the filename and location of the inline image
 name attribute assigns a name to the field
 value attribute assigns a value to the image
 When the form is submitted to the CGI script, the coordinates of
where the user clicked are attached to the image’s name and value
in the format: namex_coordinate, value.y_coordinate.

70
 Using an Image Control XP
with a CGI Script

Once the CGI

script receives
data, the action it
performs depends
on whether the
user clicked
within the image.

71
 XP
Working with Hidden Fields
 A hidden field is added to the form but not
displayed in the Web page.
 Because the field is hidden, it can be placed
anywhere between the opening and closing
<form> tags.
 The syntax for creating a hidden field is:
<input type=“hidden” name=“name”
value=“value>
 Place all hidden fields in one location to make it
easier to read and interpret the HTML code.
 Include a comment describing the purpose of the
field.
72
 XP

Adding a Hidden Field

This figure shows
an example of the
hidden field code.

73
 XP
Working with Form Attributes

 To specify where to send the form data

and how to send it add the following
attributes to the <form> tag:
<form action=“URL” method=“option”
enctype=“text”>
 URL specifies the filename and location of the
CGI script that process the form
 method attribute specifies how your Web
browser sends data to the CGI script
 enctype attribute specifies the format of the data
stored in the form’s field
74
 XP
The method Attribute
 There are two possible values for the method attribute:
“get” or “post”.
 the “get” method (the default) packages the form data by
appending it to the end of the URL specified in the action
attribute
 the “post” method sends form data in a separate data
stream, allowing the Web server to receive the data
through what is called “standard input”
 the “post” method is considered the preferred way of
sending data to a Web server
 The “post” method is also safer, because some Web
servers limit the amount of data sent via the “get” method
and will truncate the URL, cutting off valuable information
75
 XP
The enctype Attribute

 The exact meaning of the enctype attribute

is a technical issue.
 The default enctype value is “application/x-
www-form-urlencoded.”
 Another enctype value that is often used is
“multipart/form-data,” which allows the form
to send files to the Web server along with any
form data.
 The most basic way of encoding data is to
use “text/plain,” which encodes the data as
simple text.
76
 Specifying Where and How XP
to Send Form Data
This figure shows the CGI script that processes the form is located at the URL
http://www.langear.com/cgi/mailer (a fictional address) and uses the “post” method.

77
 Form Values XP

The Web browser

presents a page, an
example of which is
shown in this figure,
displaying the name
of each field in the
form and the value
assigned to it. At the
same time, the CGI
script formats a mail
message to be sent to
the address you
entered.

78
 XP
Using the “mailto” Action

 Use the “mailto” action to send form information via

e-mail without using a CGI script.
 This action accesses the user’s own e-mail program
and uses it to mail form information to a specified e-
mail address, bypassing the need for using CGI scripts
on a Web server.
 The syntax of the “mailto” action is:
<form action=“mailto:e-mail_address”
method=“post” enctype=“text/plain”>
 e-mail_address is the e-mail address of the
recipient of the form
79
 Using the “mailto” XP
Action Continued
 Not all browsers support the “mailto” action.
 for example, versions of Internet Explorer earlier
than 4.0 and Netscape Navigator 3.0 do not
 Another concern is that messages sent via the
“mailto” action are not encrypted for privacy.
 The recipient’s email address is revealed to
the user.

80
 Mail Message Created UsingXP
the “mailto” Action
This figure
shows an e-mail
message that
the “mailto”
action
generated for a
registration
form.

The format of
the mail
message may
look different
depending on
the browser or
e-mail software.

81
 XP
Summary

 Worked with Web page forms.

 Overview of scripts.
 CGI scripts.
 Created simple input boxes.
 Worked with properties.
 Controlled the appearance of input boxes.
 Worked with Web form elements and
components.

82
 XP
Summary Continued

 Controlled the appearance and behavior

of various elements.
 Examined form buttons, form images and
hidden fields.
 Focused on how information is transferred
from the Web page form to the CGI script.
 Worked with various form actions and
methods.
83