XP
Tutorial 6
Creating Web Page
Forms
1
XP
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
2
XP
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
3
XP
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
4
XP
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
5
Form Components and Elements
text box
First Name
Last Name
Address #1
Address #2
State
City
Zip
Country
Item Purchased
Purchase Date
drop-down
list box
Serial Number
Used For (check one)
radio
buttons
Home
Business
Religious or Charitable Institution
Government
Educational Institution
Network Operating System (check all that apply)
Netware
Banyan Vines
Windows
IBM Lan Server
PC/NFS
Comments?:
form
button
Send Registration
group
box
Cancel
check
boxes
text
area
XP
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, 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
7
XP
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.
8
XP
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.
9
input boxes
selection
list
option
buttons
text area
check boxes
form button
XP
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
11
XP
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.
12
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. 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.
13
XP
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
14
XP
Setting the Width of Text Boxes
<input type="text“
name="lname“ id="lname"
size="30“ />
text box width set
to 30 characters
15
Setting the Maximum Length
for Text Input
XP
 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
16
Setting a Default Value for a
Field
XP
 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" />
17
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” />
 The password field only acts as a mask for a
field entry as it is entered.
18
XP
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.
19
Creating a Label for the fname
and lname Fields
<tr>
XP
<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>
20
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.
21
XP
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>
22
Selection Lists with
Different Size Values
size = "1"
size = "4"
XP
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
23
XP
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>
24
XP
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
25
XP
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
26
<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
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.
28
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>text</legend>
collection of fields
</fieldset>
29
XP
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
30
XP
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.
31
XP
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
32
XP
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.
33
Creating Submit and Reset
Buttons
XP
 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
34
Creating Buttons with the
<button> Tag
XP
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
35
XP
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>
36
XP
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” />
37
XP
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
38
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 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.
39
XP
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” />
40
XP
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
41
XP
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
42
XP
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/xwww-form-urlencoded.”
 The most basic way of encoding data is to use
“text/plain,” which encodes the data as simple
text.
43
XP
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
44
Mail Message Created Using
the “mailto” Action
XP
This figure
shows an email message
that the
“mailto”
action
generated for
a registration
form.
45
XP
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”>
46
XP
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
47
Descargar

Tutorial 6 - People Search | Eastern Kentucky University