Tài liệu Web Programming with HTML, XHTML, and CSS Second Edition- P5 doc

Figure 5-20 Structuring Your Forms with <fieldset> and <legend> Elements Large forms can be confusing for users, so it’s good practice to group together related form controls. The <fieldset> and <legend> elements do exactly this — help you group controls. Both elements were introduced in IE 4 and Netscape 6; however, older browsers will just ignore these elements, so you are safe to include them in all your forms. ❑ The <fieldset> element creates a border around the group of form controls to show that they are related. ❑ The <legend> element allows you to specify a caption for the <fieldset> element, which acts as a title for the group of form controls. When used, the <legend> element should always be the first child of the <fieldset> element. In the following example, you can see how a form has been divided into four sections: contact information, competition question, tiebreaker question, and enter the competition (ch05_eg17.html). <form action=”http://www.example.org/competition.asp” method=”post” name=”frmComp”> <fieldset> <legend><em>Contact Information</em></legend> <label>First name: <input type=”text” name=”txtFName” size=”20” /></label><br /> <label>Last name: <input type=”text” name=”txtLName” size=”20” /></label><br /> <label>E-mail: <input type=”text” name=”txtEmail” size=”20” /></label><br /> </fieldset> <fieldset> <legend><em>Competition Question</em></legend> How tall is the Eiffel Tower in Paris, France? <br /> <label><input type=”radio” name=”radAnswer” value=”584” /> 584ft</label><br /> <label><input type=”radio” name=”radAnswer” value=”784” /> 784ft</label><br /> <label><input type=”radio” name=”radAnswer” value=”984” /> 984ft</label><br /> <label><input type=”radio” name=”radAnswer” value=”1184” /> 1184ft</label><br /> </fieldset> <fieldset> <legend><em>Tiebreaker Question</em></legend> 171 Chapter 5: Forms 59313c05.qxd:WroxPro 3/22/08 4:37 PM Page 171 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. <label>In 25 words or less, say why you would like to win $10,000: <textarea name=”txtTiebreaker” rows=”10” cols=”40”></textarea> </label> </fieldset> <fieldset> <legend><em>Enter competition</em></legend> <input type=”submit” value=”Enter Competition” /> </fieldset> </form> You can see how the <fieldset> elements create borders around the groups of form controls, and how the <legend> elements are used to title the groups of controls. Remember that the <legend> element must be the first child of the <fieldset> element when it is used. See Figure 5-21. Figure 5-21 The <fieldset> element can take the following attributes: ❑ All the universal attributes ❑ The basic event attributes Note that if you use a table to format your form, the <table> element must appear inside the <fieldset> element. If a <fieldset> resides within a table that is used to format the page, then the entire fieldset must reside within the same cell. 172 Chapter 5: Forms 59313c05.qxd:WroxPro 3/22/08 4:37 PM Page 172 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. The <legend> element can take the following attributes: ❑ accesskey, which you will learn about in the next section ❑ align (which is deprecated — you should use CSS positioning instead) ❑ All of the universal attributes ❑ UI event attributes Focus When a web page featuring several links or several form controls loads, you might have noticed that you are able to use your Tab key to move between those elements (or Shift+Tab to move backward through elements). As you move between them, the web browser tends to add some form of border or highlight- ing to that element (be it a link or a form control). This is known as focus. From what you have learned already about XHTML, you know that not every element in the document receives this focus. In fact, it is only the elements that a user can interact with, such as links and form con- trols, that can receive focus. Indeed, if a user is expected to interact with an element, that element must be able to receive focus. An element can gain focus in three ways: ❑ An element can be selected using a pointing device such as a mouse or trackball. ❑ The elements can be navigated between using the keyboard — often using the Tab key (or Shift+Tab to move backward through elements). The elements in some documents can be given a fixed tabbing order, indicating the order in which elements gain focus. ❑ You can use a system such as a keyboard shortcut known as an access key to select a particular ele- ment. For example, on a PC you would likely press the Alt key plus an access key (such as Alt+E), whereas on a Mac you would press the Control key with an access key (such as Control+E). Tabbing Order If you want to control the order in which elements can gain focus, you can use the tabindex attribute to give that element a number between 0 and 32767, which forms part of the tabbing order. Every time the user presses the Tab key, the focus moves to the element with the next highest tabbing order (and again, Shift+Tab moves focus in reverse order). The following elements can carry a tabindex attribute: <a> <area> <button> <input> <object> <select> <textarea> The tabindex attribute was first supported in Netscape 6 and IE 4, but older browsers just ignore this attribute, so it is safe to use it in all documents. After a user has tabbed through all elements in a document that can gain focus, then focus may be given to browser features (most commonly the address bar). 173 Chapter 5: Forms 59313c05.qxd:WroxPro 3/22/08 4:37 PM Page 173 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. To demonstrate how tabbing order works, the following example gives focus to the checkboxes in a different order than you might expect (ch05_eg18.html): <form action=”http://www.example.com/tabbing.asp” method=”get” name=”frmTabExample”> <input type=”checkbox” name=”chkNumber” value=”1” tabindex=”3” /> One<br /> <input type=”checkbox” name=”chkNumber” value=”2” tabindex=”7” /> Two<br /> <input type=”checkbox” name=”chkNumber” value=”3” tabindex=”4” /> Three<br /> <input type=”checkbox” name=”chkNumber” value=”4” tabindex=”1” /> Four<br /> <input type=”checkbox” name=”chkNumber” value=”5” tabindex=”9” /> Five<br /> <input type=”checkbox” name=”chkNumber” value=”6” tabindex=”6” /> Six<br /> <input type=”checkbox” name=”chkNumber” value=”7” tabindex=”10” />Seven <br /> <input type=”checkbox” name=”chkNumber” value=”8” tabindex=”2” /> Eight<br /> <input type=”checkbox” name=”chkNumber” value=”9” tabindex=”8” /> Nine<br /> <input type=”checkbox” name=”chkNumber” value=”10” tabindex=”5” /> Ten<br /> <input type=”submit” value=”Submit” /> </form> In this example, the checkboxes receive focus in the following order: 4, 8, 1, 3, 10, 6, 2, 9, 5, 7 Figure 5-22 shows how Firefox 2 for PC will, by default, give a yellow outline to form elements as they gain focus (other browsers give different outlines — Internet Explorer uses blue lines). I have zoomed in on the item in focus so you can see it in closer detail. Figure 5-22 You should always start your tabindex values with 1 or higher, rather than 0, because elements that could gain focus but do not have a tabindex attribute are given a value of 0 and are navigated in the order in which they appear after those with a tabindex have been cycled through. If two elements have the same value for a tabindex attribute, they will be navigated in the order in which they appear in the document. Note that if an element is disabled, it cannot gain focus and does not participate in the tabbing order. 174 Chapter 5: Forms 59313c05.qxd:WroxPro 3/22/08 4:37 PM Page 174 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Access Keys Access keys act just like keyboard shortcuts. The access key is a single character from the document’s character set that is expected to appear on the user’s keyboard. When this key is used in conjunction with another key (such as Alt on Windows and Control on an Apple), the browser automatically goes to that section (exactly which key must be used in conjunction with the access key depends upon the operating system and browser). The access key is defined using the accesskey attribute. The value of this attribute is the character (and key on the keyboard) you want the user to be able to press (in conjunction with the other key that is dependent upon the operating system and browser). The following elements can carry an access key attribute: <a> <area> <button> <input> <label> <legend> <textarea> The accesskey attribute was first supported in Netscape 6 and IE 4, but older browsers just ignore these attributes, so it is safe to use them in all documents. To see how access keys work, you can revisit the example of a competition form (ch05_eg17.html), which was covered in the section “Structuring Your Forms with <fieldset> and <legend> Elements” earlier in this chapter. Now the accesskey attributes can be added to the <legend> elements: <legend accesskey=”c”><u>C</u>ontact Information (ALT + C)</legend> <legend>Competition Question</legend> <legend accesskey=”t”><u>T</u>iebreaker Question (ALT + T)</legend> <legend>Enter competition</legend> The new version of this file is ch05_eg19.html in the download code. (Extra <br /> elements have been added to show how the screen scrolls to the appropriate section when an access key is used.) As a hint to users that they can use the access keys as shortcuts, information has also been added to the information in the <legend> element in two ways: ❑ In brackets after the title ❑ By underlining the access key itself Figure 5-23 shows how this updated example looks in a browser. The effect of an access key being used depends upon the element that it is used with. With <legend> elements, such as those shown previously, the browser scrolls to that part of the page automatically and gives focus to the first form control in the section. When used with form controls, those elements gain focus. As soon as the element gains focus, the user should be able to interact with it (either by typing in text controls or pressing the Enter or Return key with other form controls). When using letters a–z, it does not matter whether you specify an uppercase or lowercase access key, although strictly speaking it should be lowercase. 175 Chapter 5: Forms 59313c05.qxd:WroxPro 3/22/08 4:37 PM Page 175 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Figure 5-23 Disabled and Read-Only Controls Throughout the chapter you have seen that several of the elements can carry attributes called disabled and readonly: ❑ The readonly attribute prevents users from changing the value of the form control themselves, although it may be modified by a script. A name/value pair of a readonly control will be sent to the server. Its value should be readonly. ❑ The disabled attribute disables the form control so that users cannot alter it. A script can be used to re-enable the control, but unless a control is re-enabled, the name/value pair will not be sent to the server. Its value should be disabled. The readonly and disabled attributes were implemented in Netscape 6 and IE 5, although older browsers ignore them, so you can add these attributes to all documents. You should be aware, however, that because older browsers ignore these attributes, users with older browsers would still be able to interact with form controls that have readonly or disabled attributes. 176 Chapter 5: Forms 59313c05.qxd:WroxPro 3/22/08 4:37 PM Page 176 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. A readonly control is particularly helpful when you want to stop visitors from changing a part of the form, perhaps because it cannot change (such as in the case of terms and conditions) or because you want to indicate to a user something that they have already said, or when. You often see readonly controls for user agreements and in the body of e-mail forms that allow you to e-mail a web page to a friend. The disabled attribute is particularly helpful when preventing users from interacting with a control until they have done something else. For example, you might use a script to disable a submit button until all of the form fields contain a value. The following table indicates which form controls work with the readonly and disabled attributes. The following table indicates the main differences between the readonly and disabled attributes. Attribute readonly disabled Can be modified Yes by script, not by user Not while disabled Will be sent to server Yes Not while disabled Will receive focus Yes No Included in tabbing order Yes No Element readonly disabled <textarea> Yes Yes <input type=”text” / > Yes Yes <input type=”checkbox” /> No Yes <input type=”radio” / > No Yes <input type=”submit” / > No Yes <input type=”reset” /> No Yes <input type=”button” /> No Yes <select> No Yes <option> No Yes <button> No Yes 177 Chapter 5: Forms 59313c05.qxd:WroxPro 3/22/08 4:37 PM Page 177 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Sending Form Data to the Server You’ve already learned about the submit button, which the user presses to initiate the sending of form data to the server, but this book has not yet covered the difference between the HTTP get and HTTP post meth- ods. You might remember that you can specify which of these two methods is used by adding the method attribute to the <form> element — just as all of the examples in this chapter have done. The method attribute can take one of two values, either get or post, corresponding to the HTTP methods used to send the form data. If the <form> element does not carry a method attribute, then by default the get method will be used. If you are using a file upload form control, you must choose the post method (and you must set the enctype attribute to have a value of multipart/form-data). HTTP get When you send form data to the server using the HTTP get method, the form data is appended to the URL specified in the action attribute of the <form> element. The form data is separated from the URL using a question mark. Following the question mark you get the name/value pairs for each form control. Each name/value pair is separated by an ampersand ( &). For example, take the following login form, which you saw when the password form control was introduced: <form action=”http://www.example.com/login.aspx” method=”get”> Username: <input type=”text” name=”txtUsername” value=”“ size=”20” maxlength=”20”><br /> Password: <input type=”password” name=”pwdPassword” value=”“ size=”20” maxlength=”20”> <input type=”submit” /> </form> When you click the submit button, your username and password are appended to the URL http://www .example.com/login.aspx like so in what is known as the query string: http://www.example.com/login.aspx?txtUsername=Bob&pwdPassword=LetMeIn Note that, when a browser requests a URL with any spaces or unsafe characters (such as /, \ , =, &, and +, which have special meanings in URL), they are replaced with a hex code to represent that character. This is done automatically by the browser, and is known as URL encoding. When the data reaches the server, the server will usually un-encode the special characters automatically. One of the great advantages of passing form data in a URL is that it can be bookmarked. If you look at searches performed on major search engines such as Google, they tend to use the get method so that the page can be bookmarked. The get method, however, has some disadvantages. Indeed, when sending sensitive data such as the password shown here, or credit card details, you should not use the get method because the sensitive data becomes part of the URL and is in full view to everyone (and could be bookmarked). 178 Chapter 5: Forms 59313c05.qxd:WroxPro 3/22/08 4:37 PM Page 178 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. You should not use the HTTP get method when: ❑ You are updating a data source such as a database or spreadsheet (because someone could make up URLs that would alter your data source). ❑ You are dealing with sensitive information, such as passwords or credit card details (because the sensitive form data would be visible as part of a URL). ❑ You have large amounts of data (because older browsers do not allow URLs to exceed more than 1,024 characters — although the recent versions of the main browsers do not have limits). ❑ Your form contains a file upload control (because uploaded files cannot be passed in the URL). ❑ Your users might enter non-ASCII characters such as Hebrew or Cyrillic characters. In these circumstances, you should use the HTTP post method. HTTP post When you send data from a form to the server using the HTTP post method, the form data is sent trans- parently in what is known as the HTTP headers. While you do not see these headers, they are sent in clear text and cannot be relied upon to be secure (unless you are sending data under a Secure Sockets Layer, or SSL). If the login form you just saw was sent using the post method, it could look something like this in the HTTP headers: User-agent: MSIE 5.5 Content-Type: application/x-www-form-urlencoded Content-length: 35 other headers go here txtUserName=Bob&pwdPassword=LetMeIn Note that the last line is the form data, and that it is in exactly the same format as the data after the ques- tion mark in the get method — it would also be URL — encoded if it contained spaces or any characters reserved for use in URLs. There is nothing to stop you using the post method to send form data to a page that also contains a query string. For example, you might have one page to handle users that want to subscribe to or unsubscribe from a newsletter, and you might choose to indicate whether a user wanted to subscribe or unsubscribe in the query string. Meanwhile, you might want to send their actual contact details in a form that uses the post method because you are updating a data source. In this case, you could use the following <form> element: <form action=”http://www.example.com/newsletter.asp?action=subscribe” method=”post”> The only issue with using the HTTP post method is that the information the user entered on the form cannot be bookmarked in the same way it can when it is contained in the URL. So you cannot use it to retrieve a page that was generated using specific form data as you can when you bookmark a page gen- erated by most search engines, but it is good for security reasons. 179 Chapter 5: Forms 59313c05.qxd:WroxPro 3/22/08 4:37 PM Page 179 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Try It Out The Registration Form Revisited It is time to revisit the registration form from the earlier Try It Out section in this chapter. This time you add some more fields into it, and make it more usable. 1. Open the file registration.html that you made earlier in the chapter and save it as registration2.html so that you have a different copy to work with. 2. You should create <label> elements for all of the form controls. This involves putting the instructions for that control inside a <label> element. This element should carry the for attrib- ute, whose value is the value of the id attribute on the corresponding form control, like this one: <tr> <td><label for=”userName”>User name:</label></td> <td><input type=”text” name=”txtUserName” size=”20” id=”username” /></td> </tr> 3. You have to label the two radio buttons individually: <tr> <td>Gender:</td> <td><input type=”radio” name=”radSex” value=”male” id=”male” /> <label for =”male”>Male</label></td> </tr> <tr> <td></td> <td><input type=”radio” name=”radSex” value=”female” id=”female” /> <label for=”female”>Female</label></td> </tr> If you remember the last chapter’s discussion of table linearization for screen readers, then this should work fine for most users. If, however, another column were to the right with unrelated information (such as ads) this could confuse readers, so the table for the form controls should hold only the controls and their labels. 4. Next you are going to add four new text boxes after the username and password. The first text input will be to confirm the password and then there will be an empty row. This will be followed by two text inputs: one for the user’s first name and one for the user’s last name. Then there will be another empty row, followed by an input for the user’s e-mail address: <tr> <td><label for=”confPwd”>Confirm Password:</label></td> <td><input type=”password” name=”pwdPasswordConf” size=”20” id=”confPassword” /></td> </tr> <tr><td>&nbsp;</td><td>&nbsp;</td></tr> <tr> 180 Chapter 5: Forms 59313c05.qxd:WroxPro 3/22/08 4:37 PM Page 180 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... a matter of preference and I explain my reasons why in the second section of this chapter — after a simple example that helps you understand what frames really are Introducing the Frameset To help you understand frames, Figure 6-1 shows you a frameset document in a browser This frameset divides the page into three parts, and each separate part of the page is a separate XHTML document Please purchase... remember from Chapter 1 that, when writing a frameset document, you use a different DOCTYPE declaration This is because frameset documents use a few elements in different ways than other XHTML documents To create a frameset document, first you need the element, which is used instead of the element The frameset defines the rows and columns your page is divided into Each frame is then... copyright and privacy policy notice like those you see at the bottom of a lot of web sites Before you start to build the example, it would help to have a look at what you are going to create You can see the page in Figure 6-8 Figure 6-8 Four files actually make up this example: ❑ books .html, which contains the frameset for the whole document ❑ nav .html, which is the top frame ❑ newBooks .html, which... collect information from a visitor to your site you will use a form, and you have seen several different examples of forms in this chapter From simple search boxes and login pages to complex online order forms and registration processes, forms are a vital part of web design You have learned how a form lives inside a element and that inside a form there are one or more form controls You have seen... and elements and aid navigation with tabindex and accesskey attributes Finally, you learned when you should use the HTTP get or post methods to send form data to the server Next, it is time to look at the last of our core XHTML chapters, which covers framesets You will see more about form design in Chapter 12, which covers some design issues that will make your forms easier to understand... the frameset and the size of each column You have to provide a value to indicate the width for each of the columns in your frameset, and the number of values you provide (each separated by a comma) indicates how many columns there are in the document For example, here there are three columns: the first takes up 20 percent of the width of the browser window, the second takes up 60 percent, and the third... not be shown (no is not part of HTML 4 but is still supported by IE and Netscape.) The marginwidth and marginheight Attributes The margin is the space between the three-dimensional border of a frame and its contents The marginwidth attribute enables you to specify the width of the space between the left and right of the frame’s borders and the frame’s content The value is given in pixels The marginheight... might just divide the screen into two rows, whereas a complex frameset could use several rows and columns In this chapter you learn the following: ❑ How to create a frameset document with multiple frames ❑ How to create inline frames (or iframes), which are single windows that sit within another page ❑ How to deal with users whose browsers cannot use frames I should warn you early on that there are actually... newBooks .html, which is the page with all the book details ❑ footer .html, which is the page containing the footer image Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 201 59313c06.qxd:WroxPro 3/24/08 11:35 PM Page 202 Chapter 6: Frames You will work through these pages in this order: 1 Start your text editor or web page editor and create a skeleton of a frameset document, remembering... elements The first divides the page into two columns: the first is 750 pixels wide and the second takes up the remaining page (if the window is set to wider than 750 pixels) Within the first column you can see the second element, which holds the real content of the page Three elements are within this nested frameset, which you can see clearly in Figure 6-7 . already about XHTML, you know that not every element in the document receives this focus. In fact, it is only the elements that a user can interact with, such. organize larger forms using the <fieldset> and <label> elements and aid navigation with tabindex and accesskey attributes. Finally, you learned