Various input controls are available for retrieving information from the user. You've already learned about some text entry options for forms. The next few sections introduce you to most of the remaining form input options you can use to design forms. Check BoxesThe simplest input type is a check box, which appears as a small square the user can select or deselect by clicking; a check box functions as an on/off switch. You must give each check box a name via the name attribute. If you want a check box to be checked by default when the form comes up, include the checked attribute. For example, the following code creates two check boxes: <input type="checkbox" name="baby" checked="checked" />Baby Grand Piano<br /> <input type="checkbox" name="mini" />Mini Piano Stool
The check box labeled Baby Grand Piano is checked in this example. (The user would have to click it to turn it off if he didn't want a piano.) The one marked Mini Piano Stool would be unchecked to begin with, so the user would have to click it to turn it on. When the form is submitted, selected check boxes appear in the form result: baby=on Blank (deselected) check boxes do not appear in the form output at all.
Radio ButtonsRadio buttons, for which only one choice can be selected at a time, are almost as simple to implement as check boxes. Just use type="radio" and give each of the options its own <input /> tag, but use the same name for all the radio buttons in a group: <input type="radio" name="card" value="v" checked="checked" /> Visa<br /> <input type="radio" name="card" value="m" /> MasterCard The value can be any name or code you choose. If you include the checked attribute, that button is selected by default. (No more than one radio button with the same name can be checked.) If the user selects MasterCard from the preceding radio button set, the following is included in the form submission to the server script: card=m If the user doesn't change the default checked selection, card=v is sent instead. Selection ListsBoth scrolling lists and pull-down pick lists are created with the <select> tag. You use this tag together with the <option> tag, as this example reveals: <select name="extras" size="3" multiple="multiple"> <option selected="selected">Electric windows</option> <option>AM/FM Radio</option> <option>Turbocharger</option> </select> No HTML tags other than <option> and </option> should appear between the <select> and </select> tags. Unlike the text input type, the size attribute here determines how many items show at once on the selection list. If size="2" were used in the preceding code, only the first two options would be visible, and a scrollbar would appear next to the list so that the user could scroll down to see the third option. Including the multiple attribute allows users to select more than one option at a time, and the selected attribute makes an option initially selected by default. The actual text that accompanies selected options is returned when the form is submitted. If the user selected Electric windows and Turbocharger, for instance, the form results would include the following lines: extras=Electric windows extras=Turbocharger (As I cautioned you earlier with regard to the checked attribute, XHTML requires you to use multiple="multiple" and selected="selected".)
Text AreasThe <input type="text"> attribute mentioned earlier allows the user to enter only a single line of text. When you want to allow multiple lines of text in a single input item, use the <textarea> and </textarea> tags instead. Any text you include between these two tags is displayed as the default entry. Here's an example: <textarea name="comments" rows="4" cols="20">Please send more information. </textarea> As you probably guessed, the rows and cols attributes control the number of rows and columns of text that fit in the input box. The cols attribute is a little less exact than rows, and approximates the number of characters that fit in a row of text. Text area boxes do have a scrollbar, however, so the user can enter more text than fits in the display area. |