Part II: HTML Markup for Structure 156 The Great Form Control Round-up Radio and checkbox buttons Both checkbox and radio buttons make it simple for your visitors to choose from a number of provided options. They are similar in that they function like little on/off switches that can be toggled by the user and are added using the input element. They serve distinct functions, however. A form control made up of a collection of radio buttons is appropriate when only one option from the group is permitted, or, in other words, when the selections are mutually exclusive (such as Yes or No, or Male or Female). When one radio button is “on,” all of the others must be “off,” sort of the way buttons used to work on old radios—press one button in and the rest pop out. When checkboxes are grouped together, however, it is possible to select as many or as few from the group as desired. This makes them the right choice for lists in which more than one selection is okay. Radio buttons <input type="radio" /> Radio button Radio buttons are added to a form with the input element with the type attribute set to radio. The name attribute is required. Here is the syntax for a minimal radio button: <input type="radio" name="variable" /> In this example, radio buttons are used as an interface for users to enter their age group (a person can’t belong to more than one age group, so radio but- tons are the right choice). Figure 9-8 shows how radio buttons are rendered in the browser. <fieldset> <legend>How old are you?</legend> <ol> <li><label><input type="radio" name="age" value="under24" checked="checked" /> under 24</label></li> <li><label><input type="radio" name="age" value="25-34" /> 25 to 34 </label></li> <li><label><input type="radio" name="age" value="35-44" /> 35 to 44 </label></li> <li><label><input type="radio" name="age" value="over45" /> 45+ </label></li> </ol> </fieldset> Notice that all of the input elements have the same variable name (“age”), but their values are different. Because these are radio buttons, only one button can be checked at a time, and therefore, only one value will be sent to the server for processing when the form is submitted. N ot e In XHTML documents, the value of the checked attribute must be explicitly set to checked, as shown in the example. In HTML documents, you don’t need to write out the value for the checked attribute. It can be minimized, as shown here: <input type="radio" name="foo" checked /> The examples in this chapter follow XHTML syntax in which all attributes have explicit values. N ot e In XHTML documents, the value of the checked attribute must be explicitly set to checked, as shown in the example. In HTML documents, you don’t need to write out the value for the checked attribute. It can be minimized, as shown here: <input type="radio" name="foo" checked /> The examples in this chapter follow XHTML syntax in which all attributes have explicit values. The Great Form Control Round-up Chapter 9, Forms 157 Radio buttons Checkbox buttons Figure 9-8. Radio buttons (left) are appropriate when only one selection is permitted. Checkboxes (right) are best when users may choose any number of choices, from none to all of them. You can decide which button is checked when the form loads by adding the checked attribute to the input element. In this example, the button next to “under 24” will be checked by default. Also notice in this example that both the button input and its text label are contained in a single label element. The advantage to this method is that users may click anywhere on the whole label to select the button. Checkbox buttons <input type="checkbox" /> Checkbox button Checkboxes are added using the input element with its type set to checkbox. As with radio buttons, you create groups of checkboxes by assigning them the same name value. The difference, as we’ve already noted, is that more than one checkbox may be checked at a time. The value of every checked button will be sent to the server when the form is submitted. Here is an example of a group of checkbox buttons used to indicate musical interests. Figure 9-8 shows how they look in the browser: <fieldset> <legend>What type of music do you listen to?</legend> <ul> <li><label><input type="checkbox" name="genre" value="punk" checked="checked" /> Punk rock</label></li> <li><label><input type="checkbox" name="genre" value="indie" checked="checked" /> Indie rock</label></li> <li><label><input type="checkbox" name="genre" value="techno" /> Techno </label></li> <li><label><input type="checkbox" name="genre" value="rockabilly" /> Rockabilly</label></li> </ul> </fieldset> Checkboxes don’t necessarily need to be used in groups, of course. In this example, a single checkbox is used to allow visitors to opt in for special pro- motions. The value of the control will only be passed along to the server if the user checks the box. <p><input type="checkbox" name="optin" value="yes" /> Yes, send me news and special promotions by email.</p> N ot e This list of options has been marked up semantically as an unordered list because the order of the options is not significant. N ot e This list of options has been marked up semantically as an unordered list because the order of the options is not significant. Part II: HTML Markup for Structure 158 The Great Form Control Round-up In Exercise 9-2, you’ll get a chance to add both radio and checkbox buttons to the contest entry form. Menus Another option for providing a list of choices is to put them in a pull-down or scrolling menu. Menus tend to be more compact than groups of buttons and checkboxes. <select> </select> Menu control <option> </option> An option within a menu <optgroup> </optgroup> A logical grouping of options within a menu You add both pull-down and scrolling menus to a form with the select element. Whether the menu pulls down or scrolls is the result of how you specify its size and whether you allow more than one option to be selected. Let’s take a look at both menu types. The next two questions in the sneaker contest entry form use radio buttons and checkboxes for selecting options. Open the contest_entry.html document and follow these steps. Before we start working on the buttons, group the Color, Features, and Size questions in a fieldset with the legend “Custom Shoe Design.” <h2>Design your custom Forcefields:</h2> <fieldset> <legend>Custom Shoe Design</legend> Color Features Size </fieldset> Create another fieldset just for the Color options, using the description as the legend as shown here. Also mark up the options as an unordered list. <fieldset> <legend>Color <em>(choose one)</em>:</legend> <ul> <li>Red</li> <li>Blue</li> <li>Black</li> <li>Silver</li> </ul> </fieldset> 1. 2. With the structure in place, now we can add the form controls. The Color options should be radio buttons because shoes can be only one color. Insert a radio button before each option, and while you’re at it, associate each with its respective label by putting both in a single label element. Follow this example for the remaining color options. <li><label><input type="radio" name="color" value="red" /> Red</label></li> Mark up the Features options as you did the Color options, creating a fieldset, legend, and unordered list. This time, however, the type will be checkbox . Be sure the variable name for each is “features,” and that the metallic logo option is preselected as noted on the sketch. Save the document and check your work by opening it in a browser to make sure it looks right, then submit the form to make sure it’s functioning properly. 3. 4. 5. exercise 9-2 | Adding radio buttons and checkboxes The next two questions in the sneaker contest entry form use radio buttons and checkboxes for selecting options. Open the contest_entry.html document and follow these steps. Before we start working on the buttons, group the Color, Features, and Size questions in a fieldset with the legend “Custom Shoe Design.” <h2>Design your custom Forcefields:</h2> <fieldset> <legend>Custom Shoe Design</legend> Color Features Size </fieldset> Create another fieldset just for the Color options, using the description as the legend as shown here. Also mark up the options as an unordered list. <fieldset> <legend>Color <em>(choose one)</em>:</legend> <ul> <li>Red</li> <li>Blue</li> <li>Black</li> <li>Silver</li> </ul> </fieldset> 1. 2. With the structure in place, now we can add the form controls. The Color options should be radio buttons because shoes can be only one color. Insert a radio button before each option, and while you’re at it, associate each with its respective label by putting both in a single label element. Follow this example for the remaining color options. <li><label><input type="radio" name="color" value="red" /> Red</label></li> Mark up the Features options as you did the Color options, creating a fieldset, legend, and unordered list. This time, however, the type will be checkbox . Be sure the variable name for each is “features,” and that the metallic logo option is preselected as noted on the sketch. Save the document and check your work by opening it in a browser to make sure it looks right, then submit the form to make sure it’s functioning properly. 3. 4. 5. exercise 9-2 | Adding radio buttons and checkboxes The Great Form Control Round-up Chapter 9, Forms 159 Pull-down menus The select element displays as a pull-down menu by default when no size is specified or if the size attribute is set to 1. In pull-down menus, only one item may be selected. Here’s an example (shown in Figure 9-9): <label for="form-fave">What is your favorite 80s band?<label><br /> <select name="EightiesFave" id="form-fave"> <option>The Cure</option> <option>Cocteau Twins</option> <option>Tears for Fears</option> <option>Thompson Twins</option> <option value="EBTG">Everything But the Girl</option> <option>Depeche Mode</option> <option>The Smiths</option> <option>New Order</option> </select> You can see that the select element is just a container for a number of option elements. The content of the chosen option element is what gets passed to the web application when the form is submitted. If for some reason you want to send a different value than what appears in the menu, use the value attribute to provide an overriding value. For example, if someone selects “Everything But the Girl” from the sample menu, the form submits the value “EBTG” for the “EightiesFave” variable. You will make a menu like this one for selecting a shoe size in Exercise 9-3. Scrolling menus To make the menu display as a scrolling list, simply specify the number of lines you’d like to be visible using the size attribute. This example menu has the same options as the previous one, except it has been set to display as a scrolling list that is six lines tall (Figure 9-10). <label f0r="EightiesBands">What 80s bands did you listen to?</label> <select name="EightiesBands" size="6" multiple="multiple" f0r="EightiesBands"> <option>The Cure</option> <option>Cocteau Twins</option> <option selected="selected">Tears for Fears</option> <option selected="selected">Thompson Twins</option> <option value="EBTG">Everything But the Girl</option> <option>Depeche Mode</option> <option>The Smiths</option> <option>New Order</option> </select> You may notice a few new attributes tucked in there. The multiple attribute allows users to make more than one selection from the scrolling list. Note that pull-down menus do not allow multiple selections; when the browser detects the multiple attribute, it displays a small scrolling menu automati- cally by default. Figure 9-9. Pull-down menus pop open when the user clicks on the arrow or bar. Figure 9-9. Pull-down menus pop open when the user clicks on the arrow or bar. Figure 9-10. A scrolling menu with multiple options selected. Figure 9-10. A scrolling menu with multiple options selected. N ot e The multiple and selected attributes can be minimized in HTML, as we saw for the checked attribute earlier in this chapter. N ot e The multiple and selected attributes can be minimized in HTML, as we saw for the checked attribute earlier in this chapter. Part II: HTML Markup for Structure 160 The Great Form Control Round-up Use the selected attribute in an option element to make it the default value for the menu control. Selected options are highlighted when the form loads. The selected attribute can be used with pull-down menus as well. Grouping menu options You can use the optgroup element to create conceptual groups of options. The required label attribute in the optgroup element provides the heading for the group. Figure 9-11 shows how option groups are rendered in modern browsers. <select name="icecream" multiple="multiple"> <optgroup label="traditional"> <option>vanilla</option> <option>chocolate</option> </optgroup> <optgroup label="fancy"> <option>Super praline</option> <option>Nut surprise</option> <option>Candy corn</option> </optgroup> </select> N ot e The label attribute in the option element is not the same as the label element used to improve accessibility. Figure 9-11. Option groups as rendered in a modern browser. Figure 9-11. Option groups as rendered in a modern browser. exercise 9-3 | Adding a menu The only other control that needs to be added to the contest entry is a pull-down menu for selecting a shoe size. First, delimit the Size question in a fieldset with “Size” as the legend. This time, a list doesn’t make sense, so mark the line up as a paragraph. <fieldset> <legend>Size<legend> <p>Sizes reflect standard men's sizes:</p> </fieldset> Insert a select menu element with the shoe sizes (5 to 13), and explicitly associate it with its label (using “for/id”). <p><label for="size">Size (sizes reflect men's sizing):</label> <select name="size" id="size"> <option>5</option> insert more options here </select> </p> Save the document and check it in a browser. You can submit the form, too, to be sure that it’s working. You should get the Thank You response page listing all of the information you entered in the form. Congratulations! You’ve built your first working web form. 1. 2. 3. exercise 9-3 | Adding a menu The only other control that needs to be added to the contest entry is a pull-down menu for selecting a shoe size. First, delimit the Size question in a fieldset with “Size” as the legend. This time, a list doesn’t make sense, so mark the line up as a paragraph. <fieldset> <legend>Size<legend> <p>Sizes reflect standard men's sizes:</p> </fieldset> Insert a select menu element with the shoe sizes (5 to 13), and explicitly associate it with its label (using “for/id”). <p><label for="size">Size (sizes reflect men's sizing):</label> <select name="size" id="size"> <option>5</option> insert more options here </select> </p> Save the document and check it in a browser. You can submit the form, too, to be sure that it’s working. You should get the Thank You response page listing all of the information you entered in the form. Congratulations! You’ve built your first working web form. 1. 2. 3. The Great Form Control Round-up Chapter 9, Forms 161 File selection control Web forms can collect more than just data. They can also be used to transmit external documents from a user’s hard drive. For example, a printing company could use a web form to receive artwork for a business card order. A magazine could use a form on their site to collect digital photos for a photo contest. The file selection control makes it possible for users to select a document from the hard drive to be submitted with the form data. It is added to the form using our old friend the input element with its type set to file. <input type="file" /> File selection field The browser displays a “file” input as a text field with a button that allows the user to navigate the hard drive and select the file for upload. The markup sample below and Figure 9-12 shows a file selection control used for photo submissions. <form action="/client.php" method="post" enctype="multipart/form-data"> <p><label for="form-photo">Send a photo to be used as your online icon (optional):</label><br /> <input type="file" name="photo" size="28" id="form-photo" /></p> </form> It is important to note that when a form contains a file selection input ele- ment, you must specify the encoding type (enctype) of the form as multi- part/form-data and use the POST method. The size attribute in this example sets the character width of the text field. Figure 9-12. A file selection form field. Hidden controls There may be times when you need to send information to the form process- ing application that does not come from the user. In these instances, you can use a hidden form control that sends data when the form is submitted, but is not visible when the form is displayed in a browser. <input type="hidden" /> File selection field Hidden controls are added using the input element with the type set to hid- den. Its sole purpose is to pass a name/value pair to the server when the form Part II: HTML Markup for Structure 162 Form Layout and Design is submitted. In this example, a hidden form element is used to provide the location of the appropriate thank you document to display when the transac- tion is complete. <input type="hidden" name="success-link" value="http://www.example.com/ littlechair_thankyou.html" /> I’ve worked with forms that have had dozens of hidden controls in the form element before getting to the parts that the user actually fills out. This is the kind of information you get from the application programmer, system administrator, or whoever is helping you get your forms processed. If you are using a canned script, be sure to check the accompanying instructions to see if any hidden form variables are required. That rounds out the form control round-up. Learning how to insert form controls is one part of the forms production process, but you have to consider the design, layout, and appearance of the form as well. Form Layout and Design I can’t close this chapter without saying a few words about form design, even though the chapters in this (X)HTML section are not concerned with presentation. You can use Cascading Style Sheets to alter the font, size, and color of form labels and controls as you would any other element. Just refining the look of controls will go a long way toward giving your forms a look that is consistent with the rest of your site. The real challenge to formatting forms is alignment. In the past, tables were used to bring alignment and balance to form components. However, using data table elements for page layout is considered a no-no in this age of semantic markup. You can certainly achieve the same alignment effects using Cascading Style Sheets alone. The strategy is to float labels and input element so they appear next to one another on a given indent. Unfortunately, it requires some CSS moves that are beyond the scope of this book, although you will learn the fundamental concepts in Chapter 15, Floating and Positioning. A web search for “form alignment with CSS” will turn up plenty of online tutorials. Test Yourself Ready to put your web form know-how to the test? Here are a few questions to make sure you got the basics. Decide whether each of these forms should be sent via the GET or POST method: A form for accessing your bank account online ________ 1. WA R N I N G Fieldsets and legends tend to throw some curve-balls when it comes to styling. For example, background colors in fieldsets are handled differently from browser to browser. Legends are unique in that their text doesn’t wrap. Be sure to do lots of testing if you style these form elements. WA R N I N G Fieldsets and legends tend to throw some curve-balls when it comes to styling. For example, background colors in fieldsets are handled differently from browser to browser. Legends are unique in that their text doesn’t wrap. Be sure to do lots of testing if you style these form elements. Designing Forms You may want to check out these articles at A List Apart that address form usability and styling. “Sensible Forms: A Form Usability Checklist,” by Brian Crescimanno (www.alistapart.com/articles/ sensibleforms) “Prettier Accessible Forms,” by Nick Rigby (www.alistapart.com/ articles/prettyaccessibleforms) F O R F U R t H e R R e A D I n G Designing Forms You may want to check out these articles at A List Apart that address form usability and styling. “Sensible Forms: A Form Usability Checklist,” by Brian Crescimanno (www.alistapart.com/articles/ sensibleforms) “Prettier Accessible Forms,” by Nick Rigby (www.alistapart.com/ articles/prettyaccessibleforms) F O R F U R t H e R R e A D I n G (X)HTML Review: Forms Chapter 9, Forms 163 A form for sending t-shirt artwork to the printer ________ A form for searching archived articles ________ A form for collecting long essay entries ________ Which form control element is best suited for the following tasks? When the answer is “input,” be sure to also include the type. Some tasks may have more than one correct answer. Choose your astrological sign from 12 signs. Indicate whether you have a history of heart disease (yes or no). Write up a book review. Select your favorite ice cream flavors from a list of eight flavors. Select your favorite ice cream flavors from a list of 25 flavors. Each of these markup examples contains an error. Can you spot what it is? <input name="country" value="Your country here." /> <checkbox name="color" value="teal" /> <select name="popsicle"> <option value="orange" /> <option value="grape" /> <option value="cherry" /> </select> <input type="password" /> <textarea name="essay" height="6" width="100">Your story.</textarea> (X)HTML Review: Forms We covered this impressive list of elements and attributes related to forms in this chapter: Element and attributes Description button Generic input button name="text" Supplies a unique variable name for the control value="text" Specifies the value to be sent to the server type="submit|reset|button" The type of custom button fieldset Groups related controls and labels 2. 3. N ot e The id attribute can be used with any of these elements to give a unique name (also called an id reference). N ot e The id attribute can be used with any of these elements to give a unique name (also called an id reference). Part II: HTML Markup for Structure 164 (X)HTML Review: Forms Element and attributes Description form Form element action="url" Location of forms processing program (required) id="text" Gives the form a unique name (“id reference”) method="get|post" The method used to submit the form data enctype="content type" The encoding method, generally either application/x-www-form-urlen- coded (default) or multipart/form-data input Creates a variety of controls, based on the type value type="text|password|checkbox|radio|submit| reset|file|hidden|image button" The type of input checked="checked" Preselects a checkbox or radio button disabled="disabled" Disables the control so it cannot be selected maxlength="number" The maximum number of characters that can be entered into a text, password, or file text field name="text" Supplies a unique variable name for the control readonly="readonly" Makes the control unalterable by the user size="number" The character width of a text, password, or file field value="text" Specifies the value to be sent to the server label Attaches information to controls for="text" Identifies the associated control by its id reference legend Assigns a caption to a fieldset optgroup Defines a group of options label="text" Supplies label for a group of option disabled="disabled" Disables the option so it cannot be selected option An option within a select menu control disabled="disabled" Disables the option so it cannot be selected label="text" Supplies an alternate label for the option selected="selected" Preselects the option value="text" Supplies an alternate value for the option select Pull-down menu or scrolling list disabled="disabled" Disables the control so it cannot be selected multiple="multiple" Allows multiple selctions in a scrolling list name="text" Supplies a unique variable name for the control readonly="readonly" Makes the control unalterable by the user size="number" The height of the scrolling list in text lines textarea Multi-line text entry field cols="number" The width of the text area in characters disabled="disabled" Disables the control so it cannot be selected name="text" Supplies a unique variable name for the control readonly="readonly" Makes the control unalterable by the user rows="number" The height of the text area in text lines 165 IN THIS CHAPTER The history of HTML The three versions of HTML: Strict, Transitional, and Frameset Introduction to XHTML and its stricter syntax requirements Using Document Type (DOCTYPE) Declarations Standards vs. Quirks mode in browsers Validating your markup Indicating a document’s character encoding I’m going to warn you right now this is a big, geeky chapter full of some pretty dry material. But I know you can handle it. If you have any notion of doing web development professionally, you’ll be required to know it. Even if you don’t, it’s important stuff. Professional web designers know that the best way to ensure consistency and accessibility across multiple browsers and devices is to write standards compliant web documents. Standards compliance simply means that your documents abide by all of the rules in the latest Recommendations published by the World Wide Web Consortium (the W3C). That includes HTML and XHTML for markup, but also other standards for style sheets (CSS) and accessibility. This chapter covers what it takes to get compliant. It gets into the nitty- gritty on HTML and XHTML and their various versions. It begins with a fair amount of story-telling, painting the picture of (X)HTML’s past, present, and future. Once you have a feel for the big picture, the markup requirements that follow will make a lot more sense. So sit back and enjoy the tale of HTML and XHTML. (If you’re thinking, “C’mon! I don’t have time for this just tell me what I need to put in my document!” then you can skip to the last section in this chapter, Putting It All Together, for the bottom line.) Everything You’ve Wanted to Know About HTML But Were Afraid to Ask By now you’re familiar with (X)HTML—you’ve even gotten handy with it. But did you know that there have been many versions of HTML since its creation by Tim Berners-Lee in 1991? The quick rundown that follows sums up HTML’s journey and should provide some useful context for where we are today. Read the sidebar, HTML Version History, for more details. HTML and what we know as the Web got their start at a particle physics lab ( CERN) in Switzerland where Tim Berners-Lee had an idea for sharing research documents via a hypertext system. Instead of inventing a method UNDERSTANDING THE STANDARDS CHAPTER 10 . fieldset with the legend “Custom Shoe Design. ” <h2> ;Design your custom Forcefields:</h2> <fieldset> <legend>Custom Shoe Design& lt;/legend> Color Features Size. fieldset with the legend “Custom Shoe Design. ” <h2> ;Design your custom Forcefields:</h2> <fieldset> <legend>Custom Shoe Design& lt;/legend> Color Features Size. round-up. Learning how to insert form controls is one part of the forms production process, but you have to consider the design, layout, and appearance of the form as well. Form Layout and Design I