XP

1

Tutorial 6

Creating Web Page Forms

XP

2

Tutorial Objectives

Describe how Web forms can interact with a server-based program

Review the various parts of an online form

Create form elements Create a hidden field on a form Work with form attributes

XP

3

Forms & Server-Based Programs

HTML supports tags for creating forms, however, it does not process the information.

A server-based program, e.g., CGI script, receives data from a form and processes form information.

ISPs and universities may provide CGI scripts that their customers and student can use, but which they cannot directly access or modify

XP

4

Server-Side Programs

Among the many things server-side programs made possible are: online database containing customer information online catalogues for ordering and purchasing

merchandise determining the number of times a Web page

has been accessed server-side image maps message boards for hosting online discussion

forums

XP

5

Server-Side Programs

The earliest of server-side programs are CGI scripts written in perl. Other popular languages used are:

ASP ColdFusion C/C++ Perl TCL PHP Visual Basic

Form Components and Elements

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 RegistrationSend RegistrationCancelCancel

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 buttons

check boxes

text area

form button

group box

XP

7

Form Control Elements text boxes for text and numerical entries selection lists for long lists of options, appearing in

a drop-down list box radio buttons or 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

XP

8

The <form> Tag

A single page can include several different forms, but you cannot nest one form inside another.

The general syntax is:<form name=“name” id=“id” other attributes>

form elements</form>

The name or id attribute identifies each form on the page. It is also needed for programs that retrieve values from the form.

XP

9

Form Control Elements

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.

form button

check boxes

text area

optionbuttons

selectionlist

input boxes

XP

11

Input Types

Type Description

type=”button” Display a button which can be clicked to perform an action from a script

type=”checkbox” Display a check box

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

XP

12

Working with Text Boxes 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 server-side program 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.

XP

13

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

XP

14

Creating a Text Box

<input type=“text” 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. By default, all text boxes are 20 characters wide.

maxlength attribute defines the maximum number of characters allowed in the field

XP

15

Setting the Width of Text Boxes

text box width set to 30 characters

<input type=“text” name=“lname” id=“lname"

size=“30” />

XP

16

Setting the Maximum Length for Text Input

Setting the width of an input box does not limit the number of characters the box can hold.

The syntax for setting the maximum length is:<input maxlength=“value”> value is the maximum number of characters

that can be stored in the field <input type="text" name="zip" id="zip”

size=“10” maxlength=“10” /> no more than 10 characters are allowed in this

“zip” text box

XP

17

Setting a Default Value for a Field

When the same value is entered into a field, it may make sense to define a default value for a field.

To define a default value, use:<input value=“value”> value is the default text or number that

is displayed in the field <input type=“text” name=“country” id=

“country” size="40" value=“United States” />

XP

18

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” /> The password field only acts as a mask for

a field entry as it is entered.

XP

19

Working with Form Labels HTML allows you to 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 Labels can simplify the data entry process by

allowing a user to click on either the control element or the element’s label to enter data.

Labels allow users to write scripts to modify their content for interactive forms.

XP

20

Creating a Label for the fname and lname Fields

<tr> <td width="110"> <label for=“fname”>First Name</label>

</td> <td> <input type=“text” name=“fname”

id=“fname” size=“30” /> <label for=“lname”>Last Name</label>

<input type=“text” name=“lname”id=“lname” size=“30” />

</td></tr>

XP

21

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.

XP

22

Creating a Selection List

<select name=“item” id=“item”> <optgroup label=“Routers”>

<option>LanPass 115</option><option>LanPass 125</option><option>LanPass 250</option></optgroup>

<optgroup label=“Switches”><option>FastSwitch 200</option><option>FastSwitch 400</option></optgroup>

<optgroup label=“Adapters”><option>LG 10Mpbs</option><option>LG 10Mpbs/w</option><option>LG 100Mpbs</option><option>LG 100Mpbs/w</option></optgroup>

</select>

XP

23

Selection Lists withDifferent Size Values

The number of options displayed can be modified with the size attribute. The syntax is:

<select size=“value”>

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

size = “1”

size = “4”

XP

24

Working with Option Values

By default, a form sends an entire text string to the server. An abbreviation or code can also be sent to the server with the value attribute:<option value=“1”>LanPass 115</option><option value=“2”>LanPass 125</option>

Use the selected attribute to specify which item in the selection is selected, or highlighted, when the form is displayed.<option selected=“selected”>FastSwitch 200</option>

XP

25

Working with Option Groups

HTML allows you to organize selection lists into groups. The syntax 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

XP

26

Working with Radio Buttons

Radio buttons display a list of choices from which a user makes only one selection. The syntax is:<input type=“radio” name=“name” id=“id” value=“value” checked=“checked” /> name identifies the field containing the collection of

radio buttons id identifies the specific option value attribute specifies the value sent to the

server, if that radio button is selected by the user Selecting one radio button in the group

automatically deselects all of the other radio buttons

<fieldset><legend>Used For (check one)</legend><input type=“radio” name=“use” id=“home”

value=“home” /> <label for=“home”>Home</lablel><br />

<input type=“radio” name=“use” id=“bus”value=“bus” checked=“checked” />

<label for=“bus”>Business</label><br /> <input type=“radio” name=“use” id=“char”

value=“char” /> <label for=“char”>Religious or Charitable

Institutions</label><br /> <input type=“radio” name=“use” id=“gov”

value=“gov” /> <label for=“gov”>Government</label><br />

<input type=“radio” name=“use” id=“edu”value=“edu” />

<label for="edu">Educational Institution</label>

</fieldset>

XP

28

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, and only one option is allowed at a time, use radio buttons.

XP

29

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>text</legend> collection of fields</fieldset>

XP

30

Working with Check Boxes

A check box is either selected or not, there is only one check box per field. The syntax is:

<input type=“checkbox” name=“name” id=“id” value=“value” checked=“checked”

/> name and id attribute identify the check box the value attribute specifies the value that is

sent to the server if the check box is selected

XP

31

Creating a Text Area

To create a larger text area for the input 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 input box Default text can be specified in the input box

when the form is initially displayed.

XP

32

Creating Form Buttons

Another type of control element is one that performs an action. In forms, this is usually done with a button.

Buttons can be clicked to: run programs submit forms reset the form to its original state

XP

33

Creating a Command Button

One type of button, called a command 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, command 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.

XP

34

Creating Submit and Reset Buttons

A submit button is a button that submits the form to the server for processing.

A reset button resets the form to its original (default) values.

The syntax for creating these two buttons is:

<input type=“submit” name=“name” id=“id” value=“text”>

<input type=“reset” value=“text”> value attribute defines the text that appears

on the button

XP

35

Creating Buttons 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 is:<button name=“name” id=“id” value=“value” type=“option”>content</button> value provides an initial value for the button type is “submit”, “reset”, or “button” content consists of the page elements

displayed in the button

XP

36

Using the <button> Tag

<button name=“back” type=“button”><img src=“back.gif” alt=“” style=“margin: 4; vertical-align: middle” /><span style=“color: blue; font-weight: bold>Home Page</span>

</button>

XP

37

Creating File Buttons

A file button is used to select files so that their contents can be submitted for processing to a program.

The contents of the file are not displayed--only the file’s location.

The program can then use that information to retrieve the file for processing.

The syntax is:<input input=“file” name=“name” />

XP

38

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

XP

39

Creating Image Fields Inline images can act like submit buttons, so that when

the user clicks the image, the form is submitted. The syntax is:<input type=“image” src=“url” name=“name”

value=“text”> url is the filename and location of the inline image name 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.

XP

40

Working with Hidden Fields

A hidden field is added to the form but not displayed in the Web page. It can be placed anywhere between the opening and closing <form> tags. The syntax is:

<input type=“hidden” name=“name” id=“id” value=“value” />

XP

41

Working with Form Attributes

To specify where to send the form data and how to send it add the following attributes:

<form action=“url” method=“type” enctype=“type”>

url specifies the filename and location of the program that processes the form

method attribute specifies how your Web browser sends data to the server

enctype attribute specifies the format of the data stored in the form’s field

XP

42

The method Attribute: get or post

The “get” method (the default) appends 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 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

43

The enctype Attribute

The enctype attribute determines how the form data should be encoded as it is sent to the server.

The default enctype value is “application/x-www-form-urlencoded.”

The most basic way of encoding data is to use “text/plain,” which encodes the data as simple text.

XP

44

Using the “mailto” Action

Use the “mailto” action to send form information via e-mail without using a server-based program. The syntax 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

XP

45

Mail Message Created Using the “mailto” Action

This figure shows an e-mail message that the “mailto” action generated for a registration form.

XP

46

Specifying the Tab Order

The Tab key moves the cursor from one field to another in the order that the field tags are entered.

Add the tabindex attribute to any control element in the form to specify the tab order.

The cursor moves through the fields from the lowest index number to the highest. For example, to assign the tab index number “1” to the fname field, enter the code:

<input name=“fname” tabindex=“1”>

XP

47

Specifying an Access Key

An access key is a single key that you type in conjunction with the Alt key for Windows users to jump to one of the control elements in the form.

Add the accesskey attribute to any of the control elements to create an access key.

<input name=“lname” accesskey=“1”> if a user types Alt+l (or Command+1 for

Macintosh users), the control element for the lname field is selected