Creating Cool Web Sites with HTML, XHTML and CSS (2010)- P6

Tham khảo tài liệu creating cool web sites with html, xhtml and css (2010)- p6, 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ả
Nội dung trích xuất từ tài liệu:
Creating Cool Web Sites with HTML, XHTML and CSS (2010)- P6 224 Creating Cool Web Sites with HTML, XHTML, and CSS Figure 10-3: By including the label tag, clicking the text next to the check box causes the box to be checked. The second way to use the label tag as a wrapper is shown in the following code: male female As of this writing, wrapper-style labels don’t work properly in any of the Web note browsers I tested. Dividing Forms into Fieldsets The combination of the fieldset and legend elements enables you to create a document that is not only more attractive and more logically presented but also more accessible for people with disabilities. The tags’ intent is to allow grouping of thematically related controls within a form. First, here’s a fancy but straightforward form that is actually organized into multiple logical areas without any fieldsets:Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Chapter 10: Advanced Form Design 225 Advanced Forms .title { background: #9cc; font-size:150%; font-weight: bold; } .head { background: #9cc; font-size: 125% } .submit { font-size: 75%; background: #9cc; } Software Defect Report User Profile Information Name: Company: What seems to be the problem? As shown in Figure 10-4, the layout is attractive, but quite complex.Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 226 Creating Cool Web Sites with HTML, XHTML, and CSS Figure 10-4: An attractive forms layout that doesn’t use fieldsets. Did you notice that I used CSS to change the appearance of the Submit button on tip the page? It’s easy to do and can really help fine-tune the page. The fieldset and legend tags become important here. The fieldset tag is a paired tag that enables you to organize your form into logical sections, and legend enables you to assign a caption to a specific fieldset area. The form shown in Figure 10-4 could be rewritten as follows using the fieldset and legend tags: .title { background: #9cc; font-size:150%; margin-bottom: 10px; font-weight: bold; text-align:center; } .submit { font-size: 75%; background: #9cc; } Software Defect Report User Profile Name: Company: Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Chapter 10: Advanced Form Design 227 Problem Description Please describe the problem in as much detail as possible: The fieldset tags are easy to add—they add a nice touch to the design, as you can see in Figure 10-5—but I did have to break the monolithic table into a set of smaller tables so each could be encircled by the lines associated with the fieldset legend. Figure 10-5: Legends help organize the ...