Applying 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] Applying Cascading Style Sheet Properties to Forms file:///G|/1/0672328860/ch10lev1sec6.html (7 von 7) [19.12.2006 13:49:19] Planning 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] Summary Summary 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 Tag Use <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] Summary <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] Workshop Workshop 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] Workshop Quiz 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] Lesson 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] Understanding 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] The 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] . 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. 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 Tag Use <form> Creates an HTML. 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"