19.5 Check Boxes and Radio Buttons

19.5 Check Boxes and Radio Buttons

Check boxes and radio buttons are useful controls for allowing the user to select among a set of predefined choices. Although check boxes can be selected or deselected individually, radio buttons can be grouped so that only a single member of the group can be selected at a time.

Check Boxes

HTML Element: <INPUT TYPE="CHECKBOX" NAME ="..." ...> (No End Tag)

Attributes: NAME (required), VALUE , CHECKED , ONCLICK , ONFOCUS , ONBLUR

This input element creates a check box whose name/value pair is transmitted only if the check box is checked when the form is submitted. For instance, the following code results in the check box shown in Figure 19-14.

 <P> <INPUT TYPE="CHECKBOX" NAME="noEmail" CHECKED> Check here if you do <I>not</I> want to get our email newsletter 

Figure 19-14. An HTML check box.

Note that the descriptive text associated with the check box is normal HTML, and care should be taken to guarantee that it appears next to the check box. Thus, the <P> in the preceding example ensures that the check box isn't part of the previous paragraph.

Core Approach

Paragraphs inside a FORM are filled and wrapped just like regular paragraphs. So, be sure to insert explicit HTML markup to keep input elements with the text that describes them.

NAME

This attribute supplies the name that is sent to the server. The NAME attribute is required for standard HTML check boxes but is optional when used with JavaScript.

VALUE

The VALUE attribute is optional and defaults to on . Recall that the name and value are sent to the server only if the check box is checked when the form is submitted. For instance, in the preceding example, noEmail=on would be added to the data string since the box is checked, but nothing would be added if the box was unchecked. As a result, servlets, JSP pages, or other server-side programs often check only for the existence of the check box name (e.g., that request.getParameter returns non- null ), ignoring its value.

CHECKED

If the CHECKED attribute is supplied, then the check box is initially checked when the associated Web page is loaded. Otherwise, it is initially unchecked.

ONCLICK, ONFOCUS, and ONBLUR

These attributes supply JavaScript code to be executed when the button is clicked, receives the input focus, and loses the focus, respectively.

Radio Buttons

HTML Element: <INPUT TYPE="RADIO" NAME="..." VALUE="..." ...> (No End Tag)

Attributes: NAME (required), VALUE (required), CHECKED , ONCLICK , ONFOCUS , ONBLUR

Radio buttons differ from check boxes in that only a single radio button in a given group can be selected at any one time. You indicate a group of radio buttons by providing all of them with the same NAME . Only one button in a group can be depressed at a time; selecting a new button when one is already selected results in the previous choice becoming deselected. The value of the one selected is sent when the form is submitted. Although radio buttons technically need not appear near to each other, this proximity is almost always recommended.

An example of a radio button is shown in Listing 19.7. Because input elements are wrapped as part of normal paragraphs, a DL list is used to make sure that the buttons appear under each other in the resultant page and are indented from the heading above them. Figure 19-15 shows the result. In this case, creditCard=java would get sent as part of the form data when the form is submitted.

Listing 19.7 Example of a radio button group

 <DL>   <DT>Credit Card:   <DD><INPUT TYPE="RADIO" NAME="creditCard" VALUE="visa">       Visa   <DD><INPUT TYPE="RADIO" NAME="creditCard" VALUE="mastercard">       Master Card   <DD><INPUT TYPE="RADIO" NAME="creditCard"              VALUE="java" CHECKED>       Java Smart Card   <DD><INPUT TYPE="RADIO" NAME="creditCard" VALUE="amex">       American Express   <DD><INPUT TYPE="RADIO" NAME="creditCard" VALUE="discover">       Discover </DL> 

NAME

Unlike the NAME attribute of most input elements, this NAME attribute is shared by multiple elements. All radio buttons associated with the same name are grouped logically so that no more than one can be selected at any given time. Note that attribute values are case sensitive, so the following would result in two radio buttons that are not in the same group.

 <INPUT TYPE="RADIO"  NAME="Foo"  VALUE="Value1"> <INPUT TYPE="RADIO"  NAME="FOO"  VALUE="Value2"> 

Core Warning

Be sure the NAME attribute of each radio button in a logical group matches that of the other group members exactly, including case.

VALUE

The VALUE attribute supplies the value that gets transmitted with NAME when the form is submitted. It doesn't affect the appearance of the radio button. Instead, normal text and HTML markup are placed around the radio button, just as with check boxes.

CHECKED

If the CHECKED attribute is supplied, then the radio button is initially checked when the associated Web page is loaded. Otherwise, it is initially unchecked.

ONCLICK, ONFOCUS, and ONBLUR

These attributes specify JavaScript code to be executed when the button is clicked, receives the input focus, and loses the focus, respectively.

Figure 19-15. Radio buttons in HTML.