User:Bartlett/14
./ ADD NAME=CH14.HTML
Hour 14. Forms
What You'll Learn in This Hour:
The HTML language provides a <form> element that can be used to gather information interactively from the user, either for submission to the web server or for processing with JavaScript. These forms can be styled with CSS rules, although variable browser support makes it an uncertain proposition. In this hour, you'll learn about which types of styles are supported for forms and which are not. |
./ ADD NAME=CH14LEV1SEC1.HTML
Styling Form Controls
[wax ka badal]You create a form in HTML by using the <form> element. Between the <form> and </form> tags, you put the HTML that will comprise the form. This consists of normal markup and content, plus form controls and other HTML tags used specifically for creating forms.
Form controls are the interactive portions of the form that let the user enter data for processing on the server or in the browser via JavaScript (or another browser-side language). Examples include text input boxes, check boxes, Submit buttons, and pull-down menus. Other tags that are used with forms designate labels for form elements or group them together in identified sets. Such labels are beneficial for users with disabilities who employ assistive technologies for web access, as well as make your forms easier for everyone to use.
The full list of form controls and markup for labels is shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14table01 Table 14.1]. The <input> tag alone can be used to create 10 different types of form controls; the specific control created depends on the type attribute.
| HTML Tag | Function |
| <button> | Creates a Reset, Submit, or other programmable pushbutton |
| <fieldset> | Groups related form controls |
| <input type="button"> | Creates a programmable push button |
| <input type="checkbox"> | Creates a check box |
| <input type="file"> | Selects a file from the user's computer system for uploading |
| <input type="hidden"> | Creates a hidden field |
| <input type="image"> | Creates a Submit button from an image |
| <input type="password"> | Creates a single-line text field with obscured input |
| <input type="radio"> | Creates one in a set of radio buttons |
| <input type="reset"> | Creates a Reset button |
| <input type="submit"> | Creates a Submit button |
| <input type="text"> | Creates a single-line text field |
| <label> | Provides a text label for a form control |
| <legend> | Provides a text label for a <fieldset> |
| <optgroup> | Groups related <option> elements together |
| <option> | Designates one choice in a <select> menu |
| <select> | Creates a pull-down menu or scrollable section menu |
| <textarea> | Creates a multi-line text input box |
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14ex01 Listing 14.1] is an example of an HTML form that shows off a number of different form controls. This is part of a hypothetical e-commerce system that enables the user to add a note card to what she's bought from the site. As with most examples, this is a bit contrived, but the purpose is to demonstrate how styles can be applied to HTML forms.
Listing 14.1. An HTML Form
<!-- form-14.1.html --><br /><html><br /><head><br /><title>Include a Note Card</title><br /></head><br /><body><br /><h1>Include a Note Card</h1><br /><form method="post" action="placeholder.php"><br /><p><label><input type="checkbox" id="gift" name="gift"<br />value="1"><br />Check this box if your order is a gift</label></p><br /><p><label for="sendername">Sender's Name:</label><br /><input type="text" name="sendername"<br />value="Your Name Here"<br />size="40" id="sendername"></p><br /><fieldset id="papercolorfieldset"><br /><legend>Color of Paper:</legend><br /><label><input type="radio" name="papercolor"<br />id="papercolorblue" value="blue"><br />Blue</label><br /><label><input type="radio" name="papercolor"<br />id="papercolorpink" value="pink"><br />Pink</label><br /><label><input type="radio" name="papercolor"<br />checked="checked"<br />id="papercolorwhite" value="white"><br />White</label><br /></fieldset><br /><p><label for="inkcolor">Ink Color:</label><br /><select name="inkcolor" id="inkcolor"><br /><option selected value="black">Black</option><br /><option value="navy">Navy Blue</option><br /><option value="maroon">Maroon</option><br /><option value="green">Green</option><br /><option value="gray">Gray</option><br /><option value="red">Red</option><br /></select></p><br /><p><label for="message">Card Message:<br /></label><br /><textarea id="message" name="message" rows="4"<br />cols="40">Type your message here.</textarea></p><br /><p><label for="font">Choose a Font:</label><br /><select name="font" id="font" size="4"><br /><option selected value="TimesNewRoman"><br />Times New Roman</option><br /><option value="Optima">Optima</option><br /><option value="Verdana">Verdana</option><br /><option value="Papyrus">Papyrus</option><br /><option value="MarkerFelt">Marker Felt</option><br /><option value="Arial">Arial</option><br /><option value="CourierNew">Courier New</option><br /></select></p><br /><p><button type="button" id="backbutton"<br />name="backbutton">⇐ Go Back</button><br /><input type="submit" id="submitbutton"<br />name="submitbutton" value="Submit Form"><br /><input type="reset" id="resetbutton"<br />name="resetbutton" value="Reset Form"></p><br /></form><br /></body><br /></html><br /> |
Without styles, this is a rather boring form, as shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14fig01 Figure 14.1]. Have no fear; it can be improved with CSS.
Labels, Fieldsets, and Legends
The labels for form elements are the easiest to style; they're not even form controls, just normal HTML blocks. The <label> tag, for labeling individual form controls, is an inline element and can be styled like any other inline element. The <fieldset> tag is a block element, used to group together related elements (such as a group of radio buttons), and the <legend> element serves as a label for a <fieldset>. These are shown by example in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14ex01 Listing 14.1]. As shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14fig01 Figure 14.1], the <fieldset> tag creates a border around the form controls it encloses, and <legend> is set as an introductory header. This styling convention isn't specified in the standards, but is ubiquitous in modern browsers.
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14ex02 Listing 14.2] is a style sheet that adds rules specifically to style the <label>, <fieldset>, and <legend> elements, as well as adding a border and font to the entire <form>.
Listing 14.2. A Style Sheet for Form Labels
/* labels-14.2.css */<br /><br />form { padding:0 0.5em;<br />margin: 0 0.5em;<br />border: 1px solid black;<br />font-family: Arial, sans-serif; }<br /><br />label { border: 1px dotted gray;<br />background-color: silver; }<br />label[for] { border: none; background-color: inherit;<br />float: left; width: 25%; }<br /><br />fieldset { margin-left: 25%; width: 60%; padding: 0; }<br />legend { color: white; background-color: black; }<br /> |
Linking the style sheet in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14ex02 Listing 14.2] to the HTML file in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14ex01 Listing 14.1] produces the effect shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14fig02 Figure 14.2]. You can use any styles with <form>, <label>, <fieldset>, or <legend> that you can use with any normal box elements in HTML, and this is well supported by the web browsers.
Text Input Fields
Text boxes are created by the <input type="text"> tag or by the <textarea> tag. The <input type="password"> tag creates a text box as well; any letters typed in it are shown as asterisks but are stored by the browser as data.
You can set the font, text color, and background color on a text box. Most browsers default to a white background with black text for text boxes, with <input type="text"> displaying in a serif font, and <textarea> in monospace (as shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14fig01 Figure 14.1]), but there are no hard and fast rules. Your CSS rules can override these browser defaults.
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14ex03 Listing 14.3] is a style sheet with rules for text fields.
Listing 14.3. Style Rules for Text Input Fields
/* textboxes-14.3.css */<br /><br />input[type="text"]<br />{ font-size: x-large; background-color: yellow;<br />font-variant: small-caps;<br />color: maroon; width: 60%;<br />padding-left: 1em; padding-right: 1em;<br />font-family: "Courier New", monospace; }<br /><br />textarea { font-family: cursive; width: 60%;<br />color: white; background-color: navy; }<br /> |
The style sheet also sets the padding and the text box width in one rule. In general, dimensions can be set reliably, but other box values (padding, margin, and border) are less reliable because of browser differences.
The results of applying this style sheet to the form in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14ex01 Listing 14.1] are shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14fig03 Figure 14.3]. The label style sheet from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14ex02 Listing 14.2] was also applied, because it makes the form look a little more tidy.
Buttons
A button in an HTML form does one of three things: submits, resets, or is a programmable button called a "push" button. A Submit button, when clicked by the user, sends the form data to the server. A Reset button restores the form to its original state, with fields that are either blank or preset to a default value by the form designer. A pushbutton has no predefined action associated with it; a JavaScript action needs to be attached to make the button do anything. See Bonus Web [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch01.html#ch01 Hour 1], "CSS and JavaScript," for more on the JavaScript language.
A button is created by the <input> tag or the <button> tag. There are three buttons in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14ex01 Listing 14.1], one of each type: Submit, Reset, and a programmable push button the "Go Back" button which, on a real form, could be tied to a JavaScript function. The style sheet in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14ex04 Listing 14.4] sets CSS values on these buttons.
Listing 14.4. Rules for Styling Form Buttons
/* buttons-14.4.css */<br />input[type="submit"]<br />{ font-style: oblique;<br />background-color: navy; color: white;<br />padding-left: 2em; padding-right: 2em; }<br />input[type="reset"]<br />{ font-family: cursive; background-color: white;<br />border: 3px solid blue; color: red;<br />margin-left: 25%; width: 300px; }<br />button { border-style: inset;<br />border-color: green;<br />padding: 10px; color: green; }<br /> |
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14fig04 Figure 14.4] shows the style sheet from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14ex04 Listing 14.4] applied to the HTML form in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14ex01 Listing 14.1], as well as the label styles from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14ex02 Listing 14.2].
Check Boxes
A check box in HTML is created by the <input type="checkbox"> tag, and is a simple binary switch: It is either off or on, like a light switch. Browsers display check boxes as square boxes that can be clicked, and when clicked, an "X" or a check mark appears in the box.
A radio button is one of a set of form controls that share the same name attribute, created by <input type="radio">. Only one radio button in a set can be checked at a time; selecting a new value deselects the previous setting. This is analogous to old-time analog car radios, which had push buttons that caused the tuner to jump to a new value. Browsers display radio buttons as circles with a dark dot in the selected value.
The <label> tag is used to provide a label for each type of check box. It can be either wrapped around a check box by containing the <input> tag that defines the check box, or set next to it with a for attribute designating which form control it labels. A set of radio buttons can be wrapped in a <fieldset> tag to group the <input> tags with an appropriate <legend> label.
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14ex05 Listing 14.5] is a style sheet that provides some style rules for the HTML form's check boxes.
Listing 14.5. A Style Sheet That Styles Check Boxes
/* checkradio-14.5.css */<br />input[type="checkbox"]<br />{ background-color: blue;<br />color: yellow;<br />font-size: xx-large;<br />width: 50px; border-style: solid; }<br />input[type="radio"]<br />{ background-color: lime;<br />color: orange;<br />font-size: small; }<br />input[checked]<br />{ color: black; background-color: silver;<br />width: 50px; }<br /> |
You can see the results of linking this style sheet (and the label styles from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14ex02 Listing 14.2]) to the HTML form in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14ex01 Listing 14.1] in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14fig05 Figure 14.5]. As you can see, most of the rules, such as the font-size and the color rules, have had almost no effect. The width rule has stretched out the check box and radio button, however. As you'll see later in this hour, Firefox is the only browser that does this; other browsers reserve more room for the check box, but leave the actual check box the same.
Directly styling a check box or radio button is not very useful because most browsers ignore such attempts. It is better to apply styles to the labels surrounding the check boxes.
Selection Lists
You form a selection list by wrapping the <select> tag around one or more <option> tags. If no size property is given, the selection list will be a pull-down list; if a size value is given, it will be a scrollable list showing as many lines as indicated by the size.
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14ex06 Listing 14.6] is a style sheet that gives a width to the two <select> tags in the example form, as well as setting various properties on the <option> elements.
Listing 14.6. Style Rules for Changing Selection List Options
/* select-14.6.css */<br />select { width: 60%; }<br />#inkcolor option { color: white; }<br />option[value="black"] { background-color: black; }<br />option[value="navy"] { background-color: navy; }<br />option[value="maroon"] { background-color: maroon; }<br />option[value="green"] { background-color: green; }<br />option[value="gray"] { background-color: gray; }<br />option[value="red"] { background-color: red; }<br />#font { border: none; background-color: silver;<br />padding: 1em 15%; height: 100px; }<br />#font option<br />{ text-align: center; border: 1px solid black;<br />margin: 3px 0; font-size: large;<br />background-color: white; }<br />option[value="TimesNewRoman"]<br />{ font-family: "Times New Roman", serif; }<br />option[value="Optima"]<br />{ font-family: Optima, sans-serif; }<br />option[value="Verdana"]<br />{ font-family: Verdana, sans-serif; }<br />option[value="Papyrus"]<br />{ font-family: Papyrus, fantasy; }<br />option[value="MarkerFelt"]<br />{ font-family: "Marker Felt", cursive; }<br />option[value="Arial"]<br />{ font-famiy: Arial, sans-serif; }<br />option[value="CourierNew"]<br />{ font-family: "Courier New", sans-serif; }<br /> |
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14fig06 Figure 14.6] shows [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14ex06 Listing 14.6] (and [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14ex02 Listing 14.2]) applied to the HTML form in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14ex01 Listing 14.1]. As you can see, the fonts and colors specified are used, as well as the box properties (padding, margins, borders) in the second <select> that sets the font choices.
Although this is a very neat effect, don't get too excited about it. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14fig06 Figure 14.6] was created with Firefox, which is the only browser to support restyling selection lists in this manner, as you'll see later this hour. Applying styles to <option> elements is fun, but not reliable.
| Try it Yourself: Styling a Simple Email Form
Create your own form to apply style rules and find out which your browsers fully support. Follow these steps:
|
./ ADD NAME=CH14LEV1SEC2.HTML
Browser Support for Form Styles
[wax ka badal]As noted earlier in this hour, browsers don't reliably style form elements in the same way, making certain stylesespecially on check boxes and selection listsvery hitand-miss in actual practice. Why is this?
The CSS specifications themselves are conspicuously silent on the issue of styling form controls. Form controls are considered part of the browser's user interface (UI), not actual content for manipulation by CSS rules. The way buttons, check boxes, and pull-down lists are displayed depends on the browser's UI scheme, which is based on the operating system's user interface. For example, the figures in this chapter were primarily shot on a computer running Mac OS X. If you are using a Windows computer, the appearance, shape, and size of your Submit button will look appropriate for your system, and not like those in the book.
This means that form controls fall into a no-man's-land in the specification; it is up to the browser programmers to decide to what extent the form controls can be reshaped with CSS. Each browser company has chosen a different solution, which makes form element styling inconsistent from browser to browser.
Firefox
Firefox (and any other Gecko-based browser) supports styling for most form controls, as seen earlier in this hour, with the exception of check boxes, which are minimally styled. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14fig07 Figure 14.7] shows the results of applying all five style sheets in this hour to [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch14lev1sec1.html#ch14ex01 Listing 14.1].
Opera
Opera is the only browser to allow extensive styling of check boxes; the color, background-color, and border properties are applied correctly, and the check box is not stretched out. However, Opera (as of version 8.5) doesn't allow restyling of selection boxes. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14fig08 Figure 14.8] shows all five style sheets linked to [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch14lev1sec1.html#ch14ex01 Listing 14.1]. Compare this with [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14fig07 Figure 14.7]; the font-variant and padding properties for the text input box aren't respected. (The <textarea> box is styled correctly, though, even though you can't see it in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14fig08 Figure 14.8] because of the pull-down menu.)
Safari
Safari's take on the five style sheets is shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14fig09 Figure 14.9]. Space is reserved for check boxes with width set, but they're not stretched as in Firefox. Note that only the button created with <button> is styled; the submit and reset button are unchanged. As with Opera, neither <select> menu is styled.
Internet Explorer
Internet Explorer 6 applies the fewest style rules from the five style sheets, as you can see in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14fig10 Figure 14.10]. Style rules are applied to the <textarea> box, but not the simple text box created by <input>. The width properties on the check boxes are ignored, and the styles for <select> menus aren't used. You can't add many styles to your forms in Internet Explorer 6.
You can use CSS rules to produce some very extensive changes in the appearance of form controls. On browsers supporting specific form styles, you can drastically change the appearance of Submit buttons, of selection lists, and other aspects of the HTML form elements. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14fig10 Figure 14.10] is vivid example of this.
But just because you can do something, that doesn't mean you should do it. Your web page visitors are used to standard forms, with the Submit and Reset buttons at the bottom of the form and the text input fields displayed in a standard font. The more changes you make with CSS rules to the appearance of your form, the more likely you are to throw off your users. When styling your form elements, don't confuse your users by going against their expectations unnecessarily. Use moderation and care when styling forms, and try to avoid making your form look anything like the demonstration form in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14fig10 Figure 14.10]!./ ADD NAME=CH14LEV1SEC3.HTML Summary
CSS rules can be written to style form elements, but the results of these rules are very browser dependent. Some browsers allow extensive restyling of form elements, whereas others are very restrictive.
Form labels can be styled easily because they are treated like any other HTML box element. Text input elements can be styled in most browsers; all modern browsers support fonts, colors, and background colors for <textarea>.
Buttons created with the <button> tag can be styled in all browsers; however, Submit and Reset buttons created with <input> are less consistent. Check box styles are ignored by most browsers, and only Firefox allows restyling of selection menu options.
./ ADD NAME=CH14LEV1SEC4.HTML Workshop
The workshop contains a Q&A section, quiz questions, and activities to help reinforce what you've learned in this hour. If you get stuck, the answers to the quiz can be found after the questions.
Q&A
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14qa1q1a1 Q.] | [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch14lev1sec1.html#ch14ex05 Listing 14.5] has a style rule for a checked radio button. Does this change the style dynamically if you select another radio button? |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14qa1q1 A.] | Nope. Browsers unfortunately don't work that way with HTML forms and CSS. To get that type of dynamic effect, try using JavaScript, as described in Bonus Web [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch01.html#ch01 Hour 1]. |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14qa1q2a2 Q.] | What's a ⇐ anyway? You use it in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch14lev1sec1.html#ch14ex01 Listing 14.1] but it shows up as a little rectangle in half the browsers. |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14qa1q2 A.] | The double left arrow symbol is represented in HTML by the ⇐ entity, and is part of HTML 4.01. A few browsers don't fully support all HTML entities, because they are naughty, naughty browsers. You can use the ← (left arrow) entity, which is better supported, or just leave it out of your web designs. |
Quiz
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14qa2q1a1 1.] | Which of the following tags does not create a submit button?
#
<submit value="Send it!">
|
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14qa2q2a2 2.] | You want to put a dotted, silver line under all form labels that enclose their associated form controls. You don't want any underlines on form labels that use for attributes to associate the label with the form control. How do you write this rule? |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14qa2q3a3 3.] | Which statements about browser support for form styling are true?
#
Only one browser lets you style selection list values separately.
|
Answers
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14qa2q1 1.] | (a). There is no <submit> tag in HTML. The others all create Submit buttons. |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14qa2q2 2.] | Here is one way you could do this, using two rules:
label { border-bottom: 1px dotted silver;}<br />label[for] { border-bottom: none; }<br />Remember that this won't work in Internet Explorer 6, which doesn't recognize attribute value selectors. All your labels will be underlined in Internet Explorer. |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch14qa2q3 3.] | Statements (a) and (c) are true, and statements (b) and (d) are false. |
Exercise
You are now able to add styles to your HTML forms. To get a better grasp on the browser support issues, create several different types of forms, and add styles to the labels, the text areas, and the form controls such as buttons and check boxes. Which styles not covered in this hour work reliably with each of these types of form elements? Build your forms in a way that the CSS enhances the usefulness for your website visitors.
./ ADD NAME=CH15.HTML