Using Other Form Controls <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> file:///G|/1/0672328860/ch10lev1sec4.html (9 von 9) [19.12.2006 13:49:18] Adding Extras Adding Extras You've created all the form controls that will accept user input. Now it's time to add functionality and make the controls a bit friendlier. Displaying Control label Elements The label element displays helpful information for a form control. You should tie the for attribute to the control it labels. To create a label, begin with the opening label tag and then enter the for attribute. The value for this attribute, when present, must match the id attribute for the control it's labeling. Next, enter text that will serve as the label and then close the element with the end label tag, as in the following: Input <label for="control4">Who is your favorite NFL Quarterback?</label> <input type="text" name="favqb" id="control4" /> Figure 10.16 shows this text control with a label assigned to it. Output Figure 10.16. You can assign labels to any form control. Note that they're displayed with the control. If you define your form control within the label element, as shown in the following code, you can omit the for attribute: <label>User name: <input type="text" name="username" /></label> The <label> tag doesn't cause any visible changes to the page, but you can always apply styles to it if you want. file:///G|/1/0672328860/ch10lev1sec5.html (1 von 4) [19.12.2006 13:49:19] Adding Extras Grouping Controls with fieldset and legend The fieldset element organizes form controls into groupings that appear in the web browser. The legend element displays a caption for the fieldset. To create a fieldset element, start with the opening fieldset tag, followed by the legend element. Next, enter your form controls and finish things off with the closing fieldset tag: Input <fieldset> <legend>Oatmeal Varieties</legend> <label>Apple Cinnamon<input type="radio" name="applecinnamon" /> </label><br /> <label>Nutty Crunch<input type="radio" name="nuttycrunch" /> </label><br /> <label>Brown Sugar<input type="radio" name="brownsugar" /></label> </fieldset> Figure 10.17 shows the result. Output Figure 10.17. The fieldset and legend elements enable you to organize your forms. Changing the Default Form Navigation In most browsers, you can use the Tab key to step through the form fields and links on a page. When filling out long forms, it's often much easier to use the Tab key to move from one field to the next than to use the mouse to change fields. If you have a mix of form fields and links on your page, setting things up so that using Tab skips past the links and moves directly from one form field to the next can improve the usability of your applications greatly. To set the tab order for your page, use the tabindex attribute. You should number your form fields sequentially to set the order that the browser will use when the user tabs through them. Here's an example: file:///G|/1/0672328860/ch10lev1sec5.html (2 von 4) [19.12.2006 13:49:19] Adding Extras <p>Enter your <a href="/">name</a>: <input type="text" name="username" tabindex="1" /></p> <p>Enter your <a href="/">age</a>: <input type="text" name="age" tabindex="2" /></p> <p><input type="submit" tabindex="3" /></p> When you tab through this page, the browser will skip past the links and move directly to the form fields. Using Access Keys Access keys also make your forms easier to navigate. They assign a character to an element that moves the focus to that element when the user presses a key. To add an access key to a check box, use the following code: <p>What are your interests?</p> <p>Sports <input type="checkbox" name="sports" accesskey="S" /></p> <p>Music <input type=""checkbox" name="music" accesskey="M" /></p> <p>Television <input type=""checkbox" name="tv" accesskey="T" /></p> Most browsers require you to hold down a modifier key and the key specified using accesskey to select the field. On Windows, both Netscape and Internet Explorer require you to use the Alt key along with the access key to select a field. Access keys are mostly useful for forms that will be used frequently by the same users. A user who is going to use a form only once won't bother to learn the access keys, but if you've written a form for data entry, the people who use it hundreds of times a day might really appreciate the shortcuts. Creating disabled and readonly Controls Sometimes you might want to display a form control without enabling your visitors to use the control or enter new information. To disable a control, add the disabled attribute to the form control: <p>What is the meaning of life? <textarea name="question42" disabled="disabled"> Enter your answer here. </textarea> </p> When displayed in a web browser, the control will be dimmed (a light shade of gray) to indicate that it's unavailable. To create a read-only control, use the readonly attribute: Input <p>This month: <input type="text" name="month" value="September" readonly="readonly" /></p> file:///G|/1/0672328860/ch10lev1sec5.html (3 von 4) [19.12.2006 13:49:19] Adding Extras The read-only control is not distinguished in any way from a normal form control. However, when visitors attempt to enter new information (or, in the case of buttons or check boxes, select them), they'll find that they cannot change the value. Figure 10.18 shows both a disabled control and a read-only control. You'll generally find disabled to be more useful because it's less confusing to your users. Output Figure 10.18. Disabled controls are dimmed. Readonly controls appear normallythey just can't be changed. Form Security It's important to remember that regardless of what you do with your form controls, what gets sent back to the server when the form is submitted is really up to your user. There's nothing to stop her from copying the source to your form, creating a similar page on her own, and submitting that to your server. If the form uses the get method, the user can just edit the URL once the form has been submitted. The point here is that there is no form security. In Lesson 13, "Using JavaScript in Your Pages," you'll learn how to validate your forms with JavaScript. Even in that case, you can't guarantee that users will supply the input that you intend. What this means is that you must always validate the data entered by your users on the server before you use it. file:///G|/1/0672328860/ch10lev1sec5.html (4 von 4) [19.12.2006 13:49:19] Applying Cascading Style Sheet Properties to Forms Applying Cascading Style Sheet Properties to Forms 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" class="styled" /></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. file:///G|/1/0672328860/ch10lev1sec6.html (1 von 7) [19.12.2006 13:49:19] Applying Cascading Style Sheet Properties to Forms 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; file:///G|/1/0672328860/ch10lev1sec6.html (2 von 7) [19.12.2006 13:49:19] Applying Cascading Style Sheet Properties to Forms 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: file:///G|/1/0672328860/ch10lev1sec6.html (3 von 7) [19.12.2006 13:49:19] Applying Cascading Style Sheet Properties to Forms 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 { file:///G|/1/0672328860/ch10lev1sec6.html (4 von 7) [19.12.2006 13:49:19] Applying Cascading Style Sheet Properties to Forms 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" class="required"><b>Name:</b></td> <td><input name="name" class="required" /></td> </tr> <tr> <td align="right" class="required"><b>Gender:</b></td> <td class="required"><input type="radio" name="gender" value="male" /> male <input type="radio" name="gender" value="female" /> female</td> </tr> <tr> <td align="right" class="required"><b>Operating System:</b></td> <td><select name="os" class="required"> <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" class="optional">Toys:</td> <td class="optional"><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" class="optional">Portrait:</td> <td><input type="file" name="portrait" /></td> </tr> <tr> <td valign="top" align="right" class="optional">Mini Biography:</td> <td><textarea name="bio" rows="6" cols="40" class="optional"></textarea></td> </tr> <tr> file:///G|/1/0672328860/ch10lev1sec6.html (5 von 7) [19.12.2006 13:49:19] . /></p> </form> </body> < /html& gt; 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. your answer here. </textarea> </p> When displayed in a web browser, the control will be dimmed (a light shade of gray) to indicate that it's unavailable. To create a read-only. with JavaScript. Even in that case, you can't guarantee that users will supply the input that you intend. What this means is that you must always validate the data entered by your users