Placing Radio Buttons on a Form

When you want the Web site visitor to choose only a single item from a list of items, create the list on the form by inserting a <input> tag with the type attribute set to “radio” for each item in the list. As is the case with the labels on other form elements, the text before and/or after the radio buttons on a form are not a part of the radio button HTML. The <input> tag for each radio button does however have the following attributes:

• type: Set to “radio” to let the Web browser know that the form element is a radio button.

• id: Used to assign a unique name to a radio button. You can use the value of the id attribute to refer to the selected status of a specific radio button in a script embedded in the Web page HTML.

• name: A name used to identify a group of radio buttons. The Web browser passes the name of the button group and the value of the selected radio button’s value attribute as a name/value pair to the Web browser when the visitor clicks Submit. If the visitor does not select one of the radio buttons in the button group (as defined by the name given to the radio buttons in the group), the Web browser will not pass a name/value pair for the group to the Web server.

• value: Text string passed to the Web server as the “value” portion of the name/value pair if the site visitor clicks the radio button to select it. The Web browser sends only the name and value (that is, the name/value pair) of the one selected radio button in each button group to the Web server when the visitor clicks Submit.

• checked: By including the checked attribute in the <input> tag for a radio button, you tell the Web browser to select the radio button when it draws the form (and each time the site visitor clicks Reset). In the current example, the third-to-last line of code tells the Web browser to select the No radio button in the ShareEmail button group.

The <input> tags with the type attribute set to “radio” in the current example tell the Web browser to place two radio buttons in the button group ShareEmail on a form named ExampleForm. The Web browser makes sure that the site visitor selects only one of the radio buttons in a button group. (The Web browser considers all the radio buttons with the same value for the name attribute to be in the same button group.) When the visitor clicks a radio button in a button group, the Web browser clears the button group’s previous selection (if any), and puts a black dot in the radio button the visitor clicked to make that radio button the button group’s selected item. (Unlike a check marked check box, clicking a currently selected radio button does not clear the selection.)