Tự học HTML và CSS trong 1 giờ - part 38 ppsx

ptg These styles set up the basic form layout that I’m using in both exercises. Next, I tweak the appearance of my input fields: input[type=”text”], select, textarea { width: 300px; font: 18px Verdana; border: solid 2px #666; background-color: #ada; } The rule above applies to three different selectors: select, textarea, and input[type=”text”]. The third selector is a bit different than the ones you’ve seen thus far. It is what’s known as an attribute selector, and matches only input tags with the value of text for the type attribute. This sort of selector can be used for any attribute. In this case, I’m using it to avoid applying this rule to Submit buttons, radio buttons, and check boxes. One catch is that the attribute has to exist, so I had to add type=”text” to my <input> tag. The selector won’t match if you leave out the attribute and go with the default value. Next, I add more styles that are related to the required fields. In the previous exercise, I applied the required class to the labels but I’ve moved it out to the <div>s this time around, so that I can apply it to my labels and to my form fields. The labels are still bolded, but now I use the nested rule shown next. Also note that I apply the style only to label.required rather than to label. That’s so that the other labels (used for radio buttons and check boxes) aren’t bolded. div.required label.field { font-weight: bold; } div.required input, div.required select { background-color: #6a6; border: solid 2px #000; font-weight: bold; } Finally, I have made some enhancements that make it clearer which fields are required. In the original form the labels for required fields were displayed in boldface. In this example, that remains the case. However, I moved the required class to the enclosing div so that I can also use it in selectors that match the form fields themselves. I also styled required input fields and select fields with a dark green background color, bold type, and a different color border than optional fields have. After the style sheet is set up, all we have to do is make sure that the class attributes of our tags are correct. The full source code for the page, including the form updated with classes, follows: 346 LESSON 10: Designing Forms , , Download from www.wowebook.com ptg Input ▼ <!DOCTYPE html> <html> <head> <title>Registration Form</title> <style type=”text/css” media=”screen”> form div { margin-bottom: 1em; } div.submit input { margin-left: 165px; } label.field { display: block; float: left; margin-right: 15px; width: 150px; text-align: right; } input[type=”text”], select, textarea { width: 300px; font: 18px Verdana; border: solid 2px #666; background-color: #ada; } div.required label.field { font-weight: bold; } div.required input, div.required select { background-color: #6a6; border: solid 2px #000; font-weight: bold; } </style> </head> <body> <h1>Registration Form</h1> <p>Please fill out the form below to register for our site. Fields with bold labels are required.</p> <form action=”/register” method=”post” enctype=”multipart/form-data”> <div class=”required”> Applying Cascading Style Sheet Properties to Form Elements 347 11 , , Download from www.wowebook.com ptg <label class=”field” for=”name”>Name</label> <input name=”name” type=”text” /> </div> <div class=”required”> <label class=”field”>Gender</label> <label><input type=”radio” name=”gender” value=”male” /> male</label> <label><input type=”radio” name=”gender” value=”female” /> female</label> </div> <div class=”required”> <label class=”field”>Operating System</label> <select name=”os”> <option value=”windows”>Windows</option> <option value=”macos”>Mac OS</option> <option value=”linux”>Linux</option> <option value=”other”>Other </option> </select> </div> <div> <label class=”field”>Toys</label> <label><input type=”checkbox” name=”toy” value=”digicam” /> Digital Camera</label> <label><input type=”checkbox” name=”toy” value=”mp3” /> MP3 Player</label> <label><input type=”checkbox” name=”toy” value=”wlan” /> Wireless LAN</label> </div> <div> <label class=”field”>Portrait</label> <input type=”file” name=”portrait” /> </div> <div> <label class=”field”>Mini Biography</label> <textarea name=”bio” rows=”6” cols=”40”></textarea> </div> <div class=”submit”> <input type=”submit” value=”register” /> </div> </form> </body> </html> 348 LESSON 10: Designing Forms , , Download from www.wowebook.com ptg Figure 11.21 shows the page containing this form. Planning Your Forms 349 11 Output . FIGURE 11.21 A form with styled input fields. ▲ 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 author—after all, you’ll need all the names to match. You also can create lookup tables that contain expansive descrip- tions and allowable values of each form control. Download from www.wowebook.com ptg 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 discuss JavaScript in more detail in Lesson 14. 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 11.1 summarizes the HTML tags used today. Remember these points and you can’t go wrong: n Use the form element to create your forms. n Always assign an action to a form. n Create form controls with the input element or the other form control elements. n Test your forms extensively. TABLE 11.1 HTML Tags Used in this Lesson Tag Use <form> Creates an HTML form. You can have multiple forms within a docu- ment, 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. 350 LESSON 10: Designing Forms Download from www.wowebook.com ptg TABLE 11.1 Continued Tag Use 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. <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. 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. Afterward, test your retention by taking the quiz, and then expand your knowledge by tackling the exercises. Q&A Q Are there security issues associated with including forms on my website? A Yes and no. The forms themselves are not a security risk, but the scripts that process the form input can expose your site to security problems. Using scripts that you can download and use on your own site can be particularly risky, because malicious people will already know how to exploit any of their bugs. If you are going to use publicly available scripts, make sure they are approved by your hosting provider and that you are using the latest release. Summary 351 11 Download from www.wowebook.com ptg 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. Just 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? 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. For you to process the data submitted via forms, they must be paired with a server- side script through the action attribute. 352 LESSON 10: Designing Forms Download from www.wowebook.com ptg Exercises 1. Ask your hosting provider 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 hosting provider won’t allow you to use its scripts, start looking elsewhere for a place to host your website. 2. Visit some sites that might use forms, such as http://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. Workshop 353 11 Download from www.wowebook.com ptg This page intentionally left blank Download from www.wowebook.com ptg LESSON 12 Integrating Multimedia: Sound, Video, and More Video and sound are a core part of the modern Web. You can watch tele- vision online at sites like Hulu, watch movies on demand through Netflix and Amazon.com, and watch videos uploaded by anyone at sites like Vimeo and YouTube. Sites that sell downloadable music provide audio previews of the music they sell. Pandora and Last.fm enable their users to create their own radio stations starting with the name of a single song. Understanding how to incorporate video, audio, and Flash into your own Web pages is an important part of building modern websites. In this lesson you’ll learn how to: n Embed videos hosted at Vimeo and YouTube in your pages n Convert video files to common Web formats n Use the HTML5 <video> and <audio> tags n Embed Flash movies in Web pages using the <object> tag n Use Flash audio and video players Download from www.wowebook.com . /> </div> </form> </body> < /html& gt; 348 LESSON 10 : Designing Forms , , Download from www.wowebook.com ptg Figure 11 . 21 shows the page containing this form. Planning Your Forms 349 11 Output . FIGURE 11 . 21 A form. media=”screen”> form div { margin-bottom: 1em; } div.submit input { margin-left: 16 5px; } label.field { display: block; float: left; margin-right: 15 px; width: 15 0px; text-align: right; } input[type=”text”],. elements. n Test your forms extensively. TABLE 11 .1 HTML Tags Used in this Lesson Tag Use <form> Creates an HTML form. You can have multiple forms within a docu- ment, but you cannot nest the forms. action