Thông tin tài liệu
557386 Ch10.qxd 4/2/04 9:57 AM Page 224 Ł 224 Creating Cool Web Sites with HTML, XHTML, and CSS Figure 10-3: By including the label tag, clicking the text next to the check box causes the box to be checked. The second way to use the label tag as a wrapper is shown in the following code: <form method=”post” action=”someurl”> <label> <input type=”radio” name=”gender” value=”male”> male </label> <label> <input type=”radio” name=”gender” value=”female”> female </label> </form> Ł As of this writing, wrapper-style labels don’t work properly in any of the Web note browsers I tested. Dividing Forms into Fieldsets The combination of the fieldset and legend elements enables you to create a document that is not only more attractive and more logically presented but also more accessible for people with disabilities. The tags’ intent is to allow grouping of thematically related controls within a form. First, here’s a fancy but straightforward form that is actually organized into multiple logical areas without any fieldsets: Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 557386 Ch10.qxd 4/2/04 9:57 AM Page 225 225 Ł Chapter 10: Advanced Form Design <html> <head> <title>Advanced Forms</title> <style type=’text/css’> .title { background: #9cc; font-size:150%; font-weight: bold; } .head { background: #9cc; font-size: 125% } .submit { font-size: 75%; background: #9cc; } </style> </head><body> <form method=”get” action=”someURL”> <table cellpadding=”2” width=”100%”> <tr> <td class=”title” align=”center” colspan=”2”> Software Defect Report </td> </tr><tr> <td class=”head” align=”center” colspan=”2”> User Profile Information </td> </tr><tr> <td>Name:</td> <td> <input type=”text” name=”name” size=”50” /> </td> </tr><tr> <td>Company:</td> <td> <input type=”text” name=”company” size=”50” /> </td> </tr><tr> <td class=”head” align=”center” colspan=”2”> What seems to be the problem? </td> </tr><tr> <td colspan=”2” align=”center”> <textarea name=”problem” rows=”4” cols=”60”></textarea> </td> </tr> </table> <center> <input type=”submit” value=” submit report “ class=”submit” /> </center> </form> </body> </html> As shown in Figure 10-4, the layout is attractive, but quite complex. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 557386 Ch10.qxd 4/2/04 9:57 AM Page 226 Ł 226 Creating Cool Web Sites with HTML, XHTML, and CSS Figure 10-4: An attractive forms layout that doesn’t use fieldsets. Ł Did you notice that I used CSS to change the appearance of the Submit button on tip the page? It’s easy to do and can really help fine-tune the page. The fieldset and legend tags become important here. The fieldset tag is a paired tag that enables you to organize your form into logical sections, and legend enables you to assign a caption to a specific fieldset area. The form shown in Figure 10-4 could be rewritten as follows using the fieldset and legend tags: <style type=’text/css’> .title { background: #9cc; font-size:150%; margin-bottom: 10px; font-weight: bold; text-align:center; } .submit { font-size: 75%; background: #9cc; } </style> </head><body> <form method=”get” action=”someURL”> <div class=”title”>Software Defect Report</div> <fieldset> <legend style=”font-size:80%; color:#666”>User Profile</legend> <table cellpadding=”2” width=”100%”> <tr> <td>Name:</td> <td> <input type=”text” name=”name” size=”50” /> </td> </tr><tr> <td>Company:</td> <td> <input type=”text” name=”company” size=”50” /> </td> Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 557386 Ch10.qxd 4/2/04 9:57 AM Page 227 227 Ł Chapter 10: Advanced Form Design </tr> </table> </fieldset> <!— separation between sections —> <br /> <fieldset> <legend style=”font-size:80%; color:#666”>Problem Description</legend> <table cellpadding=”2” width=”100%”> <tr> <td colspan=”2”> Please describe the problem in as much detail as possible: <textarea name=”problem” rows=”4” cols=”60”></textarea> </td> </tr> </table> </fieldset> <!— separation before the submit button —> <br /> <center> <input type=”submit” value=” submit report “ class=”submit” /> </center> </form> The fieldset tags are easy to add—they add a nice touch to the design, as you can see in Figure 10-5—but I did have to break the monolithic table into a set of smaller tables so each could be encircled by the lines associated with the fieldset legend. Figure 10-5: Legends help organize the requested information. The fieldset tag has no options or attributes. The legend tag has four possible values for the align attribute: top , bottom , left , and right . The default location is top , and the others are ignored, as far as I can tell. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 557386 Ch10.qxd 4/2/04 9:57 AM Page 228 Ł 228 Creating Cool Web Sites with HTML, XHTML, and CSS Tab Key Control on Input If you’ve filled out any forms online, you already know that it can be a pain to move the mouse to each input field, click to move the cursor, and then type in the specific value. Fortunately, you can use the Tab key on regular Web input forms to step from the top-left to the bottom- right. That’s where the nifty tabindex attribute comes into play. HTML 4.0 added the capability to define the exact tabbing sequence on your form. If you want to move people down the entries on the left side, then the right side, you can do so by specifying the appropriate ascending tabindex values. Table 10-1 shows which HTML tags can have a tabindex specified. Table 10-1: tabindex-Enabled HTML Tags Tag Name Meaning a Anchor tag area Client-side image map object Object inclusion (see Chapter 11) input Text, radio button, check box input field select Pop-up or multiple selection menu textarea Multiline text input box button Analogous to input type=”button” The tabindex can help you make your Web page much more accessible to people who want to stick with a keyboard rather than fiddle with a mouse or trackball. Here’s an example of a form that uses the tabindex attributes to ensure that users can step through the entries with the Tab key in the order the designer wants: <html> <head><title>A veritable tab lovefest!</title> </head><body style=”text-align:center;”> <a href=”index.html” tabindex=”10”> <img src=”whitehouse.jpg” border=”0” alt=”logo” /></a> <form method=”post” action=””> <table border=”0” cellpadding=”10” width=”90%”> <tr><td> Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 557386 Ch10.qxd 4/2/04 9:57 AM Page 229 229 Ł Chapter 10: Advanced Form Design <fieldset><legend>About You</legend> <table><tr><td> Your Name:</td><td><input type=”text” name=”name” tabindex=”2” /> </td></tr><tr><td> Address:</td><td><input type=”text” name=”addr” tabindex=”4” /> </td></tr><tr><td> Telephone:</td><td><input type=”text” name=”phone” tabindex=”3” /> </td></tr><tr><td> E-Mail:</td><td><input type=”text” name=”email” tabindex=”1” /> </td></tr><tr><td> You are:</td><td><select name=”city” tabindex=”5” /> <option>Republican</option><option>Democrat</option> </select> </td></tr></table> </fieldset> <!—- split between the two columns —> </td><td> <fieldset><legend>Your Views</legend> Your opinion of the President<br /> of the United States of America: <blockquote> <input type=”radio” name=”opinion” value=”great” tabindex=”6” /> He’s doing great!<br /> <input type=”radio” ame=”opinion” value=”super” tabindex=”8” /> He’s doing super!<br /> <input type=”radio” name=”opinion” value=”wonderful” tabindex=”7” /> He’s doing wonderful! </blockquote> </fieldset> </td></tr> </table> <input type=”submit” value=”Send your message to the President” tabindex=”9” /> </form> If you follow the numbering, you see that the first entry in the tab sequence is the e-mail address, jumping to the name, back to the telephone number, then to the address, and so on as you dance around on the page tab by tab. Then the visitor can tab to the select pop-up menu and step through the three possible radio button values. Finally, the submit button itself is in the tabindex sequence, and the anchor wrapping around the graphic, which returns to the site’s home page, is the last (10th) entry in the tabindex . Figure 10-6 shows you what the form looks like, but you should try using the Tab key to step through the tabindex values yourself. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 557386 Ch10.qxd 4/2/04 9:57 AM Page 230 Ł Ł 230 Creating Cool Web Sites with HTML, XHTML, and CSS Figure 10-6: Trying the tabindex-enabled form. note Notice how the fieldset and legend tags help create an attractive layout. The accesskey Attribute You can use an additional attribute to offer even easier navigation of your Web pages via key board: You can assign keyboard shortcuts to let people quickly get to a specific spot on a form or a specific anchor. This is done with the accesskey=”key” sequence, although don’t be fooled—on a PC, you must use Alt + the key specified, and on the Macintosh you use the Command key. Ł On the Mac, you might be more familiar with calling the Command key the Apple tip or Cloverleaf key. It’s usually on both sides of your spacebar. Here’s a succinct example of how the accesskey attribute might be used: <a href=”http://www.yahoo.com/” accesskey=”y”>Yahoo</a> Of course, if you’re going to have a keyboard shortcut, it might be valuable to show the user what key to use. The Windows system has a nice standard for this: The letter in question is underlined. You can do this with the otherwise marginally useful U underline tag, as shown here: <a href=”http://www.yahoo.com/” accesskey=”y”><u>Y</u>ahoo</a> As this becomes widely implemented in Web browsers, it will undoubtedly prove to be a great addition to your page implementation toolkit. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 557386 Ch10.qxd 4/2/04 9:57 AM Page 231 231 Ł Chapter 10: Advanced Form Design Disabled and Read-Only Elements The tabindex and accesskey attributes can be quite valuable in Web site design. By contrast, I am not at all sure why two more attributes, disabled and readonly , have been added. The disabled attribute enables you to display form elements that cannot be changed by the user and are intended to be displayed in a grayed out or in some other fashion that makes the disabled status obvious. The readonly attribute is very similar but shouldn’t be visually different from the other fields, just unchangeable. Here’s how you might use these two in your own form: <form method=”post” action=”#”> <table border=”0” cellpadding=”3”> <tr> <td align=”right”>Name:</td> <td><input type=”text” name=”yourname” /></td> </tr><tr> <td align=”right”>Login:</td> <td><input type=”text” name=”login” /></td> </tr><tr> <td align=”right”>Host:</td> <td><input type=”text” name=”host” value=”hostname.com” readonly=”readonly” /></td> </tr><tr> <td align=”right”>Date:</td> <td><input type=”text” value=”3 August, 2004” disabled=”disabled” /></td> </tr> </table> </form> In this example, I’ve already filled in the value of host for the visitor. (This is probably based on the user’s remote_host CGI environment variable. See Chapter 9 for more details on how you can get this value dynamically.) I’ve also filled in the current date, but it’s a disabled field because I’m not letting the user change the date. Ł To ensure XHTML compliance, the attributes are in the odd form of disabled= note ”disabled” and readonly=”readonly” . Non-XHTML–compliant sites might well use disabled and readonly instead. Take a close look at Figure 10-7, and you can see how Internet Explorer renders these two special form elements. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 557386 Ch10.qxd 4/2/04 9:57 AM Page 232 Ł 232 Creating Cool Web Sites with HTML, XHTML, and CSS Figure 10-7: The disabled and readonly attributes rendered in Internet Explorer. Meaning <input type=”button” Specifies general purpose button type onClick=”s” (JavaScript) <label </label> Indicates label associated with a specific element for=”s” Specifies element associated with label (use id=”s” in element) <fieldset> </fieldset> <legend </legend> Specifies name associated with fieldset align=”s” Specifies alignment of legend in display (top, bottom, left, right) tabindex=”x” Specifies order of elements when user presses accesskey=”c” Specifies key to allow keyboard shortcuts to specific elements disabled=”disabled” Disables element but displays it onscreen readonly=”readonly” Displays element onscreen but element not Table 10-2: HTML Tags Covered in This Chapter HTML Tag Close Tag Specifies action to take when button is clicked Divides form into logical parts Tab key editable Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 557386 Ch10.qxd 4/2/04 9:57 AM Page 233 Ł Chapter 10: Advanced Form Design 233 for scripting—and how to enable users to get the most out of your elements using a number of advanced HTML design elements, includ ing the label and fieldset variables and the tabindex , accesskey , disabled , and readonly attention to JavaScript, a simple scripting language that enables you Ł Summary In this chapter, you explored the button input type—particularly useful forms. You also learned how to fine-tune the interaction between form attributes. In the next chapter, you turn your to include Java-like programming instructions in the HTML text of your Web pages. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... scripting and development languages in common use Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Ł 236 Creating Cool Web Sites with HTML, XHTML, and CSS An Overview of JavaScript In the beginning was HTML, and all was well No one wanted to do anything particularly com plex or sophisticated, and its capability to include text and graphics of different sizes within the... Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Ł 248 Creating Cool Web Sites with HTML, XHTML, and CSS You only have to change one line—the line that is already in the img tag for the smiley tag Simple enough! With this sort of capability, you have many, many different ways to improve and add pizzazz to your Web sites Telling the time JavaScript also enables your Web page to... purchase PDF Split-Merge on www.verypdf.com to remove this watermark Ł 240 Creating Cool Web Sites with HTML, XHTML, and CSS The for loop is a delightfully succinct way to express this sort of sequence, with the initializer as the first part of the for loop, the conditional statement as the second part, and the loop increment as the third, all separated by semicolons Subroutines, built-in and user-defined... value=”search google”> Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Ł 252 Creating Cool Web Sites with HTML, XHTML, and CSS By default, if you submit the search without any query string, Google simply prompts for one Instead, however, you can use JavaScript to refuse to send blank queries To do this, you use an onsubmit event handler in the form tag that checks for the... search pattern, the function returns true, and the pattern is given to Google for a search Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Ł 254 Creating Cool Web Sites with HTML, XHTML, and CSS A Temperature Converter Another neat JavaScript example is a simple form that doesn’t actually have a CGI script (a program that lives on the Web server) behind it; instead, it works... Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Ł 250 Creating Cool Web Sites with HTML, XHTML, and CSS Here is the result: Page last modified Wednesday, December 17, 2003 8:12:44 PM This is amusing because the page always reports that it was last modified at exactly the moment the visitor is viewing the page! A built-in clock One additional neat thing you can do with the time... identical except that one refers to happy and the other refers to sad: function makeHappy() { if (document.images) { imageObject = document.getElementById(“changingface”); imageObject.src = happy.src; } } function makeSad() { Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Continued Ł 246 Creating Cool Web Sites with HTML, XHTML, and CSS Continued if (document.images) { imageObject... refuse to work for certain browsers or, in a more friendly vein, perhaps congratulate users on their choice of Web browsers or operating systems Here’s an example: Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Ł 242 Creating Cool Web Sites with HTML, XHTML, and CSS function showInfo() { document.writeln(“”);... MsgBox “You clicked on the button and up popped me!” Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Continued Ł 256 Creating Cool Web Sites with HTML, XHTML, and CSS Continued ... Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Ł 258 Creating Cool Web Sites with HTML, XHTML, and CSS Ł tip NCompass Labs has a plug-in called Ncompass for Netscape Navigator that enables Navigator to use ActiveX Controls Find out more at http://www ncompasslabs.com ActiveX functions as a wrapper called an ActiveX control The code being included interacts with the wrapper . PDF Split-Merge on www.verypdf.com to remove this watermark. 557386 Ch10.qxd 4/2/04 9:57 AM Page 226 Ł 226 Creating Cool Web Sites with HTML, XHTML, and. PDF Split-Merge on www.verypdf.com to remove this watermark. 557386 Ch10.qxd 4/2/04 9:57 AM Page 232 Ł 232 Creating Cool Web Sites with HTML, XHTML, and
Ngày đăng: 24/12/2013, 10:16
Xem thêm: Tài liệu Creating Cool Web Sites with HTML, XHTML, and CSS- P6 pdf, Tài liệu Creating Cool Web Sites with HTML, XHTML, and CSS- P6 pdf
