HTML Tutorial.06

8/7/2019 HTML Tutorial.06

http://slidepdf.com/reader/full/html-tutorial06 1/83

XP

1

Creating Web Page Forms



XP

2

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 aCGI script

Learn how to send form informationwithout using CGI scripts





XP

4

The Interaction between a

Web Page Form and a CGI Script

This figure showshow a Web pageform interactswith a CGI script.



XP

5

Working with CGI Scripts

CGI (Common Gateway Interface) scriptruns 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 tocreate or edit CGI scripts. Internet Service Providers (ISPs) and universities

may provide CGI scripts that their customers andstudent can use on their Web sites, but whichthey cannot directly access or modify





XP

7

CGI Script Restrictions

There are several reasons to restrict directaccess to CGI scripts:

CGI scripts are actually running a programdirectly on the server

security risks from computer hackers

drain on system resources caused by largenumbers of programs running simultaneously

System administration are understandablycareful to maintain strict control over their servers and systems.



XP

8

CGI Scripts and Computer

Languages

CGI scripts can be written in a variety of differentcomputer languages. Some of the most commonlyused languages are:

AppleScript

ASP

C/C++

Perl

TCL The UNIX shell

Visual Basic

The computer language used depends on the Webserver.



XP

9

Form Components and

ElementsThis figure showsa form thatcontains variouscontrol elementscommonly used inWeb page forms.

First Name

Address #1

Address #2

City

Last Name

Country

State Zip

Item Purchased Purchase Date

Home

Business

Government

Educational Institution

Netware

Banyan Vines

Windows

IBM Lan Server

Comments?:

Send Registration Cancel

Serial Number

Used For (check one) Network Operating System (check all that apply)

Religious or Charitable Institution

PC/NFS

text box

drop-down

list box

radio

buttonscheck

boxestext

area

form

button

group

box



XP

10

Form Control Elements

Control elements that are commonly used:

text boxes for text and numerical entries

selection lists for long lists of options, usuallyappearing in a drop-down list box

radio buttons, also called option buttons, to selecta 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 includeseveral lines of text

buttons that can be clicked to start processing theform



XP

11

Form Control Elements

Continued

Each control element in which the user can

enter information is called a field.

Information entered into a field is called thefield 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.



XP

12

The <form> Tag

The <form> tag identifies the beginning and end of aform.

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 thevarious tags for each of the fields in the form.

Use standard HTML tags to specify the form¶sappearance.





XP

14

Adding the <form> Tag

The <form> tagincludes attributesthat control how theform is processed,

includinginformation on whatCGI script to use,how the data is to betransferred to thescript, and so forth.

This figure shows theform name ³reg.´



XP

15

Structuring a Form

Horizontal lines can provide structure

to a form by separating sections.







XP

18

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 tocreate a text box.



XP

19

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, someCGI 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 boththe name and id attributes.



XP

20

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

v alu e attribute assigns a default value to the text

box

siz e attribute defines the width of the text box innumber of characters

maxl eng th attribute defines the maximum number

of characters allowed in the field



XP

21

Name/Value Pairs sent from

the Web Form to the CGI Script

This figure showswhen form data issent to the CGIscript, the scriptreceives the name

or id of each fieldin the formpaired withwhatever valuethe user enteredin the field. Thescript then

processes the dataaccording to eachname/value pair.



XP

22

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 fieldnamed ³email´ that contains the e-mail address of the recipient

Before using a CGI script, check the documentationfor any requirements and then design your form

accordingly. Case is important in field names.

a field named ³email´ might not be interpreted by theCGI script in the same way as a field named³EMAIL´



XP

23

Text Boxes on the Form

text box

Text boxes areblank and donot contain anyaccompanying

text, a textdescriptionneeds to beinserted, such as³Last Name´,adjacent to eachbox so that the

user knows whatto enter.









XP

27

Setting the Maximum Length

for T

ext 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´>

v alu e is the maximum number of characters that

can be stored in the field



XP

28

Specify the Maximum Length

for a Field

no more than 5

characters are

allowed in this textbox

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





XP

30

Defining a Default Value for a

Field

default value

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.







XP

33

Creating a Label for thefname Field

value of the id

attribute for the first

name field

This figure showsa label for thefname field.



XP

34

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 individualselection items.





XP

36

Creating a Selection List

items in the selection list

selection list field name



XP

37

Using a Selection List

Your selectionlist might look slightly differentdepending on the

browser andbrowser version.



XP

38

Modifying the Appearance

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´>







XP

41

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>

Acommon method to make multiple selections froma selection list is to hold down a specific key while

making selections.



XP

42

Making Multiple Selections

Continued

The Windows operating system, multiple

selections can be made as follows:

for noncontiguous selections, press andhold the Ctrl key while you make your

selections

for a contiguous selection, select the first

item, press and hold the Shift key, and thenselect the last item in the range

Check and verify that the CGI scripts used

are designed to handle multiple selection

lists.



XP

43

Working with Option Values

By default, a form sends the values that aredisplayed in the selection list to the CGI script.

Instead of sending an entire text string, anabbreviation or code can be sent to the CGIscript.

Specify the value that is sent to the CGI scriptwith the value attribute.

Use the selected attribute to specify which itemin the selection is selected, or highlighted, whenthe form is displayed.



XP

44

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 listabove each group of items but is not a

selectable item from the list



XP

45

Option Groups

a single

option

group

option

group label

a single option

group

option group

label

Internet Explorer and Netscape versions prior to 6.0 displaythe selection list without the group labels.





XP

47

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.´



XP

48

Selection Lists vs. Radio

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, andonly one option is allowed at a time,

use radio buttons.



XP

49

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 toa common group.

The syntax for creating a group box is:<fieldset>

<legend align=³align´>legend text</legend>

collection of fields

</fieldset>



XP

50

Creating a Group Box

Continued

the <legend> tag is used to display a

legend on the group box

l eg end tex t specifies the text for that

legend

the al i gn 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



XP

51

Creating a Group Box and

Legend

start of

group boxgroup box

legend

resulting radio buttons and group box

This figure showsan example of agroup box appliedto a set of radio

buttons.



XP

52

Group Box Size

There is no attribute to control the size of a groupbox.

The box¶s height will be large enough toaccommodate the fields and labels in the field set.

The width is the width of whatever space remainson the Web page.

To set the width to a specific value use a table cellto 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 asingle cell



XP

53

Working with Check Boxes

A check box is either selected or not, there is onlyone 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 v alu e attribute specifies the value that is sent to theCGI 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





XP

55

Group Boxes for Radio Buttons

and Check Boxes



XP

56

Creating a Text Area

To create a larger text area for a textbox, use the tag:<textarea name=³name´ id=³id´

rows=³value´ cols=³value´> defaulttext </textarea>

rows and col s attributes define the dimensionsof 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.





XP

58

Wrap Attribute Values

The text entered in a text area wraps to the next line when it exceeds the width of thebox. To control how a browser wraps text to a new line use the wrap attribute.

This figure shows the three possible wrap options.



XP

59

The wrap Attribute for Text

Set the value of the wrap attribute to either

³soft´ or ³har d´ 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´ sothat the user¶s comments wrap to the next

line in the box.



XP

60

Comment Text Area

In this figure thetext box includes avertical scroll bar,so that a user can

scroll to see thehidden text, if needed.



XP

61

Creating Form Buttons

Buttons can be clicked to:

run programs

submit forms

reset the form to its original state



C S



XP

63

Creating Submit and Reset

Buttons

A submit button is a button that submits

the form to the CGI script for processing.

A re

set 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´> v alu e attribute defines the text that appears on

the button





XP

65

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.

C ti B tt



XP

66

Creating Buttonswith the <button> Tag

Buttons created with the <input> tag do not allow theWeb page designer to control the appearance of thebutton.

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

v alu e attribute sends to a CGI script

type attribute specifies the button type (submit, reset,or button)



XP

67

Using the <button> Tag

button image

the button type is a

simple push button

contents

of the

button

The figure shows howto create a button thatcontains formattedtext and an inline

image.

The default value forthe type attribute is³button´. Within the<button> tags youcan place whatever

HTML tags you wishto format the button¶sappearance. Thisincludes inlineimages.



XP

68

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.



XP

69

Using a File Button

1. User clicks the Browse button

2. Selects a file from the

Choose File dialog box

3. The filename and location

are automatically placed in

the text box

The figure showsan example of using the filebutton to return

the location of afile named³report.doc.´



XP

70

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

v alu e 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 valuein the format: namex_coordinate, value.y_coordinate.

Using an Image Control



XP

71

Using an Image Control

with a CGI Script

Once the CGIscript receivesdata, the action itperforms depends

on whether theuser clickedwithin the image.



XP

72

Working with Hidden Fields

A hidden field is added to the form but notdisplayed 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 iteasier to read and interpret the HTML code.

Include a comment describing the purpose of thefield.





XP

74

Working with Form Attributes

To specify where to send the form data

and how to send it add the followingattributes 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 Webbrowser sends data to the CGI script

enc type attribute specifies the format of the data

stored in the form¶s field



XP

75

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



XP

76

The enctype Attribute

The exact meaning of the enctype attributeis 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 theform 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 assimple text.

S if i Wh d H



XP

77

Specifying Where and How

to Send Form Data

This figure shows the CGI script that processes the form is located at the URLhttp://www.langear.com/cgi/mailer (a fictional address) and uses the ³post´ method.



XP

78

Form Values

The Web browserpresents a page, anexample of which isshown in this figure,

displaying the nameof each field in theform and the valueassigned to it. At thesame time, the CGIscript formats a mailmessage to be sent to

the address youentered.



XP

79

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- mai l_add r ess is the e-mail address of the

recipient of the form



Mail Message Created Using



XP

81

Mail Message Created Using

the ³mailto´ Action

This figureshows an e-mailmessage thatthe ³mailto´actiongenerated for aregistrationform.

The format of the mail

message maylook differentdepending onthe browser ore-mail software.



XP

82

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.



XP

83

Summary Continued

Controlled the appearance and

behavior of various elements.

Examined form buttons, form imagesand hidden fields.

Focused on how information is

transferred from the Web page form tothe CGI script.

Worked with various form actions and

Documents

HTML Tutorial.06