Tự học HTML và CSS trong 1 giờ - part 36 potx

ptg You can group check boxes together and assign them the same control name. This allows multiple values associated with the same name to be chosen: <p>Check all symptoms that you are experiencing:</p> <label><input type=“checkbox” name=“symptoms” value=“nausea” /> Nausea</label> <label><input type=“checkbox” name=“symptoms” value=“lightheadedness” /> Light-headedness</label> <label><input type=“checkbox” name=“symptoms” value=“fever” /> Fever</label> <label><input type=“checkbox” name=“symptoms” value=“headache” /> Headache</label> When this form is submitted to a script for processing, each check box that’s checked returns a value associated with the name of the check box. If a check box isn’t checked, neither the field name nor value will be returned to the server—it’s as if the field didn’t exist at all. You may have noticed that when I applied labels to these check box elements, I put the input tags inside the label tags. There’s a specific reason for doing so. When you asso- ciate a label with a check box (or with a radio button, as you’ll see in the next section), the browser enables you to check the box by clicking the label as well as by clicking the button. That can make things a bit easier on your user. In the examples thus far, I have tied labels to fields by putting the field name in the for attribute of the label, but that doesn’t work for check boxes because multiple form fields have the same name, and the browser would not figure out which check box the label applies to. Instead I put the input tag inside the label tag. I could achieve the same result by assigning a unique id to each check box and associating them with the labels that way, but nesting the tags is easier. Creating Radio Buttons Radio buttons, which generally appear in groups, are designed so that when one button in the group is selected, the other buttons in the group are automatically unselected. They enable you to provide users with a list of options from which only one option can be selected. To create a radio button, set the type attribute of an <input> tag to radio. To create a radio button group, set the name attributes of all the fields in the group to the same value, as shown in Figure 11.8. To create a radio button group with three options, the following code is used: Input ▼ <p>Select a color:</p> <label style=”display: block”><input type=“radio” name=“color” value=“red” /> Red</label> <label style=”display: block”><input type=“radio” name=“color” value=“blue” /> Blue</label> 326 LESSON 10: Designing Forms Download from www.wowebook.com ptg <label style=”display: block”><input type=“radio” name=“color” value=“green” /> Green</label> Creating Form Controls with the <input> Tag 327 11 Output . FIGURE 11.8 A group of radio buttons. I’ve used the same <label> technique here that I did in the check box example. Placing the radio buttons inside the labels makes the labels clickable as well as the radio buttons themselves. I’ve changed the display property for the labels to block so that each radio button appears on a different line. Ordinarily I’d apply that style using a style sheet; I used the style attributes to include the styles within the example. As with check boxes, if you want a radio button to be selected by default when the form is displayed, use the checked attribute. One point of confusion is that even though browsers prevent users from having more than one member of a radio button group selected at once, they don’t prevent you from setting more than one member of a group as checked by default. You should avoid doing so yourself. Using Images as Submit Buttons Using image as the type of input control enables you to use an image as a Submit button: Input ▼ <input type=“image” src=“submit.gif” name=“submitformbtn” /> Figure 11.9 shows a custom button created with an image. Output . FIGURE 11.9 The image input type. Download from www.wowebook.com ptg When the user clicks an image field, the x and y coordinates of the point where the user clicked are submitted to the server. The data is submitted as name.x = x coord and name.y = y coord, where name is the name assigned to the control. Using the preceding code, the result might look like the following: submitoformbtn.x=150&submitformbtn.y=200 You can omit the name if you choose. If you do so, the coordinates returned would just be x = and y =. Form controls with the type image support all the attributes of the <img> tag. You can also use the same CSS properties you would use with <img> tags to modify the appearance and spacing of the button. To refresh your memory on the attributes sup- ported by the <img> tag, go back to Lesson 9, “Adding Images, Color, and Backgrounds.” Creating Generic Buttons In addition to creating Submit, Reset, and Image buttons, you also can create buttons that generate events within the browser that can be tied to client-side scripts. To create such a button, set the type attribute to button. Figure 11.10 shows a button that calls a function when it is pressed. Use the following code to create a button: Input ▼ <input type=“button” name=“verify” value=“verify” onclick=“verifydata()” /> 328 LESSON 10: Designing Forms Output . FIGURE 11.10 A button element on a web page. This example creates a button that runs a function called verifydata when it’s clicked. You provide the label that appears on the button with the value attribute of Verify Data. Unlike Submit buttons, regular buttons don’t submit the form when they’re clicked. I explain the onclick attribute when you get to Lesson 14, “Introducing JavaScript.” Download from www.wowebook.com ptg Hidden Form Fields Hidden form fields are used when you want to embed data in a page that shouldn’t be seen or modified by the user. The name and value pair associated with a hidden form field will be submitted along with the rest of the contents of the form when the form is submitted. To create such a field, set the field’s type to hidden and be sure to include both the name and value attributes in your <input> tag. Here’s an example: <input type=“hidden” name=“id” value=“1402” /> Hidden form fields are generally used when data identifying the user needs to be included in a form. For example, suppose you’ve created a form that allows a user to edit the name and address associated with her bank account. Because the user can change her name and address, the data she submits can’t be used to look up her account after she submits the form, plus there might be multiple accounts associated with one name and address. You can include the account number as a hidden field on the form so that the program on the server knows which account to update when the form is submitted. Creating Form Controls with the <input> Tag 329 11 It’s important to understand that when it comes to hidden form fields, hidden means “won’t clutter up the page” rather than “won’t be discoverable by the user.” Anyone can use the View Source feature in the browser to look at the values in hidden form fields, and if you use the GET method, those values will appear in the URL when the form is submitted, too. Don’t think of hidden fields as a security feature but rather as a convenient way to embed extra data in the form that you know the script that processes the form input will need to use. The File Upload Control The file control enables a user to upload a file when he submits the form. As you can see in the following code, the type for the input element is set to file: Input ▼ <label>Please select a file for upload <input type=“file” name=“fileupload” /></label> Figure 11.11 shows a file upload control. CAUTION Download from www.wowebook.com ptg If you want to use a file upload field on your form, you have to do a lot of behind-the- scenes work to get everything working. For one thing, the program specified in the action attribute of your form must accept the file being uploaded. Second, you have to use the post method for the form. Third, you must set the enctype attribute of the <form> tag to multipart/form-data. Ordinarily, the default behavior is fine, but you must change the enctype in this particular case. Let’s look at a simple form that supports file uploads: <form action=“/upload” enctype=“multipart/form-data” method=“post”> <input type=“file” name=“new_file” /> <input type=“submit” /> </form> After you’ve created a form for uploading a file, you need a program that can process the file submission. Creating such a program is beyond the scope of this book, but all popu- lar web programming environments support file uploads. Using Other Form Controls In addition to form controls you can create using the input element, there are three that are elements in and of themselves. Using the button Element A button you create using the button element is similar to the buttons you create with the input element, except that content included between the opening and closing button tags appears on the button. You can create three different types of buttons: Submit, Reset, and Custom. The <button> tag is used to create buttons. As with other form fields, you can use the name attribute to specify the name of the parameter sent to the server, and the value attribute 330 LESSON 10: Designing Forms Output . FIGURE 11.11 The file upload control. Download from www.wowebook.com ptg to indicate which value is sent to the server when the button is clicked. Unlike buttons created with the <input> tag, the button’s label is specified by the content within the <button> tag, as shown in this code: Input ▼ <button type=“submit”><b><i>Submit button</i></b></button> <button type=“custom”><img src=“recycle.gif”></button> The button element is shown in a browser in Figure 11.12. Using Other Form Controls 331 11 Output . FIGURE 11.12 The button element provides a more flexible way to create form buttons. With the <button> tag, white space counts. If you include whitespace between the open- ing or closing <button> tags and the content inside the tag, it might make your button look a bit odd. The best bet is to just leave out that whitespace. Creating Large Text-Entry Fields with textarea The textarea element creates a large text entry field where people can enter as much information as they like. To create a textarea, use the <textarea> tag. To set the size of the field, use the rows and cols attributes. These attributes specify the height and width of the text area in characters. A text area with cols set to 5 and rows set to 40 creates a field that’s 5 lines of text high and 40 characters wide. If you leave out the rows and cols attributes, the browser default will be used. This can vary, so you should make sure to include those attributes to maintain the form’s appearance across browsers. The clos- ing textarea tag is required and any text you place inside the textarea tag is displayed inside the field as the default value: Input ▼ <label for=”question4” style=”display: block”>Please comment on our customer service.</label> <textarea name=“question4” rows=“10” cols=“60”>Enter your answer here </textarea> Download from www.wowebook.com ptg Figure 11.13 shows a textarea element in action. 332 LESSON 10: Designing Forms Output . FIGURE 11.13 Use textarea to create large text- entry areas. You can also change the size of a textarea with the height and width CSS properties. You can alter the font in the text area using the CSS font properties, too. Creating Menus with select and option The select element creates a menu that can be configured to enable users to select one or more options from a pull-down menu or a scrollable menu that shows several options at once. The <select> tag defines how the menu will be displayed and the name of the parameter associated with the field. The <option> tag is used to add selections to the menu. The default appearance of select lists is to display a pull-down list that enables the user to select one of the options. Here’s an example of how one is created: Input ▼ <label for=”location”>Please pick a travel destination</label> <select name=“location”> <option>Indiana</option> <option>Fuji</option> <option>Timbuktu</option> <option>Alaska</option> </select> As you can see in the code, the field name is assigned using the name attribute of the <select> tag. The field created using that code appears in Figure 11.14. TIP Download from www.wowebook.com ptg To create a scrollable list of items, just include the size attribute in the opening select tag, like this: Input ▼ <select name=“location” size=“3”> Figure 11.15 shows the same select element as Figure 11.14, except that the size attribute is set to 3. Setting the size to 3 indicates that the browser should display three options simultaneously. Using Other Form Controls 333 11 Output . FIGURE 11.14 You can use select form controls to create pull-down menus. Output . FIGURE 11.15 You also can create scrollable lists using the select element. To see the fourth item, the user would have to use the scrollbar built in to the select list. By default, the value inside the <option> tag specifies both what is displayed in the form and what’s sent back to the server. To send a value other than the display value to the server, use the value attribute. The following code, for example, causes bw499 to be sub- mitted to the server as the value associated with the Courses field instead of Basket Weaving 499: <select name=“courses”> <option value=“p101”>Programming 101</option> <option value=“e312”>Ecomomics 312</option> <option value=“pe221”>Physical Education 221</option> <option value=“bw499”>Basket Weaving 499</option> </select> Download from www.wowebook.com ptg ▼ To select an option by default, include the selected attribute in an option element, as follows: <select name=“courses”> <option value=“p101”>Programming 101</option> <option value=“e312”>Ecomomics 312</option> <option value=“pe221” selected=“selected”>Physical Education 221</option> <option value=“bw499”>Basket Weaving 499</option> </select> Thus far, you’ve created menus from which a user can select only one choice. To enable users to select more than one option, use the multiple attribute: <select name=“courses” multiple=“multiple”> 334 LESSON 10: Designing Forms A user can choose multiple options by Shift-clicking for Windows, or Ctrl-clicking or Command-clicking for Macintosh. There are some usability issues associated with select lists. When you think about it, select lists that enable users to choose one option are basically the equivalent of radio button groups, and select lists that allow multiple selections are the same as check box groups. It’s up to you to decide which tag to use in a given circumstance. If you need to present the user with a lot of options, select lists are generally the proper choice. A select list with a list of states is a lot more concise and usable than a group of 50 radio buttons. By the same token, if there are four options, radio buttons probably make more sense. The same rules basically hold with check box groups versus multiple select lists. The other usability issue with select lists is specific to multiple select lists. The bottom line is that they’re hard to use. Most users don’t know how to select more than one item, and if the list is long enough, as they move through the list they’ll have problems keeping track of the items they already selected when they scroll through to select new ones. Sometimes there’s no way around using a multiple select list, but you should be careful about it. Task: Exercise 11.2: Using Several Types of Form Controls Form controls often come in bunches. Although there are plenty of forms out there that consist of a text input field and a Submit button (like search forms), a lot of the time forms consist of many fields. For example, many websites require that you register to see restricted content, download demo programs, or participate in an online community. In this example, we’ll look at a perhaps slightly atypical registration form for a website. NOTE , Download from www.wowebook.com ptg The purpose of this exercise is to show you how to create forms that incorporate a num- ber of different types of form controls. In this case, the form will include a text field, a radio button group, a select list, a check box group, a file upload field, and a text area. The form, rendered in a browser, appears in Figure 11.16. Using Other Form Controls 335 11 FIGURE 11.16 A registration form for a website. Let’s look at the components used to build the form. The styles for the form are included in the page header. Here’s the style sheet: <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; } label.required { font-weight: bold; } </style> , , Download from www.wowebook.com . src=“recycle.gif”></button> The button element is shown in a browser in Figure 11 .12 . Using Other Form Controls 3 31 11 Output . FIGURE 11 .12 The button element provides a more flexible way to create form buttons. With. simultaneously. Using Other Form Controls 333 11 Output . FIGURE 11 .14 You can use select form controls to create pull-down menus. Output . FIGURE 11 .15 You also can create scrollable lists using. type=”text /css 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: