Discussion to which a style sheet is attached. You can use a variety of CSS properties to change the appearance of a form(cid:146)s fields. For example, when styling an <input field, you can change almost every aspect of the field. type="text"> <input type="text" name="name" id="name" /> input { color: #00008B; background-color: #ADD8E6; border: 1px solid #00008B; font: 0.9em Arial, Helvetica, sans-serif; padding: 2px 4px 2px 4px; width: 200px; } Changes the color of the text that is typed inside the color field. Defines the field(cid:146)s background. background-color Affects the border around the field; you can use any border of the other border styles here. Changes the font size and typeface of the text within font the field. Moves the text typed within a field away from the padding edges of the box. forwidth right the of fields form create to you Allows width needdon(cid:146)t enter(cid:151)you to user the expect you data the a long field for a user(cid:146)s first initial! Safari and background colors backgroundsetting support not does Safari writing, this of as Unfortunately, colors for form fields at all. us-the for colors background field on rely never should you reason, this For ability of your site (e.g. (cid:147)the yellow fields are required(cid:148) would be a big no- no). 149 Chapter 6: Forms and User Interfaces fieldsto styles different apply I do How in a single form? The texta for need you that styles the and types, different many has tag <input> field are unlikely to be the same as those you want to use for your buttons or checkboxes. So, how can you create specific styles for different form fields? Solution Theuse. will fields individual styles exact the specify to classes CSS use can You form in the following example has two tags, which display a text field <input> and a submit button respectively. Different classes are applied to each. File: fields.html (excerpt) <form method="post" action="fields.html"> <p>What is your name?<br /> <input type="text" name="name" id="name" class="txt" /></p> <p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" class="btn" /></p> </form> File: fields.css form { border: 1px dotted #aaaaaa; padding: 3px 6px 3px 6px; } input.txt{ color: #00008B; background-color: #ADD8E6; border: 1px inset #00008B; width: 200px; } input.btn { color: #00008B; background-color: #ADD8E6; border: 1px outset #00008B; padding: 2px 4px 2px 4px; } Figure 6.3 shows the result. 150 Discussion .sdleif tupni eht fo hcae ot deilppa era sessalc tnereffiD .3.6 erugiF Discussion the seen, we(cid:146)ve As sepyt eseht dna ,sepyt tnereffid lareves evah nac gat <input> may require different styles in order to display appropriately. In the example above, we used classes to differentiate between an tag with a type of <input> and an tag with a type of . Had we simply created one set text <input> submit of styles for , we might have ended up with the following (having set a <input> width and used an inset border on the text field): input { color: #00008B; background-color: #ADD8E6; border: 1px inset #00008B; width: 200px; } Applied to the form above, these styles would have displayed as shown in Fig- ure 6.4. 151 Chapter 6: Forms and User Interfaces styles.same the use fields input Both 6.4. Figure likelook doesn(cid:146)t certainly it field; text a like rather looks now button submit The a button! Using different classes allows us to define each element exactly as we want it to display. The forms in any application will likely need to cater for a variety of different types of data. Some text fields may only require the user to enter two characters; others may need to accept a name or other short word; others must take an entire sentence. By creating CSS classes for small, medium, and large theexpect you data the to appropriate that(cid:146)s field the choose can you fields, text user to enter. This, in turn, helps users feel confident that they(cid:146)re entering the correct information. Style Early, Style Often issteps first my of one forms, of lot a has that site a on work begin I When matterdoesn(cid:146)t It forms. standard for classes sheet style the within create to if the style needs to change at a later date(cid:151)that just involves tweaking the style sheet values. The important thing is that classes are applied from the outset, so that any changes affect all the forms on the site. 152 How do I stop my form creating additional white space and line breaks? How do I stop my form creating additional white space and line breaks? A form is a block-level element and, like a paragraph, will display on a new line occasionsare there however, want, you(cid:146)d behavior the usually is This default. by on which you may wish to add a small form within the flow of a document. Solution the use can You of value a with property asform the display to display inline an inline element. File: inline.html (excerpt) Your email address: <form method="post" action="inline.html"> <input type="text" name="name" id="name" class="txt" /> <input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" class="btn" /> </form> File: inline.css form { display: inline; } input.txt { color: #00008B; background-color: #E3F2F7; border: 1px inset #00008B; width: 200px; } input.btn { color: #00008B; background-color: #ADD8E6; border: 1px outset #00008B; } As you can see in Figure 6.5, the form now flows with the text around it. 153 Chapter 6: Forms and User Interfaces inline.displayed is form The 6.5. Figure ekil kool nottub timbus a ekam I od woH text? peopleexpect you if buttons like look buttons make to idea good a generally It(cid:146)s to click on them. However, occasionally, you might want to have your form submit button look more like plain text. Solution File: textbutton.css (excerpt) .btn { background-color: transparent; border: 0; padding: 0; } text.like look can button A 6.6. Figure 154 How do I ensure that users with text-only devices understand how to complete my form? The text Next >> that appears on the second line in Figure 6.6 is actually a button! Safari Protects its Buttons youlet doesn(cid:146)t Safari support, styling form limited of theme the Continuing therefore,solution, This do. browsers other way the buttons of look the alter does not apply to that browser. ylno-txet htiw sresu taht erusne I od woH mycomplete to how understand devices form? It(cid:146)s good to create an attractive and usable form for visitors who have standard text-a have will who users many are there that mind in bear but browsers, Web only view of your site. Before you use CSS to style your form, ensure that it(cid:146)s structured in a way that makes the form(cid:146)s completion easy for text-only users. Solution ensureto is accessible more form your make to ways important most the of One text-a Using field. form each with belongs label which understand users all that aloudform the reads typically which reader, screen a particular, device(cid:151)in only to a visually impaired user(cid:151)visitors can find it very difficult to determine the eht esu ot si noitulos ehT .dleif hcae otni retne ot desoppus er(cid:146)yeht sliated <label> tag, which ties a label to a specific field. The tag represents another <label> element that(cid:146)s easily styled with CSS rules. File: textonly.html (excerpt) <form method="post" action="textonly.html"> <table> <tr> <td><label for="fullname">Name:</label></td> <td><input type="text" name="fullname" id="fullname" class="txt" /></td> </tr> <tr> <td><label for="email">Email Address:</label></td> <td><input type="text" name="email" id="email" class="txt" /></td> 155 Chapter 6: Forms and User Interfaces </tr> <tr> <td><label for="password1">Password:</label></td> <td><input type="password" name="password1" id="password1" class="txt" /></td> </tr> <tr> <td><label for="password2">Confirm Password:</label></td> <td><input type="password" name="password2" id="password2" class="txt" /></td> </tr> <tr> <td><label for="level">Membership Level:</label></td> <td><select name="level"> <option value="silver">silver</option> <option value="gold">gold</option> </select></td> </tr> </table> <p> <input type="submit" name="btnSubmit" id="btnSubmit" value="Sign Up!" class="btn" /> </p> </form> File: textonly.css h1 { font: 1.2em Arial, Helvetica, sans-serif; } input.txt { color: #00008B; background-color: #E3F2F7; border: 1px inset #00008B; width: 200px; } input.btn { color: #00008B; background-color: #ADD8E6; border: 1px outset #00008B; } label { font : bold 0.9em Arial, Helvetica, sans-serif; } .7.6 erugiF ni nees eb nac tluser eht tub ,ereh ta kool ot tnatropmi ylbirret gnihtoN In addition to improving the usability of the form for text-only browsers, visual 156 Discussion onclicks user the when field corresponding the in cursor the place will browsers one of the labels. browser.Web the in displays form The 6.7. Figure Discussion The tag makes it possible to indicate clearly what information users <label> need to enter into a field. If the form is being read out to users by their screen aWith for. is field particular a what obvious immediately be not may it readers, layout such as the one provided in this example, which uses a table to display theuse to important especially it(cid:146)s another, in field the and cell one in label the tag. <label> There are two ways in which you can use the tag. If your form field is <label> right next to the label, you can simply wrap the field and label with the tag: <label>Name: <input type="text" name="fullname" id="fullname" class="txt" /></label> If, as in our example above, you cannot wrap the label and field as they are not siblings in the document structure, you can use the tag(cid:146)s attribute <label> for labelthe that field the of ID the value a as insert must you case, this In instead. describes. 157 Chapter 6: Forms and User Interfaces File: textonly.html (excerpt) <tr> <td><label for="fullname">Name:</label></td> <td><input type="text" name="fullname" id="fullname" class="txt" /></td> </tr> your have you Once usingthose that assured rest can you place, in tags <label> CSSuse also can You form. your complete to how understand will readers screen to style the tag itself. <label> File: textonly.css (excerpt) label { font: bold 0.9em Arial, Helvetica, sans-serif; } How do I lay out a two-column form using CSS instead of a table? .elbissopmi ton si ksat eht ,revewoh ,selbat tuohtiw tuo yal ot ykcirt eb nac smroF enimaxe uoy fi tub ,ekil-elbat ylbakramer skool taht tuoyal mrof a swohs 8.6 erugiF the HTML code you won(cid:146)t find a table in sight! CSS.using out laid is form two-column This 6.8. Figure 158