XHTML is a markup language for Web pages from theW3C(World Wide Web Consortium). XHTML combines HTMLand XML into a single format (HTML 4.0 and XML 1.0). LikeXML, XHTML can be extended with proprietary tags. Also like XML,XHTML must be coded more rigorously than HTML. Over the years,HTML coders have become sloppy, because Web browser software was originally written to tolerate many variations in HTML coding, but, with XHTML, coders must conform to the XML rules.
In one sentence we can say that XHTML is a superset of HTML, but unlike HTML it is stricter to rules and requires a document to follow XML rules.Whereas HTML is an application of SGML, a very flexible markup language, XHTML is an application of XML, a more restrictive subset of SGML.
Incorporating Multimedia
Audio/Video Formats
One of the exciting results of the movement to broadband Internet connectivity is the growing reliance on sound and movies for delivering Web page content. High-speed network connections are capable of transmitting data at several megabytes per second, a crucial need for delivering large audio and video files to the desktop.
Transmission Methods
There are two ways to receive audio and video files at your browser. One method is by downloading the file from a Web server. In this case, there are delays while the file is being transmitted to your browser, although modern browsers can begin playing the media before it all arrives at your desktop through progressive download methods. That is, playback takes place at the same time the file is being downloaded. After the file is downloaded it is available on your PC for rapid reloading and replaying. Downloaded files can be saved to your desktop and thereafter accessed and played locally.
The second way of receiving multimedia content is through streaming methods. If audio and video files are hosted on a "media server" then that machine can transmit files as a continuous stream; it is not necessary to wait for a download to finish before playback begins. Usually there are a few seconds of delay while initial content is transmitted to the PC; thereafter the browser receives a continuous stream of sound and pictures.
While the transmitted portion of the file is being played the next portion of the stream is being transmitted to and buffered (temporarily saved) on the PC to await playback. This interleaving of transmission and playback provides a continuous stream of multimedia content. Often, media files can be streamed at a rate that matches the bandwidth at which you are connected to the Internet. Streamed files are not downloaded; therefore, you do not receive a copy of the file.
Streaming methods are also used for live broadcasts. There are a few seconds of delay for initial transmissions to be received and buffered at the PC. While playback of the buffered content continues, the next portion of content is transmitted to and buffered on the PC to await playback. This ability of your computer to play buffered content at the same time that it receives and buffers transmissions produces a continuous stream of audio and video output.
Media Playback
In order to receive audio and video files and live media streams, you must have a media player installed on your computer. If you are running Windows XP, the Windows Media Player is included with that operating system and is installed by default. Other popular players include the Apple QuickTime Player and RealNetworks RealPlayer. The player needed depends on the formats in which media content is provided.
The following sections decribe use of the Media Player. You should have the latest version installed. When using Windows Media Player there are two ways to provide Web access to media files. You can create links to the files or you can embed the media within a Web page.
The Media Player can be embedded on the Web page rather than opening in a separate window. In this case, the player is an element of the page, permitting close integration of sounds and pictures with other content on the page. When the player is embedded, the media plays only while viewing the page and stops when another page is accessed.
Opening the Media Player on a Web page
The way in which you provide access to media files depends to a large extent on the capabilities of your Web clients. For browsers with slower Internet connections, presenting links to media files along with relevant information about file sizes gives the user the choice about whether to proceed with a download. An embedded player set for automatic playback could cause lengthy delays and an unhappy experience for the user.
For Web clients with broadband connections, the choice has more to do with page design considerations. If you anticipate continued browsing of your site with background or external playback, then you can provide links to media files. On the other hand, if playback is integral to other content on your page, then you will likely embed the media, even starting playback when the page is opened.
Audio Formats
Several different sound formats are used for Web playback. They are characterized by the brands of computer systems they are designed to serve and by the sound quality provided. Sound quality depends on the type of sound compression technique used to digitize the file. This compression method is encapsulated within a sound codex (compression / decompression algorithm) that reduces file sizes by removing unnecessary signals or collapsing redundant or repeating signals. The most popular sound formats are briefly described in the following table.
Format
Description
AIFF
Audio Interchange File Format. Developed for use on Apple Macintosh computers.
AU
Developed for use primarily on UNIX workstations. Provides mono playback.
MIDI
Musical Digital Interface. Limited to playback of sounds generated by music synthesizers.
MPEG
Moving Pictures Expert Group. Used for both audio and video playback characterized by small file sizes that maintain good reproduction.
RA
RealAudio. Proprietary format for streamed audio in real time. Produces small file sizes for lower bandwidth connections. Requires special player.
WAV
Developed for Windows computers. One of the most common formats for download files.
WMA
Windows Media Audio. Developed for streamed audio files. Very good quality for a variety of bandwidths. One of the most common formats.
Sound file formats
Video Formats
As with audio formats, video file formats are characterized by the brands of computer systems they are designed to serve and by the video quality provided. Video quality also depends on the type of codex used to digitize the file. The most popular video formats are summarized in the following table.
Format
Description
AVI
Audio Video Interleave. Standard video format for Windows. Common for download files.
MPEG
Moving Pictures Expert Group. High compression and small file sizes for both audio and video playback.
RV
Real Video. Proprietary format for streamed video in real time. Produces small file sizes for low bandwidth connections.
QuickTime
Developed for Apple Macintosh computers. Files have .mov extension. One of the most common formats for Web downloads. Requires special player.
WMV
Windows Media Video. Developed for streamed video files. Very good quality for a variety of bandwidths. One of the most common formats.
Video file formats
For purposes of this tutorial, the common Windows formats for audio (WAV, MPEG, and WMA) and video (AVI, MPEG, and WMV) files are used. Still, linking to files or accessing media streams is similar for all formats.
Incorporating Multimedia
Playing Audio
Audio files can be downloaded from the Web for local playback. Audio files in MPEG and WAV formats are the most common types for downloads. Audio files can also be streamed from a media server computer. These can be in the form of live broadcasts or digitized files for on-demand retrieval. WMA format is a popular Windows format for streamed audio.
The following graphic and text links connect to a WAV audio file appearing in the same directory as this Web page. A click on a link opens the external Media Player for file download and playback. The exact appearance of the Media Player on your desktop depends on how it is configured.
Embedding the Media Player on a Web page is accomplished with an <object> tag. This tag is a generalized way of embedding numerous kinds of objects within a Web page. Its general format for embedding audio files is shown below.
In its default settings the Player displays both a video screen and playback controls. The screen is used to display visualizations, graphical displays that change in response to the audio signal. The size of the Player can be changed from its default size by coding width and height attributes giving the dimensions in pixels.
Embedding the Media Player for an audio presentation is shown below. The URL points to an audio file in the same directory containing this Web page. The Player is displayed in its default size with its visualization screen, and playback does not commence until the "Play" button is clicked.
Figure 9-7. An embedded Media Player to play an audio file.
Code to embed the Media Player to play an audio file
The <object> tag has a selection of startup param (parameter) settings for the Player. You must code the name="URL" setting and specify the value="url" location of the audio file. Whether or not the file begins playback immediately after the page is loaded is given in the name="autoStart" parameter. The default setting is value="true"; setting value="false" requires the user to initiate playback by clicking the "Play" button on the controls.
If you do not wish to display visualizations, you can include the setting height="45"; only the controls are displayed.
An embedded Media Player displaying only its controls.
The name="uiMode" parameter of the <object> tag permits you to set display characteristics for the embedded player. Its default value="full" produces the full display screen and full set of controls. With value="mini" you get a reduced visualization screen and a minimal set of controls without a progress bar or track selector buttons. A typical minimum display is shown below, here with the width and height of the Player adjusted.
By setting the uiMode to value="none", no Player controls are displayed. Only the screen is visible. This can be an appropriate setting when the Player is auto-started or if the user knows that controls are available to start and stop the presentation in the "context menu" displayed by right-clicking on the Player screen. Normally, however, the standard controls are hidden because you wish to program them yourself.
First, you need to give the Player an id value so it can be referenced by a script. Here id="Player" is assigned in the <object> tag. The uiMode parameter is set to value="none" to suppress display of controls, autoStart is turned off, and width and height style properties size the visualization screen. With elimination of controls, you need to create "Start" and "Stop" buttons to control the Player. These buttons are created with <input type="button"/> controls. (Creating buttons is covered in a later tutorial.)
In order to make the buttons respond to mouse clicks, onclick event handlers are added to the buttons. These event handlers are coded with JavaScript statements to control the Player. For the "Start" button the statement Player.controls.play() calls the Player’s play() method to begin playback; for the "Stop" button the statement Player.controls.stop() calls the Player’s stop() method to stop playback. That’s all there is to it.
It is not even necessary, in fact, to display the Player at all. For audio playback you can hide the player completely and turn sound on and off with just scripted buttons. Code a width and height of 0px for the <object> tag and supply the control buttons.
Since the Media Player is invisible it does not matter where the <object> tag is coded on the page. If you look very closely you can see a tiny dot at the bottom-left corner of the "Start" button. This is the Media Player reduced to a single dot by setting its width and height to 0 pixels. If you wish to completely eliminate the dot, include a style sheet for the Player with width:0px and height:0px.
Playing Multiple Sounds
With a slight modification of scripting you can play multiple sounds through the same Media Player. In the following example, four different animal sounds are played by clicking on four separate <img/> tags. The <object> tag hides the Media Player and no <param> tags are coded. Thus, no audio file is selected for playback; only an invisible player is embedded on the page.
Playing multiple sound files through a single Media Player
<object id="Player" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
width="0" height="0">
</object>
<img src="Bullfrog.gif" alt="Picture of bullfrog"
onclick="Player.URL='Bullfrog.wav'; Player.controls.play()"/>
<img src="Goat.gif" alt="Picture of goat"
onclick="Player.URL='Goat.wav'; Player.controls.play()"/>
<img src="Lion.gif" alt="Picture of lion"
onclick="Player.URL='Lion.wav'; Player.controls.play()"/>
<img src="Rooster.gif" alt="Picture of rooster"
onclick="Player.URL='Rooster.wav'; Player.controls.play()"/>
Code to play multiple sound files through a single Media Player
A pair of JavaScript statements is needed in the event handlers. The first statement assigns a sound file to the URL property of the Player: Player.URL='filename.wav'; the second statement starts its playback: Player.controls.play(). It is not necessary to code a stop() script since the sounds are very short. Notice that the entire event handler script is enclosed in double quotes, that the sound file name is enclosed in single quotes, and that the two statements are separated by a semicolon.
Even if you are not familiar with the JavaScript language you should be able to modify and include this scripting in any tag you wish to use to load and play sound files through a hidden Media Player.
Background Sounds
For certain pages you may not wish to supply either a Player display or tags to control it. This would be the case in playing a background sound of music or narration that begins automatically when the page is loaded, and stops when a different page is accessed. To play a background sound all that is required is a hidden player that auto-starts the audio file.
Again, since the Player is not visible it does not matter where this <object> tag is coded on the page. As soon as the page finishes loading, download and playback begins. When navigation moves to a different page, the audio stops.
Deprecated Embed Tag
The Media Player can be embedded in a Web page with the <embed/> tag, whose general format is shown below.
<embed src="url" autostart="true|false"/>
The src attribute is the URL of the file. The autostart property indicates whether the file should begin immediate playback when the page is opened.
Incorporating Multimedia
Playing Video
There are no significant differences between accessing and playing video files versus audio files. Video files can be downloaded from the Web for local playback. Files in AVI and MPG formats are the most common types for downloads. Video files in WMV format can be streamed from a media server. These can be live broadcasts or digitized files for on-demand retrieval.
Code to embed the Media Player to play an video file
Accessing Video Streams
With availability of URL addresses for external sites you can link to streamed video content. As with audio files, you may be able to grab the URL from the link if the video is playing through Windows Media Player. While the video is playing, right-click on the screen and choose "Properties" from the pop-up menu. From the Properties window copy the full URL for the file being streamed.
The following embedded video is linked by this technique. In this case the URL points to a movie trailer located through a Web search.
Many Web-based video files have costs or fees for viewing. Also, you will often encounter video players embedded in pages of the site with settings that do not permit access to the Properties window for extracting URLs. You will just need to be patient and persistent to find video to which you can link. Also, URLs are changed routinely and later you may not be able to link to the video at its original location.
Live video streams can be captured and played through the Media Player. The following connection C-SPAN URL was determined from the Properties window of the Player during a live broadcast.
As with audio streams, many Web-based video feeds have fees for viewing. Also, you will often encounter special video players embedded in pages of the remote site with settings that do not permit access to the Properties window for extracting URLs. You will need to check your video URLs routinely to ensure that files have not been moved and that your links are still active. You will just need to be patient and persistent to find maintain videos to which you can link.
Using Frames in WebPages
Creating Framesets
Under XHTML 1.1, creating and using framesets is not supported. A different method is under development by the World Wide Web Consortium to permit opening multiple pages inside multiple frames within the main browser window; however, these standards are not yet finalized nor supported by today's browsers.
This tutorial describes the use of frames because they are popular page-display methods that you will likely encounter and may wish to use. Most modern browsers support frames. It is also acceptable to retain the Document Type Definition (DTD) and xhtml namespace declarations for XHTML 1.1 as part of your page coding:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
However, you will not be able to validated your pages under XHTML 1.1 validation services. Still, your pages will display properly when using both framesets and in-line frames.
Frames are separate "panes" inside the browser window within which different pages can be displayed at the same time.
The example browser window is divided into three separate frames. The top frame displays a title; the left frame displays a menu of links; the right frame displays the different pages accessed by these links. All of the frames, in fact, display different Web pages, collected together for display in a single browser window.
An advantage of using frames in this manner is that it is not necessary to code the title and menu on every content page that displays a different "Wonder of the World." They are always viewable and accessible in their frames and do not have to be downloaded with every page. Plus, changing the information content on the screen is only a matter of changing the document appearing in the right frame. By creating these frames you can provide a consistent look to your pages, an ever-present title in the top frame, an ever-present menu in the left frame, and a common format for the content pages in the right frame.
The Frameset Document
A frameset document describes the overall structure of a window subdivided into frames. This is an XHTML document in which <frameset> tags replace the <body> section. A <frameset> tag describes the number, locations, and sizes of component frames. Enclosed within a frameset tag are two or more <frame/> tags which identify and characterize the frames and specify the original documents that populate the frames.
The <frameset> Tag
The <frameset> container tag divides the browser window into separate frames. The general format for the <frameset> tag is shown below.
The cols and rows attributes specify the layout of frames within the browser window. cols is used to divide the window vertically into two or more frames; rows is used to divide the window horizontally into two or more frames. A <frameset> tag can specify either cols or rows, but not both for the same frameset.
The cols attribute specifies the number and widths of frames as percentages of the width of the browser window or as a certain number of pixels in width. The rows attribute specifies the number and height of frames as percentages of the height of the browser window or as a certain number of pixels in height. Normally, it is best to use percentages to express frame sizes so they remain proportional when the user resizes the browser window.
The following frameset document establishes a window with two vertical frames, the first of which is 20% and the second of which is 80% of the width of the browser window. The resulting frameset is displayed in Figure as two side-by-side frames divided by a border.
Notice in the above code that the page does not include a <body> tag. The <body> tag is replaced by the <frameset> tag.
When using the rows attribute the same rules apply except the frameset is created as horizontal rows with frames separated by borders.
<frameset rows="20%,80%">
...
</frameset>
You can use an asterisk (*) rather than a measurement to permit the browser to determine frame sizes. This notation indicates "any remaining space." For example, the previous frameset could have been coded as:
<frameset rows="20%,*">
To,permit the browser to calculate the second row as occupying the final 80% of the browser window.
By default, framesets have borders between the frames. You can include the frameborder="1|0" attribute in the <frameset> tag to show (1) or hide (0) borders.
The width of borders between frames can be set with the framespacing="n" attribute, specifying in pixels the width of borders.
If you have visible borders between your frames, you can assign them a color with the bordercolor="color" attribute. Colors are specified as color names or hexadecimal or RGB values.
The <frame> Tag
While the <frameset> tag subdivides the window into frames, those frames are populated with Web pages through <frame/> tags. There is one <frame/> tag for each of the frames specified in the frameset.
The <frame/> tag contains attributes to indicate the original contents of the frame along with the frame's appearance and behavior. The <frame/> tag is not a container tag, so it is not paired with a closing tag. Its general format is shown below.
Note that the <frame/> tag uses the same frameborder and bordercolor attributes as does the <frameset> tag. These attributes are set for the frameset as a whole in the <frameset> tag; they can be overridden for particular frames in the <frame/> tag. Two frames that border each other, however, cannot have conflicting attributes.
The src Attribute
A frame can be initially loaded with a Web page by specifying its URL in the src="url" attribute. Coding this attribute ensures that the frame is not blank when the window is first displayed. The document that is preloaded in the frame can be local to the site, or the URL can point to an external document.
The following code shows a document named Menu.php initially loaded into the left frame of a frameset, along with a document named Home.htm loaded into the right frame. The documents are assumed to be in the same directory as the frameset page.
Even though a frame is preloaded with a document through the src attribute, it can display other pages by targeting the frame in links to those documents. This linking technique is described later. Still, if you intend to load other documents into a frame, it needs to have a name through which it can be referenced in associated hyperlinks. Frames that will only contain the original document specified in the src attribute do not need to be named.
Frame names are assigned with the name attribute. In the following example, the names "Frame1" and "Frame2" are assigned to the two frames of a frameset. Again, you'll see later how to populate these frames with other linked documents.
When frame borders are visible they are also movable. When the mouse cursor is moved on top of a border, its icon changes and the user can drag the border to resize the frame. Normally, you will want your frame setup to remain fixed so that your pages appear as intended. So, to prevent users from changing frame sizes, code the noresize attribute in the <frame/> tag as shown below.
Setting noresize for the left frame has the effect of preventing resizing of the right frame since they share the same border.
The scrolling Attribute
The scrolling="auto|yes|no" attribute creates a frame with or without scroll bars. By default, frames permit scroll bars to appear when the document is too large to fit within the frame. The default value is scrolling="auto". You can change this setting to scrolling="yes" to always display horizontal and vertical scroll bars even if the document fits within the frame. You can also set scrolling="no" to suppress the display of scroll bars even if the document is too large to fit within the frame. As a general rule, you should always permit document scrolling unless you have an overriding reason for not doing so. One case of scroll suppression may be a top frame containing a banner or title without additional content to scroll.
The marginwidth Attribute
As is the case with full-size browser windows, information is displayed across the entire frame, running from the left border to the right border with only a tiny amount of white space separating the text from the borders. You can help improve document readability by introducing margins on either side of the text through use of the marginwidth="n" attribute. The attribute value is given as the number of pixels of space to leave between the document and the left and right borders of the frame.
The marginheight Attribute
In the same manner, margins can be introduced at the top and bottom of a document with the marginheight="n" attribute. The pixel value indicates the amount of space to leave between the document and the top and bottom of the frame. An alternative to using marginwidth and marginheight is to use style sheets to set margins on the documents that occupy the frame.
Nested Frames
The above examples describe a single frameset containing two columns or two rows of frames. You can, by nesting framesets within framesets, define more complex arrangements of frames. A typical example is shown below. The top frame is available for displaying a banner logo identifying the site, the left frame for a menu of links, and the right frame for the documents linked from the menu frame.
This arrangement of frames is produced by coding one frameset inside another frameset. The "outer" frameset is composed of two rows. The top row contains the banner frame and the bottom row contains the "inner" frameset of two columnar frames, the left frame displaying a menu and the right frame containing a document. The coding to produce this frameset is shown below.
Of course, you can produce more complex arrangements of frames, but you need to be cautious about doing so. You should create only as many frames as you need to improve the functionality of your site, not to overload visitors with information or complicate navigation between pages.
Using Frames in WebPages
Targeting Frames
Once you have created a frameset and loaded the frames with initial documents, you need to be able to open other documents inside the frames. Consider the case of a frameset with a menu of links in the left frame and the linked documents appearing in the right frame. By clicking a link in the menu frame you open the appropriate document in the document frame.
Targeting frames
The above application is put together with the frameset document shown below. This is the Wonders.html document initially opened in the browser to reveal the frameset.
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML Frameset</title>
</head>
<frameset rows="80,*" cols="*" frameborder="yes" border="1" framespacing="0">
<frame src="top.htm" name="topFrame" scrolling="No"
noresize="noresize" id="topFrame" title="topFrame" />
<frameset cols="183,*" frameborder="yes" border="1" framespacing="0">
<frame src="menu.htm" name="menu" scrolling="No"
noresize="noresize" id="leftFrame" title="leftFrame" />
<frame src="content.htm" id="mainFrame" title="content" name="content" />
</frameset>
</frameset>
<noframes><body>
<b>Your browser does not support frameset,
plz upgrade to a newer version of your browser</b>
</body>
</noframes>
</html>
Code for frameset page
This is a nested frameset. The outer frameset is comprised of two rows. The upper row is a frame loaded with a title document (Title.htm); the lower row is a nested frameset. This second frameset contains two columns. The left frame is loaded with the menu document (Menu.htm); the right frame is initially loaded with the opening page of the site (Home.htm). The right frame is also named (name="Content") because it is the target frame for displaying documents linked from the menu frame.
Notice that the framesets do not display borders since frameborder="0" and framespacing="0" are coded in the <frameset> tags. (framespacing needs to be set to 0 to eliminate a tiny amount of spacing between frames even when borders are not displayed.) Also, the top frame is set to scrolling="no" to suppress the default scroll bar.
The target Attribute
Linked documents are loaded into frames by coding the target="framename" attribute of the <a> anchor tag. The target attribute specifies the name of the frame (given in the <frame name="framename"/> tag) in which to open the document. Thus, the Menu.htm page that is loaded into the left frame above is coded as follows to target the linked pages to the named "Content" frame.
<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Menu</title>
<script LANGUAGE="JavaScript">
function displayDescription (description) {
window.status = description;
return true;
}
function clearstatus() {
window.status="";
}
</script>
<link href="menustyle.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
}
-->
</style></head>
<body bgcolor="#A3D6F3">
<![CDATA[Navigation bar start here]]>
<div id="ebizmenu">
<ul>
<li>
<a href="http://www.ebizelindia.com/" onMouseOver="javascript:displayDescription
('Go to eBIZ Home Page'); return true"
onMouseOut="javascript:clearstatus();"
target="content">eBIZ home page</a></li>
<li><a href="http://mail.ebizelindia.com/" target="content"
onMouseOver="javascript:displayDescription ('Go to eBIZ mail'); return true"
onMouseOut="javascript:clearstatus();">eBIZ email</a></li>
<li><a href="http://support.ebizelindia.com/" target="content"
onMouseOver="javascript:displayDescription
('Go to eBIZ Support Home page'); return true"
onMouseOut="javascript:clearstatus();">Contact Us</a></li>
<li><a href="http://ebizshaadi.com/" target="content"
onMouseOver="javascript:displayDescription
('Go to eBIZShaadi Home page'); return true"
onMouseOut="javascript:clearstatus();">ebizShaadi</a></li>
<li><a href="http://education.ebizelindia.com/" target="content"
onMouseOver="javascript:displayDescription
('Go to eBIZ education page'); return true"
onMouseOut="javascript:clearstatus();">eBIZ education</a></li>
<li><a href="http://ebizgk.com/" target="content"
onMouseOver="javascript:displayDescription
('Go to eBIZ GK Home page '); return true"
onMouseOut="javascript:clearstatus();">eBIZ GK</a></li>
</ul>
</div>
</body>
</html>
Code to target links to named frame
Although the documents appearing in the right frame are changed with each menu selection, the menu document itself always remains in the left frame. It does not have to be reloaded every time a new document page is displayed.
Document Coding
Pages that are loaded into frames utilize standard XHTML coding. No special coding is required to initially load pages with the frameset or when targeted to a frame with a link. The following two example pages show complete coding for the above Title.htm document and one of the content documents.
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Content</title>
</head>
<body>
<strong>Click the links at the navigation bar to load the pages.</strong>
</body>
</html>
Framesets can be handy devices if they are not overdone. There is great convenience, for instance, in having a standard menu of links always available for immediately loading documents into a standard display frame. Plus, as a developer, using frames can reduce the need to code interconnecting links on a series of pages. In fact, no interlinking is necessary when all documents can be accessed through a common menu of links.
Still, there is a tendency among some authors to over-use frames. They fill the window with so many frames that no one document can be viewed without scrolling left and right or up and down to view it. Or, they nest framesets within framesets and trap the visitor inside a maze of frames with the only hope of escape being to reload the site or even to close and reopen the browser. A related problem is that frames take up valuable screen real estate with their borders and margins. So, you simply cannnot display as much information within frames as you can inside a full browser window. Plus, it is difficult to design a frameset that looks and works the same on monitors set at different screen resolutions.
Framesets present a special problem for visitors who wish to bookmark pages for return visits. The problem is that it cannot be done! Bookmarks target the document appearing in the full browser window. Thus, it is the frameset that gets bookmarked, not individual pages inside the frames. The bookmark link always returns to the original set of pages loaded in the frameset document.
The convenience of frames needs to be balanced against their drawbacks when considering their use. It is best to keep things simple, using only the minimal set of frames necessary to control linking to necessary documents. At the same time, you need to provide the means for exiting the frameset when linking to external documents or when linking to local pages that are not designed for framed displa
Using Frames in WebPages
Floating Frames
A floating frame, or inline frame, appears as a separate, floating window for displaying other Web documents. It takes its name from the fact that it can appear in-line within the normal flow of page elements, or it can be floated to the left or right of the page with word-wrap around it. The frame can display a single document or it can be a target for multiple linked documents.
Inline frames are created with the <iframe> tag whose general format is shown above in image
The src attribute identifies the page to load initially into the frame. The name attribute assigns a name to the frame as a target for links. You do not necessarily need to target the frame with links. You may simply wish to display a single external document inside the frame, in which case you need only to specify a URL in the src attribute of the unnamed frame.
By default, borders are displayed around the frame. You can suppress border display with the frameborder="0" attribute. If the page content loaded into the frame is larger than the frame, then scroll bars are automatically displayed. You can suppress scroll bar display with the scrolling="no" attribute, or you can display scroll bars whether needed or not with scrolling="yes".
The remaining attributes -- width, height, align, vspace, hspace, marginwidth, and marginheight -- can be better set with style sheets. These should be considered deprecated attributes. Note that a closing </iframe> tag is required even though it encloses nothing. Also, you can include any number of floating frames on a Web page.
The following code is used to display and activate the floating frame at the top of this page. Style sheet properties replace most of the frame attributes. Note that no src attribute is coded in the <iframe> tag. Therefore, the frame opens with no document displayed, leaving a blank frame.
An XHTML form provides a way for users to interact with a Web page. A form is, basically, a data capture device. It presents the user with one or more data input or selection controls, or fields, through which the user submits information to a Web page. On the basis of this submitted information, the page can respond to the user. This response can vary depending on the purpose of the form. The submitted data may be used,
• to direct visitors to a different page, much like what happens when clicking a link;
• to present visitors with personalized pages containing information and links pertinent to their interests or preferences;
• to trigger a complex search process to locate information, products, or services about which the user is interested;
• to perform personalized displays of options or calculations of prices of those products or services;
• to trigger a credit card check during purchase of products or services;
• to interface with the organization's accounting and billing systems to finalize purchase;
• to generate automated email responses as purchase confirmations;
and the list can go on and on. The point is that forms are the triggers for a whole host of activities that transform Web sites from simple electronic "page turners" into full-featured information processing systems.
Form Controls
Forms gather information from users by displaying special form controls that permit the user to enter data or make selections. The variety of standard controls that can be coded on a Web form are shown below.
Control Type
Browser Display
Textbox:
Password:
Textarea:
Radio Button:
Radio Button
Checkbox:
Checkbox
Drop-down List:
Submit Button:
Submit Graphic:
Reset Button:
Varieties of form controls
Note that there are three basic categories of controls. The fields labeled "Textbox," "Password," and "Textarea" present input areas where the user can enter information as typed characters. The controls labeled "Radio Button," "Checkbox," and "Drop-down List" provide options for the user to select from displayed items. The controls labeled "Submit Button," "Submit Graphic," and "Reset Button" are clickable controls for submitting the form data for processing or refreshing the entire form by clearing entries and selections.
Form Processing
A form by itself cannot provide much in the way of processing power. Therefore, XHTML forms are backed by processing routines run remotely at the Web server to handle data submitted from these forms. Form information arriving at the Web server is processed by programs, or scripts, written in server languages such as Visual Basic, PHP, or Java. These are full-featured programming languages that often interact with databases and files on the server, thus offering a full range of information processing capabilities.
Although a large part of form processing takes place on the Web server, certain kinds of processing can take place locally at the browser. These processing scripts are written in the JavaScript language, the default scripting language included with modern browsers. This language has many of the features of regular programming languages. Its processing capabilities, though, are limited to what can be achieved on the local desktop PC.
Working with XHTML Form elements
Creating Forms
An XHTML form can appear anywhere within the body of a Web page. In fact, the entire page can be a form, or you can define more than one form per page. The manner in which you do this is dependent upon the purpose of the form and the way in which browser or server processing programs interact with the form.
The <form> Tag
Irrespective of the number of forms or their locations on the page, each must be surrounded by a <form> tag, the general format for which is shown below.
All controls that are part of a form must be enclosed inside a <form> tag. The tag can appear anywhere on the page as long as it encloses all its controls. If a page contains a single form, you can code the opening tag immediately following the <body> tag and the closing tag immediately preceding the </body> tag to encompass the entire page as a form. Then, form controls can appear anywhere on the page and be part of the form. If a page contains more than one form, then separate <form> tags need to enclose only those controls comprising each form.
The id Attribute
The id attribute assigns an identification to the form. This id is used to reference a form when two or more forms appear on the same page. You can use any identification of your choosing for a form; the id value should not include embedded blank spaces or special characters. For pages with a single form, it is not necessary to assign an id. The id attribute replaces the deprecated name attribute. The name is still required for certain types of server scripts, but is not valid under XHTML 1.1.
The action Attribute
User information entered into a form is made available to a server page containing a script to processes that information. The script may appear on the same page as the form -- the normal technique -- or the information may be sent to a different page. The action attribute identifies the server page to which form information is submitted. If the processing page is the same page as the form page, or if the processing page is in the same directory as the form page, then the URL is simply the name of the page. If the page is at a remote location, a complete URL is coded. The action attribute must appear in all <form> tags.
The method Attribute
The method attribute specifies the manner in which form information is transmitted to the page identified in the action attribute. The two possible values are get and post, the former being the default. When the get method is used, information from the form is appended to the action URL; when the post method is used, the information is transmitted to the action page as a separate data stream. These methods are discussed in more detail later.
All that is required at present is to code the basic <form> tag to enclose its controls. The minimal setup for a page containing a form is shown below, delaying for the moment considerations about form submission for processing.
The primary use of forms is to submit entered or selected information to a server-based Web page for processing. This is the reason for the action attribute of the <form> tag -- to identify the page to which the information is sent.
You can, however, use form controls independently of form submission where scripts to process the data are browser-based scripts located on the same Web page. In this case, it is not even necessay to include a <form> tag on the page. Individual controls are processed directly by browser scripts without submitting a form. A quick example is shown below. Enter your name in the input box and click the "Submit" button. The entered name is displayed as part of an output text string.
........
<head>
<script type="text/javascript">
function ShowName()
{
var Input = document.getElementById("Name")
var Output = document.getElementById("Output")
Output.innerHTML = "Your name is <b>" + Input.value + "</b>."
}
</script>
</head>
<!-- XHTML Code -->
<body>
........
<div>
Enter your name: <input id="Name" type="text"/>
<input type="button" value="Submit" onclick="ShowName()"/><br/>
<span id="Output" style="color:blue"></span>
</div>
........
</body>
Processing input data through an on-page script
Code for the controls and the processing script are shown below. You are not expected to understand the script. Notice, though, that the textbox control, the button that triggers the script, and the <span> tag that serves as the target for script output do not appear inside a <form> tag. A <form> tag is not required because the information entered into the textbox is not being submitted to this page or to a different page for processing. Rather, all controls are directly accessed by the on-page script.
<![CDATA[ Browser Script]]>
<script type="text/javascript">
function ShowName()
{
var Input = document.getElementById("Name")
var Output = document.getElementById("Output")
Output.innerHTML = "Your name is <b>" + Input.value + "</b>."
}
</script>
<![CDATA[ XHTML Code]]>
<div>
Enter your name: <input id="Name" type="text"/>
<input type="button" value="Submit" onclick="ShowName()"/><br/>
<span id="Output" style="color:red"></span>
</div>
Code to process input data through an on-page script
If processing of form controls is handled exclusively by browser scripts (the form is not being submitted for server processing), then no <form> tag is needed. You may, however, include a <form action=""> tag to indicate local processing and for consistency in coding form controls.
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample Form Processing</title>
<meta name="generator" content="jNote-iT" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript">
function ShowName()
{
var Input = document.getElementById("Name")
var Output = document.getElementById("Output")
Output.innerHTML = "Your name is <b>" + Input.value + "</b>."
}
</script>
</head>
<body>
<![CDATA[ XHTML Code]]>
<div>
Enter your name: <input id="Name" type="text"/>
<input type="button" value="Submit" onclick="ShowName()"/><br/>
<span id="Output" style="color:red"></span>
</div>
</body>
</html>
Working with XHTML Form elements
Textbox Controls
The most commonly encountered type of form control is the textbox. This control presents a standard text entry box into which information is typed. A text input field is created using an <input/> tag in the following format.
General format for <input type="text|password"/> tag;
The type Attribute
The <input/> tag includes a type attribute to define this as a text entry field. Two different types of text input controls are available. If type="text", or if no type attribute is specfied, the field type is a standard textbox for entering information. If type="password", a similar control is created but with typed characters echoed as bullet characters to disguise the entered information. The <input/> tag is an in-line requiring enclosure inside a block-level tag.
The two control types are shown below along with the coding to produce them. The controls appear in a borderless table in order to align them and their prompt labels. Enter any text into the fields to view their appearance.
You will nearly always need to identify your text fields, as you will any other form control. Providing an id is important because it provides identification for the data value entered into the field by the user. Both browser and server scripts written to process this information does so through the control id. (The deprecated name attribute can be used in place of an id for scripts requiring this type of identification.)
The size and maxlength Attribute
Unless you specify a size for a textbox, it is displayed at its default size, which is large enough for approximately 20 typed characters. In most cases you will want to specify a size that is suggestive of the number of characters expected to be entered. For example, the three textboxes below are sized at 15 (City), 2 (State), and 10 (Zip code) characters, respectively. Instead of using the size attribute you can specify a field size using the style sheet width property.
A textbox can hold up to 256 characters, irrespective of its display size. When typing reaches the right boundary of the field, the text scrolls to permit additional characters to be typed. As a general rule, you should not permit the user to enter more than the maximum number of expected characters. When capturing data for server processing, this maximum is often given by the field sizes in the database that stores the values.
You can set a maximum number of allowable characters by coding the maxlength attribute. When this value is coded, the user is not be able to type more than the specified number of characters into the field.
A textbox can include the value attribute to pre-enter text in the field. You can provide a default value for the field, or give suggestions about the content expected.
Name: <input type="text" id="FullName" size="30" value="Enter your full name here"/>
Code to pre-fill a textbox control
Styling Textboxes
If you wish to change the default appearance of a textbox, you can use style sheet properties to do so. As an example, the following textbox is decorated with different borders, background color, and foreground color, and displays a different font face and size from the normal Arial 10-point font.
The following example demonstrates use of textboxes for data entry. You may not be able to understanding the JavaScript code shown below, but it illustrates how a browser script can access information in textbox controls and perform local processing and output of the information. Enter some text into the boxes and click the "Submit" button.
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="jNote-iT" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript">
function Get_Logon()
{
var Account = document.getElementById("Account")
var Password = document.getElementById("Password")
var Output = document.getElementById("Output")
Output.innerHTML = "Your User ID is <b>" + Account.value
+ "</b> "
}
</script>
</head>
<body>
<div>
Enter your account: <input id="Account" type="text"/><br/>
Enter your password: <input id="Password" type="password"/>
<input type="button" value="Submit" onclick="Get_Logon()"/><br/>
<span id="Output" style="color:blue"></span>
</div>
</body>
</html>
When the "Submit" button is clicked it activates a JavaScript function named Get_Logon() that appears on the same page as the textbox controls. The script accesses information typed into the textboxes and displays it on screen.
The <textarea> tag is used when you need a larger input area than is provided by a textbox. This tag creates a multiline input box that displays horizontal and vertical scroll bars and word-wraps the text. Over 65,000 characters can be entered into a textarea control. A typical textarea control resembles the following.
Enter your comments:
A <textarea> control.
The <textarea> control is a container tag with the general format shown in Figure.
<textarea id="id" cols="n" rows="n" >
...pre-entered text
</textarea>
General format for <textarea> control
The id Attribute
As with all form controls, the <textarea> should be assigned an id. This id should be representative of the information contained in the field.
The cols Attribute
The visual width of the textarea is given by the cols attribute. It specifies the width as the approximate number of characters appearing across a line of text. If this attribute is not present, a default width of approximately 20 characters is used. A style sheet width property can be used in place of the cols attribute to set the width of the textarea.
The rows Attribute
The height of the textarea is given by the rows attribute. This value specifies the number of text lines that are visible in the input area. The default is two rows of visible text. A style sheet height property can be used in place of the rows attribute to set the height of the textarea. Pre-filled Content A textarea can be pre-filled with text. The information to display in the textarea is coded between the opening and closing <textarea>...</textarea> tags.
It is important to remember that any spaces, line breaks, or blank lines appearing in the editor coding are reproduced in the textarea, in much the same way that the browser displays information coded inside a <pre> tag. In the following example, editor coding in Listing arranges the tag and its content on separate lines and indented for readability within the editor. Its browser display in Figure, however, is not as normal word-wrapped paragraphs; rather, the editor coding is faithfully reproduced.
<textarea id="MyTextarea" cols="50" rows="6">
These are two paragraphs appearing inside a textarea. This content, with line breaks and blank lines coded in the editor for for readability, is exactly reproduced within the textarea.
</textarea>
Coding a textarea with hard-coded spaces and line breaks
A textarea displaying hard-coded spaces and line breaks.
To permit pre-fill text to be automatically spaced and word-wrapped inside a textarea, the text should be coded immediately following the opening tag and followed immediately by the closing tag. No hard spaces or line breaks should be coded. The following example shows pre-entered paragraphs coded as single lines in the code editor to permit proper word wrapping in the textarea.
<textarea id="MyTextarea" cols="50" rows="6">
These are two word-wrapped paragraphs appearing in a textarea.
This content, without extra line breaks or blank lines coded in the editor, is properly word-wrapped inside the textarea as intended. </textarea>
Coding a textarea for word-wrapped content
A textarea displaying word-wrapped content
Styling a Textarea
A textarea uses a default Courier New font face with 12-point type. You can change this setting as well as style the textarea using a style sheet as shown below.
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> XHTML Styled TextArea </title>
<meta name="generator" content="jNote-iT" />
<meta name="author" content="eBIZ education Team" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
textarea {
border:outset 5px #FFCC33;
background-color:#F0F0F0;
color: #336666;
font-family:comic sans ms;
font-size:10pt;
padding:7px;
font-weight:bold
}
</style>
</head>
<body>
<textarea id="Comments" cols="50" rows="4">
This control is styled with 10-point Comic Sans
MS type face with gray background and blue
foreground colors.
The border is inset style, five pixels in width.
Padding of 7 pixels appears around the text.
</textarea>
</body>
</html>
Radio buttons are collections of circular buttons that can be clicked "on" and "off." A filled-in, darkened center in the button indicates that the button is chosen; a open center indicates that the button is not chosen. Radio buttons normally provide users with mutually exclusive choices. That is, only one of a group of buttons can be chosen. When a different button is clicked, the previous button is turned off. A set of radio buttons is shown below.
Male
Female
A set of radio buttons
The <input type="radio"> Tag
Radio buttons are defined with one or more <input type="radio"/> tags. A separate tag is required for each button in a set. The general format for this tag is shown below.
The <input type="radio"/> tag only displays a button. In order to provide a label for the button, text can appear either before or after the button code to place it to the left or right of the button.
The id Attribute
An id can be assigned to a button if there is a need to identify it for individual script processing, normally by a browser script. Otherwise, an id is not needed.
The name Attribute
Radio buttons are usually grouped to present a set of related choices for the user. In this case, only one of the options can be chosen -- they are mutually exclusive choices. When a button is clicked for selection, and that button is highlighted, any previously chosen button becomes de-selected and un-highlighted. A group of radio buttons is made to act in this way by assigning the same name to all buttons in the group, as shown in the following code for the buttons displayed above.
There are three buttons in this group, each appearing on a separate line. A text label appears to the right of the buttons to identify each choice. All buttons have the same name to enforce only one choice from the group.
The value Attribute
In a manner similar to text boxes, password boxes, and textareas, radio buttons have data values associated with the choices. These values are provided explicitly through value attributes coded for the buttons. When a button is chosen, its particular value is associated with the name of the button, that is, with the name assigned to all of the buttons in the group. Consider the following example.
What is your favorite color?
Red
Green
Blue
A set of buttons for making a choice of a color
What is your favorite color?<br/>
<input type="radio" name="Color" value="Red"/>Red<br/>
<input type="radio" name="Color" value="Green"/>Green<br/>
<input type="radio" name="Color" value="Blue"/>Blue<br/>
Code for a set of buttons to make a color choice
All of the buttons share the name "Color" in order to set up a group of mutually exclusive choices. The particular color chosen from the group is given by the value associated with the choice. So, if the user clicks the first button, the color "Red" is chosen. More accurately, the value "Red" becomes associated with the name "Color" as indicative of the choice.
It is normally always necessary to code value attributes for radio buttons. This is the way in which buttons take on values and how a browser script or server program determines which button is clicked. Also, it is not necessary to assign a value that matches the button label. Often, abbreviated codes are used for values, while a more descriptive label is displayed.
What is your favorite color?<br/>
<input type="radio" name="Color" value="R"/>Red<br/>
<input type="radio" name="Color" value="G"/>Green<br/>
<input type="radio" name="Color" value="B"/>Blue<br/>
Code for a set of buttons to make a "coded" color choice A selection of one of the above buttons submits the name and value Color=R, Color=G, or Color=B to the processing program, which then determines what action to take on the value code submitted.
The checked Attribute
When a set of radio buttons is first displayed, all of the buttons appear unchecked; that is, none are selected and highlighted. You can, however, force one of the buttons in the group to appear pre-checked, or pre-selected. You do this by coding the checked="checked" attribute in the <input type="radio"/> tag of the button you want to appear "on" when the page is loaded.
Red
Green
Blue
A set of buttons with the first choice pre-selected.
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML Form Controls [Radio] </title>
<meta name="generator" content="jNote-iT" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>
What is your favorite color?<br/>
<input type="radio" name="Color" value="R" checked="checked"/>Red<br/>
<input type="radio" name="Color" value="G"/>Green<br/>
<input type="radio" name="Color" value="B"/>Blue<br/>
</body>
</html>
Code to pre-select a button
Output: Try it yourselt.
Working with XHTML Form elements
Checkboxes
A checkbox, like a radio button, provides the user with choices. In the case of a series of checkboxes, however, the choices are not mutually exclusive; rather, the user can select one or more of the choices. For those boxes that are checked, a checkmark appears in the box. Unchosen boxes remain empty. A set of checkboxes is illustrated below.
What are your favorite colors?
Red
Green
Blue
Yellow
Maroon
Purple
Aqua
Teal
A set of checkboxes.
The <input type="checkbox"/> Tag
The general format for coding a checkbox is similar to that for a radio button. An <input type="checkbox"/> tag is required for each checkbox.
The <input type="checkbox"/> tag only displays a checkbox. In order to provide a label for the checkbox, text can appear either before or after the tag to place it to the left or right of the checkbox.
The id Attribute
An id can be assigned to a checkbox if there is a need to identify it for script processing, normally by a browser script. Otherwise, an id is not needed.
The name Attribute
Checkboxes may need to be named with name attributes so that chosen values can be associated with the names for server script processing. As is the case with radio buttons, all checkboxes in a group can have the same name. Unlike radio buttons, however, a common name does not force the choices to be mutually exclusive. The name simply takes on more than one value if more than one choice is made. This presents some processing peculiarities, but it is valid to do this. A better solution is to assign different names to the checkboxes. Each name then becomes associated with a different value irrespective of the number of checks made by the user. If a set of checkboxes is involved only in browser processing, then id values, rather than names, can be coded for the checkboxes.
The value Attribute
Similar to a radio button, the value associated with a checkbox is given in the checkbox's value attribute. When a form is submitted for server processing, this value is associated with the name of the particular checkbox. For browser processing, the value is associated with the checkbox's id. Values do not have to match the labels. Normally, abbreviated codes are used for values, and more descriptive text is used for labels.
The checked Attribute
Checkboxes can be pre-checked by coding checked="checked" for as many different checkboxes as you want pre-checked. The various settings for checkboxes are shown below for the set appearing above in Figure. In this example, all checkboxes are assigned different names to differentiate them for server processing. No checkboxes are pre-checked. No id values are assigned since these checkboxes are processed by a server script rather than a browser script.
A drop-down list, or selection list, presents a list of items from which one or more are chosen. By clicking the down-arrow at the right of the list, the full list is exposed. An item is chosen by clicking an entry.
Choose your favorite color:
A drop-down list.
The <select> and <option> Tags
The menu of choices is created with the <select> tag. Inside this tag are <option> tags, one for each item in the list. The general formats for the <select> and <option> tags are shown below.
An id can be assigned to a drop-down list if there is a need to identify it for browser script processing. Otherwise, an id is not needed.
The name Attribute
The drop-down list can be assigned a name with the name attribute coded in the <select> tag. The list name becomes associated with the value of the item selected for certain types of server processing.
The <option> Tag
Items are defined for appearance in a drop-down list with the <option> tag. There are as many tags as there are items in the list. The label for the option is entered between the opening and closing tags. This is the text string that is visible in the list and becomes the default value for the selection.
The value Attribute
By default, the value associated with a drop-down option is given by the text label included in the <option> tag. However, a value attribute can be coded to supply a different value from the label. You might choose to do this when the labels are extended text strings but you need only to collect abbreviated codes for the values.
The code below shows the basic tags and attributes needed to create a drop-down list. It produces the list shown above in Figure.
The size attribute of the <select> tag indicates the number of items that are visible in the list. By default, the list displays only one item. If a size is specified, the list displays that number of items and, if necessary, a scroll bar to access them. The list shown below uses the attribute size="4" to display four items at a time.
Choose your favorite color:
A drop-down list with four items visible.
The multiple Attribute
Normally, only a single item can be chosen from the list. However, one or more items can be chosen by coding the multiple="multiple" attribute of the <select> tag. Multiple items are chosen by using the Shift-Click or Ctrl-Click method of selection. The <select> tag for the following list has size="4" and multiple="multiple" attributes to permit multiple choices. If multiple items are chosen, the name or id of this control is associated with that collection of values, and any scripts that process the control need to determine the multiple values selected.
Choose your favorite color:
A drop-down list permitting multiple selections
The selected Attribute
Items in the list can be pre-selected by coding the selected="selected" attribute in the associated <option> tag. Multiple pre-selections can be made only when multiple="multiple" is coded for the <select> tag. The drop-down list in Figure has three items (Red, Blue, Aqua) pre-selected.
Capturing Drop-down Choices
The following example demonstrates use of a drop-down list for data entry. Select an item from the list and click the "Submit" button. The value of the chosen option is displayed. Note that if no choice is made the first item in the list is selected by default.
Choose your favorite color:
You selected: Blue.
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> XHTML Form Controls[DropDownList]</title>
<meta name="generator" content="jNote-iT" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>
<div>
Choose your favorite color:
<form id="colors">
<select id="Color">
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
<option value="Yellow">Yellow</option>
<option value="Maroon">Maroon</option>
<option value="Purple">Purple</option>
<option value="Aqua">Aqua</option>
<option value="Teal">Teal</option>
</select>
<input type="button" value="Submit" onclick="Get_Color()"/><br/>
<span id="Output" style="color:blue"></span>
</form>
</div>
</body>
</html>
<![CDATA[Javascript Code to perform Dynamic action]]>
<script type="text/javascript">
function Get_Color()
{
var DropDown = document.getElementById("Color")
var Value = colors.Color.options[colors.Color.selectedIndex].value
var Output = document.getElementById("Output")
Output.innerHTML = "<b>You selected: </b>" + Value + "."
}
</script>
The drop-down list is assigned an id value since it is involved in browser, rather than server, processing. When the "Submit" button is clicked it activates a JavaScript function named Get_Color(). The script determines the index of the selected item (numbered beginning with 0) and displays its value.
All forms that are submitted for server processing must include at least one "submit" button to transmit form information to the Web page identified in the action attribute of the <form> tag. Either a standard button or a graphic image can be used for form submission.
The <input type="submit" /> Button
A form submission button can be created with an <input type="submit"/> tag and can appear anywhere on the form. The default appearance of the button with its "Submit Query" label is shown below.
Default appearance of a form submission button.
The general format for the <input type="submit" /> tag to define a form submission button is given below :
An id can be assigned to a submit button if there is a need to identify it for browser script processing. Otherwise, an id is not needed.
The name Attribute
The submit button can be assigned a name with the name attribute. A name is required for certain types of server processing.
The value Attribute
The value attribute provides two kinds of identification for the button. On the one hand, this value is associated with the button name and indicates to a server script which button was clicked; on the other, this value is used as the label for the button. If a value attribute is not coded, the button is labeled "Submit Query"; however, you can assign any text string to provide helpful identification of the button as a submit button.
Typical coding and display for a submit button is shown below.
Figure. Typical code and display for <input type="submit"/> button.
The <input type="image" /> Tag
An alternative to the standard submit button is to use a graphic image to trigger form submission. For example, the following "Go" button functions identically to a standard submit button.
<input type="image" name="SubmitButton" src="GoButton.gif" alt="Click to Submit"/>
A graphic submit button.
An image button is created with an <input type="image"/> tag whose general format is given below :
The tag uses type="image" to identify this as a graphic form submission control. The particular image that is used is given by the URL in the src attribute. Other attributes of an <img/> tag can be coded, including alt for an alternative text description of the image. As with standard submit buttons, you may need to assign a name or id to identify the button to server or browser scripts.
The <input type="reset"/> Tag
One other button type is available for forms. A "reset" button can be created to permit users to clear all information from a form, either to permit entry of new information or to clear incorrect information. Its default appearance is shown below.
Default appearance of a form reset button.
This button is created by coding an <input type="reset"/> tag. You can name or id the button and can replace the default "Reset" label by coding its value attribute. The action of the button is to automatically reset the form, clearing all text input areas and resetting radio buttons, checkboxes, and drop-down lists back to their default appearances.
The following example shows use of a reset button. Enter text into the textbox; then click the reset button. Information in the textbox is cleared.
Enter text:
Using a form reset button.
Styling Buttons
Submit and reset buttons can take advantage of style sheet settings to change their appearance. Example styling is shown by the following two buttons.
You can visually group together a set of controls on your form by placing a group box around them. A group box displays a labeled border around the set of controls.
The <fieldset> and <legend> Tags
A box is placed around a form control with the <fieldset> tag. The box is labeled with text coded in an enclosed <legend> tag. A fieldset is an in-line XHTML element; therefore, it must be enclosed inside a block-level tag. The general formats for the two tags are shown below.
<fieldset> <legend>text</legend> ...form control </fieldset>
General formats for <fieldset> and <legend> tags.
A example group of fieldsets is shown below:
Example fieldsets.
Code for these fieldsets is shown below. Since a fieldset expands to fill the width of its container, it is usually necessary to assign it a fixed width to control its placement and appearance. Note that the example fieldsets are assigned a width of 180 pixels to keep them from each stretching across the width of their enclosing division, permitting them to display side by side; also, they are vertically aligned at the top of their container division. A style sheet is applied to both the <fieldset> and <legend> tags to effect their styling.
Users often move through the fields on a form with the tab key. The order in which the fields are accessed is given, by default, by their physical order of coding on the XHTML form. Normally, this is the sequence in which you want users to fill in your forms -- from top to bottom, left to right.
You can, however, alter this tab order. In the following form the text fields have been indexed in reverse order. That is, you tab through the fields from bottom to top. Click in the first field, then use the tab key to proceed through the other fields to view this tab order. Figure. Reversed tab order of form controls.
Each field on a form can be assign a tab order using tabindex="n" to assign a sequence number. By default, these sequence numbers run 1, 2, 3,...etc. from the first to last fields. However, you can assign index numbers in any order. A value of 0 causes the field to retain its physical tab order; a negative value removes the field from the tab order completely.
The following listing shows the code for the above text fields that you tabbed through in reverse order.
0 comments: