CSS Cookbook- P10

Chia sẻ: Thanh Cong | Ngày: | Loại File: PDF | Số trang:50

Thêm vào BST

Báo xấu

108
lượt xem 10
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Tham khảo tài liệu 'css cookbook- p10', công nghệ thông tin, kỹ thuật lập trình phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: CSS Cookbook- P10

Figure 8-17. The form, laid out in two columns 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. 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: Contact Information Title Ms. Mrs. Miss Mr. Name Email Required 426 | Chapter 8: Forms Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Your Message Subject Message Required 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: Title Ms. Mrs. Miss Mr. Name Email State/Province Country Message 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: Contact Information Title Ms. Mrs. Miss Mr. Name Email 8.18 Grouping Common Form Elements | 429 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Your Message Subject Message 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: Summary of Financial Data Fiscal Year 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.
Worksite Presentations Passing Grades Number of Presenters 1999 2000 2001 2002 2003 2004 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: Username Password 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.
First, add a character after the text in the label element. Use the :after pseudo-element property to auto-generate the character: label:after { content: ": "; } Next, to make the labels stick out from the form fields, change the background color of the labels and the weight of the font. Through CSS, change the labels so that they have a gray background and white text set in bold type (see Figure 8-22): label { background-color: gray; color: #fff; font-weight: bold; } Figure 8-22. Styles for colors applied to the label elements Now, place some padding around the text and change the text to uppercase. Also, add a background image with a text shadow to create a small amount of depth (see Fig- ure 8-23). label { background-color: gray; color: #fff; font-weight: bold; padding: 4px; text-transform: uppercase; background-image: url(title-glass.png); background-repeat: repeat-x; background-position: 50%; text-shadow: 0 −1px 0 #000; } 8.20 Sample Design: A Login Form | 435 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Figure 8-23. Text transformed to uppercase letters, among other things As you can see, the labels need to be toned down because they compete for attention with the input fields. To reduce their visual impact, shrink the size of the text while keeping the weight of the font set to bold. Then use the border-radius properties for Firefox and Safari to create some rounded edges. Also, set the typeface of the labels to Verdana, which renders legibly even in small sizes (see Figure 8-24): label { background-color: gray; color: #fff; font-weight: bold; padding: 4px; background-image: url(title-glass.png); background-repeat: repeat-x; background-position: 50%; text-shadow: 0 −1px 0 #000; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; text-transform: uppercase; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: xx-small; } Now it’s time to style the input fields. Because the form has two types of input fields, differentiate them by placing a class attribute in the Submit button. This technique enables you to style the input fields and the Submit button differently. If you didn’t do this, styles that are intended just for the form fields would also be applied to the Submit button. Using the class selector, you can override or change the properties intended for one element so that they aren’t applied to all elements: 436 | Chapter 8: Forms Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Figure 8-24. The text refined in the label element To bring in some whitespace around the form elements, set the input fields to display as block-level elements and apply a margin to the bottom (see Figure 8-25): input { display: block; margin-bottom: 1.25em; } Download at WoweBook.com Figure 8-25. The input elements sliding under the labels Next, extend the width of the input box to 150 pixels and place a 1-pixel border around the box so that the default bevel rendering that occurs in most browsers goes away. Indicate a slight depth to the page by adding a 2-pixel border on the right and bottom of the input box (see Figure 8-26): 8.20 Sample 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: input[type="text"] { background-image: -moz-linear-gradient(left top, left bottom, from(#999), to(#fff), color-stop(0.2, #fff)); background-image: -webkit-gradient(linear,left top, left bottom, from(#999), to(#fff), color-stop(0.2, #fff)); } With the main input fields in place, now it’s time to apply styles to the Submit button. Because you don’t want the Submit button to look like the regular input text fields, use a class selector. Start by changing the size and position of the Submit button. First, shrink the width of the button by 75 pixels (which is one-half the size of the input fields). Then slide the button to the right by setting the left-side margin to 75 pixels (see Figure 8-28): .buttonSubmit { width: 75px; margin-left: 75px; } 438 | Chapter 8: Forms Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Figure 8-27. Small gradients in the background of the text fields Figure 8-28. The refined Submit button Next, change the Submit button’s color to green with a green border, and convert the text to uppercase by using the text-transform property. Also, round out the bottom corners, and add a gradient along with a text shadow to match the style of the labels (see Figure 8-29): .buttonSubmit { width: 75px; margin-left: 75px; color: green; text-transform: uppercase; border: 1px solid green; 8.20 Sample Design: A Login Form | 439 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
-moz-border-radius-bottomleft: 5px; -webkit-border-bottom-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; text-shadow: 0 −1px 0 #000; background-image: -moz-linear-gradient(left top, left bottom, from(#ccc), to(#999), color-stop(0.2, #999)); background-image: -webkit-gradient(linear,left top, left bottom, from(#ccc), to(#999), color-stop(0.2, #999)); } Figure 8-29. The green Submit button styled further To add the final touch, hide the br element from the display because br introduces extra whitespace to the form. Figure 8-30 shows the result: br { display: none; } Figure 8-30. The login form styles finalized 440 | Chapter 8: Forms Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
8.21 Sample Design: A Registration Form For some forms you might want to place the form elements into a two-column table, with the labels in one column and the fields in the other. Example 8-1 provides the code. Figure 8-31 shows the form and tables without styles applied. Example 8-1. Stylized long form Account Information Login Name* Password* Confirm Password* Email Address* Confirm Email* Contact Information First Name* Last Name* Address 1* Address 2 8.21 Sample Design: A Registration Form | 441 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
City* State or Province* Select... Alabama Zip* Country* Gender* Female Male Misc. Information Annual Household Income Select... I'd rather not say Interests Shopping/fashion Sports Travel Eye Color 442 | Chapter 8: Forms Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Red Green Brown Blue Gold Figure 8-31. The form and table without styles applied 8.21 Sample Design: A Registration Form | 443 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
The first element to style is the table element. Set the border model as well as the text color and border around the table itself (see Figure 8-32): table { border-collapse: collapse; color: black; border: 1px solid black; } Figure 8-32. A border placed around the table Next, tackle the table header cells, which are located in the left column (see Fig- ure 8-33). The table header cells are set to a width of 200 pixels, while the content inside the cell is aligned to the right, set to Verdana, and sized to 0.7 em units: th { width: 200px; text-align: right; vertical-align: top; border-top: 1px solid black; 444 | Chapter 8: Forms Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

CÓ THỂ BẠN MUỐN DOWNLOAD

ERROR:connection to 10.20.1.100:9315 failed (errno=111, msg=Connection refused)
ERROR:connection to 10.20.1.100:9315 failed (errno=111, msg=Connection refused)

THÔNG TIN

TRỢ GIÚP

HỖ TRỢ KHÁCH HÀNG

Theo dõi chúng tôi

Chịu trách nhiệm nội dung:

Nguyễn Công Hà - Giám đốc Công ty TNHH TÀI LIỆU TRỰC TUYẾN VI NA

LIÊN HỆ

Địa chỉ: P402, 54A Nơ Trang Long, Phường 14, Q.Bình Thạnh, TP.HCM

Hotline: 093 303 0098

Email: support@tailieu.vn