| In the previous lesson, I talked about how you can apply style sheets to your pages to jazz up the look and feel or to completely control their structure. All the properties that you can apply to paragraphs, divs, and tables can just as easily be applied to forms. I'm going to talk about some ways that you can enhance the look and feel of your forms using CSS. As you can see from the screenshots so far today, regular form controls might not blend in too well with your pages. The default look and feel of form controls can be altered in just about any way using CSS. For example, in most browsers, by default, text input fields use Courier as their font, have white backgrounds, and beveled borders. As you know, border, font, and background-color are all properties that you can modify using CSS. In fact, the following example uses all those properties: Input <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Style Sheet Example</title> <style type="text/css"> /*<![CDATA[*/ input.styled { border: 2px solid #000; background-color: #aaa; font: bold 18px Verdana; padding: 4px; } /*]]>*/ </style> </head> <body> <form> <p>Default: <input value="value" /></p> <p>Styled: <input value="value" /></p> </form> </body> </html>
The page contains two text input fields: one with the default look and feel, and another that's modified using CSS. The page containing the form appears in Figure 10.19. Output Figure 10.19. A regular text input field and a styled text input field. 
As you can see, the field that we applied styles to is radically different from the one that uses the default decoration. You can do anything to regular form fields that you can do to other block-level elements. In fact, you can make form fields look just like the rest of your page, with no borders and the same fonts as your page text if you like. Of course, that will make your forms extremely confusing to use, so you probably don't want to do it, but you could. It's also fairly common to modify the buttons on your pages. Normally, Submit buttons on forms are gray with beveled edges, or they have the look and feel provided by the user's operating system. By applying styles to your buttons, you can better integrate them into your designs. This is especially useful if you need to make your buttons smaller than they are by default. I'll provide more examples of style usage in forms in Exercise 10.3. Bear in mind that some browsers support CSS more fully than others. So some users won't see the styles that you've applied. The nice thing about CSS though is that they'll still see the form fields with the browser's default appearance. Task: Exercise 10.3. Applying Styles to a Form| Let's take another look at the form from Exercise 10.2. The form can easily be spruced up by tweaking its appearance using CSS. The main objectives are to make the appearance of the controls more consistent, and to make it clear to users which form fields are required and which are not. In the original version of the form, the labels for the required fields were bold. We'll keep with that convention here, and also change the border appearance of the fields to indicate which fields are required and which aren't. Let's look at the style sheet first. We use three classes on the page: required, optional, and submit. First, the required styles. Here's that portion of the style sheet: input.required { width: 300px; font: bold 12px Verdana; background-color: #6a6; border: solid 2px #000; } select.required { width: 300px; font: bold 12px Verdana; background-color: #6a6; border: solid 2px #000; } td.required { font: bold 12px Verdana; }
Any <input> tags that have their class attribute set to required will be set to 300 pixels of width, and the field will have a 2-pixel black border and a darker green background than is used on the page itself. Finally, we set the font to bold 12-pixel Verdana. Using the select.required selector (for required <select> tags), we set its style to match the required <input> tags as well. The TD.required selector is for table cells that contain labels for required fields. Now let's look at the styles for optional fields. Here are the style declarations: input.optional { width: 300px; font: 12px Verdana; background-color: #6a6; border: solid 2px #999; } textarea.optional { width: 300px; font: 12px Verdana; background-color: #6a6; border: solid 2px #666; } td.optional { font: 12px Verdana; }
These styles are almost identical to the styles for the required class. The only differences are that the text inside the fields isn't bold and the border is dark gray instead of black. Other than those changes, the styles are the same. The other style alters the appearance of the submit button: input.submit { background-color: #6a6; border: solid 2px #000; font: bold 12px Verdana; }
After the style sheet is set up, all we have to do is make sure that the class attributes of our tags are correct. The full source code for the page, including the form updated with classes, follows: Input <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Registration Form</title> <style type="text/css"> /*<![CDATA[*/ body { background-color: #9c9; } input.required { width: 300px; font: bold 12px Verdana; background-color: #6a6; border: solid 2px #000; } select.required { width: 300px; font: bold 12px Verdana; background-color: #6a6; border: solid 2px #000; } td.required { font: bold 12px Verdana; } input.optional { width: 300px; font: 12px Verdana; background-color: #6a6; border: solid 2px #999; } textarea.optional { width: 300px; font: 12px Verdana; background-color: #6a6; border: solid 2px #666; } td.optional { font: 12px Verdana; } input.submit { background-color: #6a6; border: solid 2px #000; font: bold 12px Verdana; } /*]]>*/ </style> </head> <body> <h1>Registration Form</h1> <p>Please fill out the form below to register for our site. Fields with bold labels are required.</p> <form action="/cgi-bin/register.cgi" method="post" enctype="multipart/form-data"> <table> <tr> <td align="right" ><b>Name:</b></td> <td><input name="name" /></td> </tr> <tr> <td align="right" ><b>Gender:</b></td> <td ><input type="radio" name="gender" value="male" /> male <input type="radio" name="gender" value="female" /> female</td> </tr> <tr> <td align="right" ><b>Operating System:</b></td> <td><select name="os" > <option value="windows">Windows</option> <option value="macos">Mac OS</option> <option value="linux">Linux</option> <option value="other">Other ...</option> </select></td> </tr> <tr> <td valign="top" align="right" >Toys:</td> <td ><input type="checkbox" name="toy" value="digicam" /> Digital Camera<br /> <input type="checkbox" name="toy" value="mp3" /> MP3 Player<br /> <input type="checkbox" name="toy" value="wlan" /> Wireless LAN</td> </tr> <tr> <td align="right" >Portrait:</td> <td><input type="file" name="portrait" /></td> </tr> <tr> <td valign="top" align="right" >Mini Biography:</td> <td><textarea name="bio" rows="6" cols="40" ></textarea></td> </tr> <tr> <td colspan="2" align="right"><input type="submit" value="register" /></td> </tr> </table> </form> </body> </html>
The page containing this form appears in Figure 10.20. Output Figure 10.20. A form that uses Cascading Style Sheets. 
|
|
