Summary As you can see, the wonderful world of forms is full of different types of form controls for your visitors.. Today's HTML Tags Creates an HTML form.. submit Creates a Submit but
Trang 1Applying Cascading Style Sheet Properties to Forms
<td colspan="2" align="right"><input type="submit" value="register" class="submit" /></td>
</tr>
</table>
</form>
</body>
</html>
The page containing this form appears in Figure 10.20
Output
Figure 10.20 A form that uses Cascading Style Sheets.
file:///G|/1/0672328860/ch10lev1sec6.html (6 von 7) [19.12.2006 13:49:19]
Trang 2Applying Cascading Style Sheet Properties to Forms
file:///G|/1/0672328860/ch10lev1sec6.html (7 von 7) [19.12.2006 13:49:19]
Trang 3Planning Your Forms
Planning Your Forms
Before you start creating complex forms for your web pages, you should do some planning that will save you time and trouble in the long run
First, decide what information you need to collect That might sound obvious, but you need to think
about this before you start worrying about the mechanics of creating the form
Next, review this information and match each item with a type of form control Ask yourself which type
of control is most suited to the type of questions you're asking If you need a yes or no answer, radio buttons or check boxes work great, but the textarea element is overkill Try to make life easier for the users by making the type of control fit the question This way, analyzing the information using a script,
if necessary, will be much easier
You also need to coordinate with the person writing the CGI script to match variables in the script with the names you're assigning to each control There isn't much point in naming every control before
collaborating with the script authorafter all, you'll need all the names to match You also can create
lookup tables that contain expansive descriptions and allowable values of each form control
Finally, you might want to consider validating form input through scripting Using JavaScript, you can embed small programs in your web pages One common use for JavaScript is writing programs that verify a user's input is correct before she submits a form I'll discuss JavaScript in more detail in Lesson
12, "Introducing JavaScript."
file:///G|/1/0672328860/ch10lev1sec7.html [19.12.2006 13:49:20]
Trang 4Summary
As you can see, the wonderful world of forms is full of different types of form controls for your visitors This truly is a way to make your web pages interactive
Be cautious, however Web surfers who are constantly bombarded with forms are likely to get tired of all that typing and move on to another site You need to give them a reason for playing!
Table 10.1 summarizes the HTML tags used today Remember these points and you can't go wrong:
Table 10.1 Today's HTML Tags
<form> Creates an HTML form You can have multiple forms within a document, but you cannot
nest the forms
action An attribute of <form> that indicates the server-side script (with a URL path) that
processes the form data
enctype An attribute of the <form> tag that specifies how form data is encoded before being sent to
the server
method An attribute of <form> that defines how the form data is sent to the server Possible values
are get and post
<input> A <form> element that creates controls for user input
type An attribute of <input> that indicates the type of form control Possible values are shown
in the following list:
text Creates a single-line text entry field
password Creates a single-line text entry field that masks user input
submit Creates a Submit button that sends the form data to a server-side script
reset Creates a Reset button that resets all form controls to their initial values
checkbox Creates a check box
radio Creates a radio button
image Creates a button from an image
button Creates a pushbutton The three types are Submit, Reset, and Push, with no default
hidden Creates a hidden form control that cannot be seen by the user
file Creates a file upload control that enables users to select a file with the form data to
upload to the server
file:///G|/1/0672328860/ch10lev1sec8.html (1 von 2) [19.12.2006 13:49:20]
Trang 5<button> Creates a button that can have HTML content
<textarea> A text-entry field with multiple lines
<select> A menu or scrolling list of items Individual items are indicated by the <option> tag
<option> Individual items within a <select> element
<label> Creates a label associated with a form control
<fieldset> Organizes form controls into groups
<legend> Displays a caption for a <fieldset> element
● Use the form element to create your forms
● Always assign an action to a form
● Create form controls with the input element or the other form control elements
● Test your forms extensively
file:///G|/1/0672328860/ch10lev1sec8.html (2 von 2) [19.12.2006 13:49:20]
Trang 6Workshop
If you've made it this far, I'm sure that you still have a few questions I've included a few that I think are interesting Afterwards, test your retention by taking the quiz, and then expand your knowledge by tackling the exercises
Q&A
Q I want to create a form and test it, but I don't have the script ready Is there any way I can make sure that the form is sending the right information with a working script?
A I run into this situation all the time! Fortunately, getting around it is very easy
Within the opening <form> tag, modify the action attribute and make it a mailto link to your email address, as in the following:
<form action="mailto:youremailaddress@isp.com" method="post>
Now you can complete your test form and submit it without having a script ready
When you submit your form, it will be emailed to you as an attachment Simply open the attachment in a text editor, and presto! Your form data is present
Quiz
1. How many forms can you have on a web page?
2. How do you create form controls such as radio buttons and check boxes?
3. Are passwords sent using a password control secure?
4. Explain the benefit of using hidden form controls
5. What other technology do forms rely on?
file:///G|/1/0672328860/ch10lev1sec9.html (1 von 2) [19.12.2006 13:49:21]
Trang 7Quiz Answers
1. You can have any number of forms on a web page
2. These form controls are created with the input element Radio buttons have the type
attribute set to radio, and check boxes are created using the type checkbox
3. No! Passwords sent using a password control are not secure
4. Hidden form controls are intended more for you than for the person filling out the
form By using unique value attributes, you can distinguish between different forms that may be sent to the same script or sent at different times
5. In order for you to process the data submitted via forms, they must be paired with a server-side script through the action attribute
Exercises
1. Ask your ISP for scripts that you can use to process your forms If you can use them, ask how the data is processed and which names you should use in your form controls
If you need to use forms and your ISP won't allow you to use its scripts, you should start looking elsewhere for a place to host your website
2. Visit some sites that might use forms, such as www.fedex.com Look at which form
controls they use and how they arrange them, and peek at the source to see the HTML code
file:///G|/1/0672328860/ch10lev1sec9.html (2 von 2) [19.12.2006 13:49:21]
Trang 8Lesson 11 Integrating Multimedia: Sound, Video, and More
Lesson 11 Integrating Multimedia: Sound, Video, and More
Learning how to integrate multimedia into your web pages is as simple as creating hyperlinks to sound
or video files Presto! You've added multimedia to your website That's not the whole story, of course You also can embed multimedia files in your web pages Unfortunately, embedding them can be a little tricky
Although you need to learn only a few new HTML tags, the multimedia-related HTML elements suffer from what seems like schizophrenia They're implemented differently in Microsoft Internet Explorer and Firefox, and not supported at all in some cases One of the elements has never been added to any HTML standard In addition, there are a number of competing audio and video formats available today It's almost impossible to learn the ins and outs of each one before more appear with the promise of being the "be all and end all" of multimedia
Even with recent advances in communications speed (more and more people have broadband
connections every day), improved sound and video compression/decompression technologies (MP3 audio files come to mind), and powerful audio and video adapter cards, the Web isn't the sound and video showcase that multimedia proponents dream ofnot yet anyway
Part of the problem is the incongruity between what we know today's computers are capable of and what we think the Web should deliver Pop a CD or DVD into your drive and blammo! 3D graphics,
stereo surround sound, and full-screen, 30-frames-persecond digital video jump out and assault your auditory and visual senses Contrast that with most multimedia on the Web, and you will be sorely
disappointed Low-quality sound, small video sizes, and long download times are par for the course
In this Lesson
Things have gotten a lot better Macromedia Flash animations are so common that they're being used to create entire sites, and are also commonly used to deliver advertising MP3 audio files have become so
common and widespread that everybody seems to know what ripping a CD means The downside is that
it seems like you're always being asked to download some kind of browser plug-in, and applications on your computer are constantly fighting over which gets to display what kind of multimedia file Having said all this, I'll try to strike a balance in this lesson between showing you the techniques you can use immediately and the technologies that require you to devote a significant amount of time and energy to apply what you've learned You'll learn to accomplish the following:
● Create links to audio and video files so that visitors can download or play them
● Use the object and embed elements to include sound and video files in web pages
● Learn how to embed QuickTime, Flash, and RealAudio or RealVideo files into your web pages
● Use some of the unique multimedia capabilities of Microsoft Internet Explorer
● Recognize the most popular multimedia file types and the plug-ins or helper applications they require
file:///G|/1/0672328860/ch11.html [19.12.2006 13:49:21]
Trang 9Understanding How to Present Sound and Video
Understanding How to Present Sound and Video
When you want to add multimedia to your site, there are two decisions you have to make You have to decide which format to use for the data, and how you plan to integrate the multimedia features with the rest of your content Before discussing the multitude of formats available, I'll talk about how to present multimedia files The two options there are linking and embedding When you link to a multimedia file, it's up to the browser (and user preference) to determine how best to handle it If the browser can
handle the data itself or the user has installed a plug-in compatible with the file type, sometimes the media will play within the browser window If the browser has no idea how to handle the file, it will
generally offer to let you download the file In other cases, the browser will launch an external
application like Windows Media Player or RealPlayer to handle the file The other option is to embed the media within a page In that case, you include tags in your page that indicate how the media should be presented within that page The upside of this approach is that it enables you to seamlessly integrate multimedia into a website The downside is that if your user doesn't have the right software, the
experience won't turn out to be seamless They'll see a broken file, be prompted to download additional software, or otherwise be distracted from what they were trying to accomplish The key when
embedding multimedia files is to make sure that this happens to as few users as possible
file:///G|/1/0672328860/ch11lev1sec1.html [19.12.2006 13:49:21]
Trang 10The Old Standby: Linking
The Old Standby: Linking
The sure-fire way to include multimedia files on your website is to provide a hyperlink to them
Hyperlinks are supported by all versions of all browsers The browser will handle the file appropriately if the right supporting applications are installed, or users will be able to decide for themselves what they want to do with the file A common technique is to link to the multimedia file and provide a thumbnail preview of the multimedia clip, a description, and the file size This is considered common courtesy so that people can estimate the download time You also should provide links to any players required so that people can download the appropriate player, should they need it
For example, if I have a QuickTime video that I want to share, I might use the following code:
Input
<div align="center">
<h1>Apollo 17 Videos</h1>
<p><a href="Apollo_17_Flag.qt">Astronauts placing the flag on the
Moon</a><br />
[2.75Mb]</p>
<p><img src="Apollo_17_Flag.gif" width="160" height="120"
alt="Apollo 17 flag" /></p>
<p>Apple <a href="http://www.apple.com/quicktime">QuickTime</a> is
required to view this movie
<a href="http://www.apple.com/quicktime"><img src="getquicktime4.gif"
border="0" width="88" alt="Get QuickTime 4" /></a></p>
</div>
Figure 11.1 shows the resulting web page
Output
Figure 11.1 Linking to files is easy and effective.
[View full size image]
file:///G|/1/0672328860/ch11lev1sec2.html (1 von 11) [19.12.2006 13:49:22]