Scribd
Upload
1 views

ch3 Html-Cont

Uploaded by

nxddeymfijiqoqkrbq
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
1 views

ch3 Html-Cont

Uploaded by

nxddeymfijiqoqkrbq
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 117

XP

Creating Web Pages with HTML


(Part 3)

Section 5: Using Frames to Display Multiple Web Pages

Presenter: Assist.Prof.Dr. Fatih ABUT

Creating Web Pages with HTML 1


Prepared by: C. Hueckstaedt
XP
Introducing Frames

• A frame is a section of the browser window


capable of displaying the contents of an entire
Web page. For example:
– the frame on the left may display the contents of a Web
page containing a list of hyperlinks
– the frame on the right may display a Web page with
product information

Creating Web Pages with HTML 2


Prepared by: C. Hueckstaedt
XP
Advantages to Using Frames

• Frames can give more flexibility in designing your Web


presentation
• You can place information in different Web pages, removing
redundancy
• Frames can make your site easier to manage
• Frames allows you to update only a few files rather than the
whole
• Web designers advocate creating both framed and non-framed
versions for a Web site and giving users the option of which one
to use

Creating Web Pages with HTML 3


Prepared by: C. Hueckstaedt
XP
Disadvantages to Using Frames

• The browser has to load multiple HTML files before a user can
view the contents of the site increasing the waiting time for
potential customers
• Some web authors feel that frames are too constricting, limiting
flexibility in designing the layout of a Web page
• There is concern that frames can use up valuable screen space
• The source code is removed from the user

Creating Web Pages with HTML 4


Prepared by: C. Hueckstaedt
XP
An Example of Frames

A common use of frames:


displaying a table of contents
in one frame, while showing
individual pages from the site
on the another.

Creating Web Pages with HTML 5


Prepared by: C. Hueckstaedt
XP
Planning Your Frames

• Before you start creating your frames, it is a good idea to


plan their appearance and how they are to be used. There
are several issues to consider:
– What information will be displayed in each frame?
– How do you want the frames placed on the Web page?
– What is the size of each frame?
– Which frames will be static (always showing the same content)?
– What Web pages will users first see when they access the site?
– Should users be permitted to resize the frame to suit their needs?

Creating Web Pages with HTML 6


Prepared by: C. Hueckstaedt
An Example of a Frame Layout XP
Sketch

Creating Web Pages with HTML 7


Prepared by: C. Hueckstaedt
XP
Creating a frameset

• A frameset describes how the frames are organized;


they are defined by rows or columns, but not both.
• You must choose to layout your frames in either rows or
columns
• To create a frame layout, you will use the rows and cols
attributes of the <frameset> tag
– the rows attribute creates a row of frames
– the cols attribute creates a column of frames

Creating Web Pages with HTML 8


Prepared by: C. Hueckstaedt
XP
Creating a Frameset

• The <frameset> tag is used to store the definitions of the


various frames in the file. These definitions will typically:
– include the size and location of the frame
– include the Web pages the frames display
• The <frameset> code does not include an opening and
closing <body> tag
– the reason for this is that this HTML file displays the
contents of other Web pages; technically, it is not a Web
page

Creating Web Pages with HTML 9


Prepared by: C. Hueckstaedt
XP
Frames Defined in
either Rows or Columns

Frames laid out in


columns

Frames laid out in


rows

Creating Web Pages with HTML 10


Prepared by: C. Hueckstaedt
XP
The Frame Syntax

• The syntax for creating a row or column


frame layout is:
– <frameset rows=“row1,row2,row3, . . .”>
</frameset>

or
– <frameset cols=“column1,column2,column3, . .
.”> </frameset>

Creating Web Pages with HTML 11


Prepared by: C. Hueckstaedt
XP
Specifying a Frame Source

• To specify a source for a frame, use the <frame>


tag with the syntax:
<frame src=“url” />
• The URL is the filename and location of the page
that you want to load.
• You must insert the <frame> tag between the
opening and closing <frameset> tags

Creating Web Pages with HTML 12


Prepared by: C. Hueckstaedt
XP
Logo and Placement

Creating Web Pages with HTML 13


Prepared by: C. Hueckstaedt
XP
Inserting a Frame for
the Head.htm File

Because this is the first


<frame> tag, the
browser displays
head.htm in the first
frame row.

Note that using the


comment tag and
indenting the <frame>
tag a few spaces helps
make your HTML code
easier to follow and
interpret.
Frame source

Creating Web Pages with HTML 14


Prepared by: C. Hueckstaedt
XP
Nesting Framesets

• Remember that a frameset is defined by rows or columns,


but not both
• To create frames using both rows and columns, one
frameset must be nested inside another
• The interpretation of the rows and cols attributes changes
slightly
– for example, a row height of 25% does not mean 25% of the
display area, but rather 25% of the height of the frame into
which that row has been inserted (or nested)

Creating Web Pages with HTML 15


Prepared by: C. Hueckstaedt
Creating a Nested Set of Frames XP
in the Second Frame Row

two columns of
frames nested in the
second frame row

Creating Web Pages with HTML 16


Prepared by: C. Hueckstaedt
XP
Nested Frames

Creating Web Pages with HTML 17


Prepared by: C. Hueckstaedt
XP
Inserting frame columns

Creating Web Pages with HTML 18


Prepared by: C. Hueckstaedt
XP
Result of Web Site
with Nested Frames

Creating Web Pages with HTML 19


Prepared by: C. Hueckstaedt
XP
Formatting a Frames

• You can control three attributes of a frame:


– scroll bars
– the size of the margin between the source document and
the frame border
– whether or not the user is allowed to change the size of
the frame

Creating Web Pages with HTML 20


Prepared by: C. Hueckstaedt
XP
Hiding and Displaying Scroll Bars

• By default, scroll bars are displayed when the content of


the source page cannot fit within the frame
• You can override the default setting using the scrolling
attribute
• The scrolling syntax is: scrolling=“type”
– scrolling can either be “yes” (to always display scroll bars)
or “no” (to never display scroll bars)
• If you don’t specify a setting for the scrolling attribute, the
browser displays scroll bars when necessary

Creating Web Pages with HTML 21


Prepared by: C. Hueckstaedt
XP
Removing the Scroll Bars
from the Logo Frame

set the scrolling


attribute to “no” to
remove the scroll bars

Creating Web Pages with HTML 22


Prepared by: C. Hueckstaedt
XP
Setting Frame Margins

• The following should be consider for frame margins:


– the browser determines the amount of space between the content of
the page and the frame border
– occasionally, the browser sets the margin between the border and
the content too large
– the margin should be big enough to keep the source’s text or
images from running into the frame’s borders
– the margin should not take up too much space, because you
typically want to display as much of the source as possible

Creating Web Pages with HTML 23


Prepared by: C. Hueckstaedt
XP
Specifying Margins Syntax

• The syntax for specifying margins for a frame is:


marginheight=“value” marginwidth=“value”>
– marginheight is the amount of space, in pixels, above and below the
content of the page in the frame
– marginwidth is the amount of space to the left and right of the page
• If you specify only one, the browser assumes that you want to use
the same value for both
• Setting margin values is a process of trial and error as you determine
what combination of margin sizes looks best

Creating Web Pages with HTML 24


Prepared by: C. Hueckstaedt
XP
Specifying the Margin
Sizes for the Frames

height of the margin


text for the logo frame
will be 0 pixels

height of the margin for the


home page will be 0 pixels
and the width of the margin
will be 10 pixels

Creating Web Pages with HTML 25


Prepared by: C. Hueckstaedt
XP
Result of Web Site
with Resized Frame Margins

Creating Web Pages with HTML 26


Prepared by: C. Hueckstaedt
XP
Controlling Frame Resizing

• By default, users can resize frame borders in the browser


by simply dragging a frame border
• Some Web designers prefer to freeze, or lock, frames, so
that users cannot resize them
– this ensures that the Web site displays as the designer
intended
• The syntax for controlling frame resizing is:
noresize=“noresize”
• The noresize attribute is included within the <frame> tag
to prevent users from modifying the size of the frame
Creating Web Pages with HTML 27
Prepared by: C. Hueckstaedt
XP
Working with Frames and Links

• By default, clicking a link within a frame opens the


linked file inside the same frame
• You can display hyperlinks in many ways:
– in a different frame
– in a new window
– in the entire window
• When you want to control the behavior of links in a
framed page, there are two required steps:
– give each frame on the page a name
– point each hyperlink to one of the named frames

Creating Web Pages with HTML 28


Prepared by: C. Hueckstaedt
XP
Assigning a Name to a Frame

• To assign a name to a frame, add the name attribute


to the frame tag
• The syntax for this attribute is:
<frame src=“url” name=“name” />
– case is important in assigning names: “information” is
considered a different name than “INFORMATION”

Creating Web Pages with HTML 29


Prepared by: C. Hueckstaedt
XP
Setting the Frame Names

the frame name

Creating Web Pages with HTML 30


Prepared by: C. Hueckstaedt
XP
Specifying a Link Target

• You can use the target attribute to open a page in


a specific frame
• The syntax for this is: target=“name”
• When a page contains dozens of links that should
all open in the same frame, HTML provides a way
to specify a target frame for all the hyperlinks
within a single page

Creating Web Pages with HTML 31


Prepared by: C. Hueckstaedt
XP
Specifying a Link Target

the Web page will


appear in the pages
frame

Creating Web Pages with HTML 32


Prepared by: C. Hueckstaedt
XP
Using Reserved Target Names

• Reserved target names are special names that can be used in


place of a frame name as the target
• They are useful in situations:
– where the name of the frame is unavailable
– when you want the page to appear in a new window
– when you want the page to replace the current browser window
• All reserved target names begin with the underscore character
( _ ) to distinguish them from other target names
• Reserved target names are case-sensitive, they must be
entered in lowercase

Creating Web Pages with HTML 33


Prepared by: C. Hueckstaedt
XP
Using Reserved Target Names

Creating Web Pages with HTML 34


Prepared by: C. Hueckstaedt
XP
Using the _self target

Creating Web Pages with HTML 35


Prepared by: C. Hueckstaedt
XP
Using the <noframes> Tag

• Use the <noframes> tag to allow your Web site to be viewable


using browsers that do or do not support frames
• When a browser that supports frames processes this code, it ignores
everything within the <noframes> tags and concentrates solely on
the code within the <frameset> tags.
• When a browser that doesn’t support frames processes this code, it
doesn’t know what to do with the <frameset> and <noframes>
tags, so it ignores them
• When you use the <noframes> tag, you must include <body>
tags, this way, both types of browsers are supported within a single
HTML file

Creating Web Pages with HTML 36


Prepared by: C. Hueckstaedt
XP
The <noframes> Syntax

• The syntax for the <noframes> tag is:


<html>
<head>
<title>title</title>
</head>
<frameset>
frames
<noframes>
<body>
page content
</body>
</noframes>
</frameset>
</html>

Creating Web Pages with HTML 37


Prepared by: C. Hueckstaedt
XP
Frameless Version of a Web Site

Creating Web Pages with HTML 38


Prepared by: C. Hueckstaedt
XP
Inserting the Noframes Code

Web site will


contain no
frames

Creating Web Pages with HTML 39


Prepared by: C. Hueckstaedt
XP
Working with Frame Borders

• There are additional attributes you can apply to the


<frame> tag that allow you to change border
size and appearance. For example:
– you can remove borders from your frames to free up
more space for text and images
– you can change the color of the frame border so that it
matches or complements the color scheme for your
Web site

Creating Web Pages with HTML 40


Prepared by: C. Hueckstaedt
XP
Setting the Border Color

• To change the color of a frame’s border, use the


bordercolor attribute
• The attribute can be applied either to an entire set
of frames, using the <frameset> tag, or to
individual frames, using the <frame> tag
• The syntax for this attribute is:
– bordercolor=“color”>

Creating Web Pages with HTML 41


Prepared by: C. Hueckstaedt
XP
Web Site with Brown Frame Border

Creating Web Pages with HTML 42


Prepared by: C. Hueckstaedt
XP
Setting the Border Width

• Another way of modifying frame borders is to


change their widths using the border attribute
• The border attribute can be used only in the
<frameset> tag, and not in individual
<frame> tags
• The syntax for the border attribute is: <frame
frameborder=“value”>
– value is the width of the frame borders in pixels

Creating Web Pages with HTML 43


Prepared by: C. Hueckstaedt
XP
Removing the Frame Borders

Some Web designers prefer not to show frame borders in order to give the illusion of having a
single Web page rather than three separate ones, while other Web designers believe that
hiding frame borders can confuse users as they navigate the Web site.

setting the width of


the frame border to
zero has the effect
of removing the
border

Creating Web Pages with HTML 44


Prepared by: C. Hueckstaedt
XP
Web Site without Frame Borders

Creating Web Pages with HTML 45


Prepared by: C. Hueckstaedt
XP
Creating Inline Frames

• Another way of using frames is to create a floating


frame
• An inline frame, or floating frame, is displayed as
a separate box or window within a Web page
• The frame can be placed within a Web page in much
the same way as an inline image

Creating Web Pages with HTML 46


Prepared by: C. Hueckstaedt
XP
The Floating Frames Syntax

• The syntax for a floating frame is:


<iframe src=“url”>
alternate content
</iframe>
– URL is the name and location of the file you want to display in
the floating frame
– the alternate content is the content you want displayed in the
browser that don’t support inline frames
– in addition to these attributes, you can use some of the other
attributes you used with fixed frames, such as the
marginwidth, marginheight, and name attributes

Creating Web Pages with HTML 47


Prepared by: C. Hueckstaedt
XP
Attributes of inline frames

Creating Web Pages with HTML 48


Prepared by: C. Hueckstaedt
XP
Creating an inline frame

HTML code to
create an inline
frame

Creating Web Pages with HTML 49


Prepared by: C. Hueckstaedt
XP
Viewing a Floating Frame

Creating Web Pages with HTML 50


Prepared by: C. Hueckstaedt
XP

Creating Web Pages with HTML


(Part 3)

Section 6: Creating a Multimedia Web Page

Creating Web Pages with HTML 51


Prepared by: C. Hueckstaedt
XP
Working with Multimedia

• One of the most important and useful features of the World


Wide Web is the ability to present information through the
use of sound and video.
• One of the primary goals when using multimedia is to
create media clips that are compact in size without
sacrificing quality.
• When creating Web pages that include multimedia
elements, you have to consider several factors, not the least
of which is the issue of bandwidth.

Creating Web Pages with HTML 52


Prepared by: C. Hueckstaedt
XP
Bandwidth

• Bandwidth is a measure of the amount of data that can be


sent through a communications circuit each second.
– bandwidth values range from slow connections, such as
phone lines, which can transfer data at a rate of 58.6 kbps to
high speed direct network connections capable of
transferring data at several megabytes per second
• Large sound and video files cause the most trouble for
users with low-bandwidth connections.

Creating Web Pages with HTML 53


Prepared by: C. Hueckstaedt
XP
External Media

• With external media, the sound or video file is


accessed through a hypertext link.
• Using an external file, users can choose to retrieve the
multimedia clip.
– useful in situations where a user has a low-bandwidth
connection and wants the choice of whether or not to
download a large multimedia file
• External media is intended for users with low-
bandwidth Internet connections i.e. phone lines.

Creating Web Pages with HTML 54


Prepared by: C. Hueckstaedt
XP
Inline and Embedded Media

• Inline media clips are placed into the Web page itself as
embedded objects.
– a downside of using inline media is that the user is
forced to wait for the clip to be retrieved by the browser
– inline media is intended for users with access to the
Web page using a high-speed connection
• An embedded media clip works like an inline image and
can be played within the Web page itself.

Creating Web Pages with HTML 55


Prepared by: C. Hueckstaedt
XP
Streaming Audio and Video

• Another popular format for sound and video is


“streaming” audio and video.
• A streaming media file is played as it is downloaded by the
Web browser.
– this means you don’t have to wait before viewing the media clip
• There are several different streaming audio and video
formats. The most popular streaming format for audio
files is NetShow, Stream Works, and RealAudio, a
companion product is RealVideo.

Creating Web Pages with HTML 56


Prepared by: C. Hueckstaedt
XP
Inline and External Media

This figure shows


multimedia can be
added to a Web page
in one of two ways: as
external media or
inline media.

inline

external
Creating Web Pages with HTML 57
Prepared by: C. Hueckstaedt
XP
Playing a Multimedia Clip

This figure shows


a hypertext link
to a MP3 file.

If you are asked


to choose
whether to open
the file or save it,
choose to open
the sound file. If
you are asked to
play the sound
clip in its own
window, you may
do that as well.
Creating Web Pages with HTML 58
Prepared by: C. Hueckstaedt
XP
Embedding a Sound File

• A sound clip placed directly into a Web page is one


example of an embedded object.
• An embedded object is any media clip, file, program,
or other object that can be run or viewed from within
the Web page.
• To use embedded objects, the browser must support
them and must have access to the appropriate plug-in
applications.

Creating Web Pages with HTML 59


Prepared by: C. Hueckstaedt
XP
Plug-ins

• Plug-ins are programs that enable the browser to work


with an embedded object.
• When a browser encounters an embedded object, it loads
the appropriate plug-in plus any controls needed to
manipulate the object.
– for example, a sound file plug-in might place controls on the Web
page that enable the user to play the sound clip, pause it, rewind it,
or change the volume
• Plug-ins require users to download and install additional
software before being able to view the Web page.

Creating Web Pages with HTML 60


Prepared by: C. Hueckstaedt
XP
Using the <embed> Tag

• To embed a sound clip into a Web page, use the <embed> tag.
• The syntax of the <embed> tag is:
<embed src=“URL” width=“value” height=“value”
align=“value” autostart=“startvalue”>
– URL is the filename and location of the embedded object
– height and width attributes define the size of the embedded object on
the Web page
– align attribute defines how text wraps around the embedded clip
– autostart attribute is used to determine whether or not the browser
starts the embedded clip automatically when the Web page is loaded

Creating Web Pages with HTML 61


Prepared by: C. Hueckstaedt
XP
Inserting an Embedded Sound Clip

This figure shows how to insert an embedded sound clip.

embedded
sound clip

sound clip
does not play
width and automatically
height of sound
clip controls

Creating Web Pages with HTML 62


Prepared by: C. Hueckstaedt
XP
Playing an Embedded Sound Clip

If you do not see


any controls for the
sound clip on the
Web page, it may
be because the
browser does not
support embedded
objects.

embedded sound clip and


controls (your controls
may differ)

Creating Web Pages with HTML 63


Prepared by: C. Hueckstaedt
XP
Linking to a Video File

• A sample code for linking to mrim.avi and


mrim.mov video files is:
<p>Preview a clip from the Mount Rainier
Interactive Map.</p>
<blockquote>
<a href=“mrim.avi”>Summit Flyby (187K –
AVI)</a><br>
<a href=“mrim.mov>Summit Flyby (215K –
QuickTime)</a>
</blockquote>

Creating Web Pages with HTML 64


Prepared by: C. Hueckstaedt
XP
Embedding a Video File

• To embed a video file, you can use the <embed> tag.


• Specify a source for the embedded video clip with the src
attribute.
• Specify a size for the clip using the height and width attributes.
– the object’s height and width should be large enough to display any
controls needed to operate the clip
– typically, the size is determined by trial and error
• Use the autostart tag to specify whether or not to start the
clip when the page is loaded.

Creating Web Pages with HTML 65


Prepared by: C. Hueckstaedt
XP
Inserting an Embedded Video Clip

This figure shows how to insert an embedded video clip.

replace the inline


image with an
embedded clip

Creating Web Pages with HTML 66


Prepared by: C. Hueckstaedt
XP
Playing an Embedded Video Clip

This figure shows a


sample of an
embedded video clip.

embedded video
clip and controls
(your controls
may differ)

Creating Web Pages with HTML 67


Prepared by: C. Hueckstaedt
XP
Using the <noembed> Tag

• Older browsers do not support embedded objects.


• The <noembed> tag provides a way to support older
browsers that don’t recognize the <embed> tag.
• The general syntax of the <noembed> tag is:
<embed attributes>
<noembed>
HTML tags recognized by older browsers
</noembed>
• Older browsers will run whatever tags are entered between
the <noembed> tags.

Creating Web Pages with HTML 68


Prepared by: C. Hueckstaedt
XP

Creating Web Pages with HTML

Section 7: Creating Web Page Forms

Creating Web Pages with HTML 69


Prepared by: C. Hueckstaedt
XP
Working with HTML Forms

• HTML supports tags for creating forms, however, it does


not process the information.
• Use CGI (Common Gateway Interface), PHP etc. scripts to
process form information.
• CGI, PHP etc. scripts run on the Web server and receives
data from a form and uses it to perform a set of tasks.

Creating Web Pages with HTML 70


Prepared by: C. Hueckstaedt
XP
Form Components and Elements

text box
First Name Last Name
This figure shows a Address #1

form that contains Address #2

various control City State Zip

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
Government IBM Lan Server check
buttons Educational Institution PC/NFS
boxes
text
Comments?: area

form Send Registration Cancel


button
Creating Web Pages with HTML 71
Prepared by: C. Hueckstaedt
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

Creating Web Pages with HTML 72


Prepared by: C. Hueckstaedt
XP
Input Types

This figure shows Type Description


other supported type=”button” Display a button which can be clicked to
perform an action from a script
HTML input
type=”checkbox” Display a check box
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

Creating Web Pages with HTML 73


Prepared by: C. Hueckstaedt
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.
Creating Web Pages with HTML 74
Prepared by: C. Hueckstaedt
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.

Creating Web Pages with HTML 75


Prepared by: C. Hueckstaedt
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

Creating Web Pages with HTML 76


Prepared by: C. Hueckstaedt
XP
Controlling the Size of a 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

Creating Web Pages with HTML 77


Prepared by: C. Hueckstaedt
XP
Setting the Width of Text Boxes

This figure shows


an example of
code for setting
the width of text
boxes.

Creating Web Pages with HTML 78


Prepared by: C. Hueckstaedt
XP
Setting the Maximum Length
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

Creating Web Pages with HTML 79


Prepared by: C. Hueckstaedt
XP
Specify the Maximum Length
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

Creating Web Pages with HTML 80


Prepared by: C. Hueckstaedt
XP
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.
• 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
Creating Web Pages with HTML 81
Prepared by: C. Hueckstaedt
XP
Defining a Default Value for a 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

Creating Web Pages with HTML 82


Prepared by: C. Hueckstaedt
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.
Creating Web Pages with HTML 83
Prepared by: C. Hueckstaedt
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
• 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.

Creating Web Pages with HTML 84


Prepared by: C. Hueckstaedt
XP
Creating a Label for the fname Field

This figure shows


a label for the
fname field.

value of the id
attribute for the first
name field

Creating Web Pages with HTML 85


Prepared by: C. Hueckstaedt
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.

Creating Web Pages with HTML 86


Prepared by: C. Hueckstaedt
XP
Creating a Selection List

This figure shows


HTML code for
creating a
selection list.

selection list field


name

items in the selection


list

Creating Web Pages with HTML 87


Prepared by: C. Hueckstaedt
XP
Using a Selection List

Your selection list


might look
slightly different
depending on the
browser and
browser version.

Creating Web Pages with HTML 88


Prepared by: C. Hueckstaedt
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.
Creating Web Pages with HTML 89
Prepared by: C. Hueckstaedt
XP
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”>

Creating Web Pages with HTML 90


Prepared by: C. Hueckstaedt
XP
Modifying the Appearance
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

Creating Web Pages with HTML 91


Prepared by: C. Hueckstaedt
XP
Selection Lists with
Different Size Values
This figure shows
selection lists with
different size
values. size = "1" size = "4"

size = "7" size = "9"


Creating Web Pages with HTML 92
Prepared by: C. Hueckstaedt
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.

Creating Web Pages with HTML 93


Prepared by: C. Hueckstaedt
XP
Working with Option Values

• By default, a form sends the values that are displayed


in the selection list to the CGI, PHP etc. script.
• Instead of sending an entire text string, an
abbreviation or code can be sent to the script.
• Specify the value that is sent to the 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.

Creating Web Pages with HTML 94


Prepared by: C. Hueckstaedt
XP
Working with Option Groups

• 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

Creating Web Pages with HTML 95


Prepared by: C. Hueckstaedt
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

Creating Web Pages with HTML 96


Prepared by: C. Hueckstaedt
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, PHP etc.
script, if that radio button is selected by the user
Creating Web Pages with HTML 97
Prepared by: C. Hueckstaedt
XP
Working with
Radio Buttons Continued
• The name attribute must be included, because it
groups distinct radio buttons together.
– selecting one radio button in the group automatically
deselects all of the other radio buttons in that group
• Insert descriptive text next to the button.
• Enclose text within a label tag to allow the user to
select the radio button or label.

Creating Web Pages with HTML 98


Prepared by: C. Hueckstaedt
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.”
Creating Web Pages with HTML 99
Prepared by: C. Hueckstaedt
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.

Creating Web Pages with HTML 100


Prepared by: C. Hueckstaedt
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>
Creating Web Pages with HTML 101
Prepared by: C. Hueckstaedt
XP
Creating a Group Box 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

Creating Web Pages with HTML 102


Prepared by: C. Hueckstaedt
XP
Creating a Group Box and Legend

start of group box


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

resulting radio buttons and group box

Creating Web Pages with HTML 103


Prepared by: C. Hueckstaedt
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,PHP etc.
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

Creating Web Pages with HTML 104


Prepared by: C. Hueckstaedt
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.

Creating Web Pages with HTML 105


Prepared by: C. Hueckstaedt
Group Boxes for Radio Buttons XP
and Check Boxes

Creating Web Pages with HTML 106


Prepared by: C. Hueckstaedt
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.
Creating Web Pages with HTML 107
Prepared by: C. Hueckstaedt
XP
Creating a Text Area

This figure shows an


example of a text area
with default text.

The <textarea> default text


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

resulting text area

Creating Web Pages with HTML 108


Prepared by: C. Hueckstaedt
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.

Creating Web Pages with HTML 109


Prepared by: C. Hueckstaedt
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.
– the “hard” setting preserves any line wrapping that takes place in
the text box and the “soft” setting does not.
• 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.

Creating Web Pages with HTML 110


Prepared by: C. Hueckstaedt
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.

Creating Web Pages with HTML 111


Prepared by: C. Hueckstaedt
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

Creating Web Pages with HTML 112


Prepared by: C. Hueckstaedt
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.

Creating Web Pages with HTML 113


Prepared by: C. Hueckstaedt
XP
Creating Submit and Reset 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
Creating Web Pages with HTML 114
Prepared by: C. Hueckstaedt
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
Creating Web Pages with HTML 115
Prepared by: C. Hueckstaedt
XP
HTML5 Input Types (1)

• HTML5 defines new input types


• Not all browsers support all input types
• The fall back to type="text"
• http://www.w3schools.com/html/html5_form_in
put_types.asp

116
XP
HTML5 Input Types (2)

Select your favorite color:


<input type="color" name="favcolor" value="#0000ff"><br/>
Birthday:
<input type="date" name="bday" value="2013-09-02"><br/>
E-mail:
<input type="email" name="email"><br/>
Quantity (between 1 and 5):
<input type="number" name="quantity"
min="1" max="5"><br/>
Add your homepage:
<input type="url" name="homepage"><br>
Transportation:
<input type="flying" name="saucer"><br>

Validation happens when you press submit.

http://www.php-intro.com/code/forms/html5.php
117

You might also like