Tham khảo tài liệu 'tự học html và css trong 1 giờ - part 38', công nghệ thông tin, đồ họa - thiết kế - flash phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả | 346 lesson 10 Designing Forms These styles set up the basic form layout that I m using in both exercises. Next I tweak the appearance of my input fields input type text select textarea width 300px font 18px Verdana border solid 2px 666 background-color ada The rule above applies to three different selectors select textarea and input type text . The third selector is a bit different than the ones you ve seen thus far. It is what s known as an attribute selector and matches only input tags with the value of text for the type attribute. This sort of selector can be used for any attribute. In this case I m using it to avoid applying this rule to Submit buttons radio buttons and check boxes. One catch is that the attribute has to exist so I had to add type text to my input tag. The selector won t match if you leave out the attribute and go with the default value. Next I add more styles that are related to the required fields. In the previous exercise I applied the required class to the labels but I ve moved it out to the div s this time around so that I can apply it to my labels and to my form fields. The labels are still bolded but now I use the nested rule shown next. Also note that I apply the style only to rather than to label. That s so that the other labels used for radio buttons and check boxes aren t bolded. font-weight bold input select background-color 6a6 border solid 2px 000 font-weight bold Finally I have made some enhancements that make it clearer which fields are required. In the original form the labels for required fields were displayed in boldface. In this example that remains the case. However I moved the required class to the enclosing div so that I can also use it in selectors that match the form fields themselves. I also styled required input fields and select fields with a dark green background color bold type and a different color border than optional fields have. After the style .
