Tài liệu CSS Cookbook- P10 pdf

column, as the wrapping of the form elements can be confusing to users. By setting the padding to accommodate the width of the left column, designers create seamless-looking columns. See Also Chapter 10 for more techniques on laying out elements of a web page 8.16 Integrating Form Feedback with a Form Problem You want to show users which parts of a form are required. Figure 8-17. The form, laid out in two columns 8.16 Integrating Form Feedback with a Form | 425 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Solution First, place a text warning next to form labels of fields that are required, as shown in the left of Figure 8-18. Figure 8-18. Required warning text on the left, with styled form elements on the right Apply a class attribute with a value of required to label and form elements that are required to successfully process a form: <form id="msgform" name="msgform" method="post" action="/process.php"> <fieldset> <legend>Contact Information</legend> <label for="fmtitle" accesskey="i">T<span class="akey">i</span>tle</label> <select name="fmtitle" id="fmtitle"> <option value="ms">Ms.</option> <option value="mrs">Mrs.</option> <option value="miss">Miss</option> <option value="mr">Mr.</option> </select> <label for="fmname" accesskey="n"><span class="akey">N</span>ame</label> <input type="text" name="fmname" id="fmname" /> <label for="fmemail" accesskey="e" class="required"> <span class="akey">E</span>mail <img src="alert.gif" /> Required</label> <input type="text" name="fmemail" id="fmemail" class="required" /> </fieldset> <fieldset> 426 | Chapter 8: Forms Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. <legend>Your Message</legend> <label for="fmstate" accesskey="y">Subject</label> <input type="text" name="fmcountry" id="fmcountry" /> <label for="fmmsg" class="required"><span class="akey">M</span>essage <img src="alert.gif" /> Required</label> <textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14" class="required"></textarea> </fieldset> <input type="submit" name="submit" value="send" class="submit" /> </form> Apply rules to change the text and border color of the forms, as shown on the right side of Figure 8-18: label { margin-top: .33em; display: block; } input { display: block; width: 250px; } textarea { width: 250px; height: 75px; } label.required { color: #c00; font-weight: bold; } textarea.required, input.required { border: 1px solid red; background-color: #eee; } Discussion Modifying form and label elements with color and bold text lets users readily determine the problem areas of their form. Adding the word required and a warning icon tells users there are problems with their form submission. If a user’s browser doesn’t support CSS, the text and image will be the only clues telling the user what he needs to correct before the form can be submitted properly. See Also http://www.maketemplate.com/feedback/ for a tutorial on integrating form feedback with PHP 8.16 Integrating Form Feedback with a Form | 427 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 8.17 Styling Access Keys in Web Forms Problem You want to create a visual indicator to show which characters are access keys in a form. Solution Use the descendant selector to isolate characters within the label tag that represent access keys. First, create a CSS rule with a selector that states the text within em tags that are within a form is underlined: form em { text-decoration: underline; font-style: normal; } Wrap an em element around a letter in the label element that represents the access key: <form id="msgform" name="msgform" method="post" action="/"> <label for="fmtitle" accesskey="i">T<em>i</em>tle</label> <select name="fmtitle" id="fmtitle"> <option value="ms">Ms.</option> <option value="mrs">Mrs.</option> <option value="miss">Miss</option> <option value="mr">Mr.</option> </select> <label for="fmname" accesskey="n"><em>N</em>ame</label> <input type="text" name="fmname" id="fmname" /> <label for="fmemail" accesskey="e"><em>E</em>mail</label> <input type="text" name="fmemail" id="fmemail" /> <label for="fmstate" accesskey="a">St<em>a</em>te/Province</label> <input type="text" name="fmstate" id="fmstate" /> <label for="fmcountry" accesskey="y">Countr<em>y</em></label> <input type="text" name="fmcountry" id="fmcountry" /> <label for="fmmsg" accesskey="m"><em>M</em>essage</label> <textarea name="fmmsg" id="fmmsg" rows="5" cols="14"></textarea> <input type="submit" name="submit" value="send" class="submit" /> </form> Discussion An access key allows users with disabilities to navigate quickly through sections of a web page. However, users without limited surfing ability can also make use of access keys. By underlining characters that represent access keys, you can let users quickly navigate a form without switching to a mouse or other pointing device. Access keys are supported in Safari, Chrome, IE, Firefox, and Opera. 428 | Chapter 8: Forms Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. See Also http://www.alistapart.com/articles/accesskeys/ for more information about styling ac- cess keys 8.18 Grouping Common Form Elements Problem You want to break a large form into smaller groupings of elements, as shown in Fig- ure 8-19. Figure 8-19. Modified fieldset and legends Solution Use the HTML fieldset property to separate the different sections of a form: <form id="msgform" name="msgform" method="post" action="/"> <fieldset> <legend>Contact Information</legend> <label for="fmtitle">Title</label> <select name="fmtitle" id="fmtitle"> <option value="ms">Ms.</option> <option value="mrs">Mrs.</option> <option value="miss">Miss</option> <option value="mr">Mr.</option> </select> <label for="fmname">Name</label> <input type="text" name="fmname" id="fmname" /> <label for="fmemail">Email</label> 8.18 Grouping Common Form Elements | 429 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. <input type="text" name="fmemail" id="fmemail" /> </fieldset> <fieldset> <legend>Your Message</legend> <label for="fmstate">Subject</label> <input type="text" name="fmcountry" id="fmcountry" /> <label for="fmmsg">Message</label> <textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea> </fieldset> <input type="submit" name="submit" value="send" class="submit" /> </form> Discussion The fieldset HTML element and the legend property allow you to easily group com- mon elements. You can also apply CSS rules to fieldset and legend to modify the look: fieldset { margin-bottom: 1em; border: 1px solid #888; border-right: 1px solid #666; border-bottom: 1px solid #666; } legend { font-weight: bold; border: 1px solid #888; border-right: 1px solid #666; border-bottom: 1px solid #666; padding: .5em; background-color: #666; background-image: url(title-glass.png); background-repeat: repeat-x; background-position: 50% 50%; color: #fff; text-shadow: 0 −1px 0 #333; letter-spacing: .1em; text-transform: uppercase; } See Also The HTML 4.01 specification for fieldset and legend at http://www.w3.org/TR/html4/ interact/forms.html#h-17.10 430 | Chapter 8: Forms Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 8.19 Entering Data into a Form That Is Similar to a Spreadsheet Problem You want to modify a form in an environment that is similar to a spreadsheet applica- tion, as shown in Figure 8-20. Figure 8-20. A table row highlighted Solution First, place input elements into an HTML table: <form action="/process.php" method="get" name="copresentations"> <table cellspacing="0"> <caption> Summary of Financial Data </caption> <tr> <th scope="col">Fiscal Year </th> 8.19 Entering Data into a Form That Is Similar to a Spreadsheet | 431 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. <th scope="col">Worksite<br /> Presentations </th> <th scope="col">Passing Grades </th> <th scope="col">Number of Presenters </th> </tr> <tr> <th scope="row">1999</th> <td><input type="text" name="wkpst1999" /></td> <td><input type="text" name="pass1999" /></td> <td><input type="text" name="numpst1999" /></td> </tr> <tr> <th scope="row">2000</th> <td><input type="text" name="wkpst2000" /></td> <td><input type="text" name="pass2000" /></td> <td><input type="text" name="numpst2000" /></td> </tr> <tr> <th scope="row">2001</th> <td><input type="text" name="wkpst2001" /></td> <td><input type="text" name="pass2001" /></td> <td><input type="text" name="numpst2001" /></td> </tr> <tr> <th scope="row">2002</th> <td><input type="text" name="wkpst2002" /></td> <td><input type="text" name="pass2002" /></td> <td><input type="text" name="numpst2002" /></td> </tr> <tr> <th scope="row">2003</th> <td><input type="text" name="wkpst2003" /></td> <td><input type="text" name="pass2003" /></td> <td><input type="text" name="numpst2003" /></td> </tr> <tr> <th scope="row">2004</th> <td><input type="text" name="wkpst2004" /></td> <td><input type="text" name="pass2004" /></td> <td><input type="text" name="numpst2004" /></td> </tr> </table> <input type="submit" class="save" value="Save" /> </form> Apply a thin border around the table and set the table border display to collapse: table { border-collapse: collapse; border: 1px solid black; } Set the table cells to a set width and display a thin border: th { border: 1px solid black; width: 6em; 432 | Chapter 8: Forms Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. } td { width:6em; border: 1px solid black; } Remove padding and margins for the table cells: th { border: 1px solid black; width: 6em; } td { width:6em; border: 1px solid black; padding: 0; margin: 0; } Set the width of the input elements to equal the width of the table cells, while removing any borders that browsers automatically apply to form elements: input { width: 100%; border: none; margin: 0; } Since setting the width of the input elements will also stretch the Submit button to the maximum width of its parent element, the Submit button will render quite large. To rein in the size of the Submit button, write a separate CSS rule: .save { margin-top: 1em; width: 5em; } To complete the spreadsheet look as shown, set the input text to be aligned to the right: input { width: 100%; border: none; margin: 0; text-align: right; } Discussion Spreadsheets help users keep tabs on lots of numerical and financial information. The typical e-commerce or contact form layout would be a hindrance if users needed to enter a multitude of numbers. By mimicking a spreadsheet layout, you enable users to quickly enter data. When you couple this technique with the :hover pseudo-selector, you can make it so that the table row and cell a user is working in are highlighted as the user enters data: 8.19 Entering Data into a Form That Is Similar to a Spreadsheet | 433 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. tr:hover { background-color: #ffc; } tr:hover input { background-color: #ffc; } input:focus { background-color: #ffc; } See Also Recipe 7.2 for styling input elements 8.20 Sample Design: A Login Form Login forms are all over the Web. For instance, you need a login and a password to check your email on the Web, order books from Amazon.com, and even pay that park- ing ticket online. Only a few components of a login form are visible to the user: the input field’s Submit button and labels, and the username and password fields themselves. Here is the mark- up of the form to be stylized; Figure 8-21 shows the input field without styles applied: <form action="login.php" method="post"> <label for="uname">Username</label> <input type="text" name="uname" id="uname" value="" /><br /> <label for="pword">Password</label> <input type="text" name="pword" id="pword" value="" /> <br /> <input type="submit" name="Submit" value="Submit" /> </form> Figure 8-21. The login form without styles 434 | Chapter 8: Forms Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... purchase PDF Split-Merge on www.verypdf.com to remove this watermark td { vertical-align: middle; background-color: black; border-bottom: 1px solid white; color: white; border-left: 4px solid gray; padding: 4px; font-family: Verdana; font-size: 7em; } Figure 8-35 The stylized right column table cells 8.21 Sample Design: A Registration Form | 447 Please purchase PDF Split-Merge on www.verypdf.com to... modern browsers and is backward compatible See Also Recipe 9.1 for setting table borders and cell padding; the CSS 2.1 specification for border-collapse at http://www.w3.org/TR /CSS2 1/tables.html#propdef-border-col lapse; the CSS 2.1 specification for border-spacing at http://www.w3.org/TR /CSS2 1/ tables.html#propdef-border-spacing; Recipe 8.2; Recipe 8.8 9.3 Setting the Style for Captions Problem You... required (see Figure 8-37): required { color: red; } Figure 8-37 The required fields marked with red text 8.21 Sample Design: A Registration Form | 449 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Note that the CSS rule states that the color is red, but for printing purposes the color will come out a shade of gray Adjust the form headers that indicate the different sections... #buttonSubmit { margin-left: 220px; margin-top: 4px; } Figure 8-40 The Submit and Reset buttons moved into place 452 | Chapter 8: Forms Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark CHAPTER 9 Tables 9.0 Introduction With CSS, web designers learned they could forego the practice of manipulating HTML tables to hold designs together Practices such as cutting up an image to... The table element’s border attribute determines borders for the table and its enclosing cells You can set the CSS border property through a separate border thickness for the table and individual cells When applying a border to a cell that runs counter to a previous CSS rule, the following four CSS specification rules are followed for conflict resolution: • If border-style is set to hidden, all other... separate is supported only in Firefox, Safari, and Chrome, and not in IE Therefore, most web designers stick to the collapse model See Also The CSS 2.1 specification for border models at http://www.w3.org/TR /CSS2 1/tables html#propdef-border-collapse; Chapter 11 of CSS: The Definitive Guide by Eric A Meyer (O’Reilly) for more discussion on tables 9.2 Setting the Cell Spacing Problem You want to adjust the... General Demographic Characteristics of Tallahassee, FL 456 | Chapter 9: Tables Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark  Estimate Total population 272,091 Discussion The CSS 2.1 specification describes a standard mechanism to manipulate the cellspacing table attribute through the... Design: A Login Form | 437 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark input { display: block; margin-bottom: 1.25em; width: 150px; border: solid black; border-width: 1px 2px 2px 1px; } Figure 8-26 The modified input fields Next, pinpoint gradient styles only to input text files For this approach, use attribute selectors and CSS3 properties, as shown in Figure 8-27:... Discussion By using the type and descendant selectors—the td a in the CSS rule—to apply the styles, you reduce the amount of markup needed to perfect your designs and you reduce the document’s file size The style affects only the a elements within the table cells (marked by td tags) 458 | Chapter 9: Tables Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark If you need more control over... CSS rules to stylize the content within the table cell could look like this: tblcontent p { margin: 0; padding: 0; font-weight: bold; } tblcontent ul { margin: 0; padding: 0; } tblcontent li { margin: 0; padding: 0; line-height: 1.5; } tblcontent li a { padding-left: 15px; background-image: url(bullet.gif); 9.4 Setting the Styles Within Table Cells | 459 Please purchase PDF Split-Merge on www.verypdf.com . columns 8.16 Integrating Form Feedback with a Form | 425 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Solution First, place a text. </fieldset> <fieldset> 426 | Chapter 8: Forms Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. <legend>Your Message</legend>