Creating Radio Buttons

Best javascript editor debugger Ajax website
↑

Main Page

Creating Radio Buttons

Remember those old-time car radios with big black plastic buttons? Push one to listen to WFCR; push another for WRNX. You can never push two buttons at once. Radio buttons on forms work the same way (except you can't listen to the radio).

Figure 17.23. The `name` attribute serves a dual purpose for radio buttons: it links the radio buttons in a given set and it identifies the value when it is sent to the script. The `value` attribute is crucial since the visitor has no way of typing a value.

To create a radio button:

1.	If desired, type the introductory text for your radio buttons. You might use something like `Select one of the following`.
2.	Type `<input type="radio"`.
3.	Type `name="radioset"`, where radioset both identifies the data sent to the script and also links the radio buttons together, ensuring that only one per set can be checked.
4.	Type `value="data"`, where data is the text that will be sent to the server if the radio button is checked, either by you (in step 5) or by the visitor.
5.	If desired, type `checked="checked"` to make the radio button active by default when the page is opened. You can only do this to one radio button in the set. (The `="checked"` is optional in HTML.)
6.	Type the final `/>`.
7.	Type the text that identifies the radio button to the visitor. This is often the same as `value`, but doesn't have to be.
8.	Repeat steps 27 for each radio button in the set. Figure 17.24. This CSS positions the labels absolutely, just as in Figure 17.21. Then it gives the first radio button and any radio button after a `br` element a 9 em margin. The remaining radio buttons get 1 em margins. Figure 17.25. The radio buttons themselves are created with the (X)HTML tags. The labels (King, Queen, etc.) are created with plain text alongside the (X)HTML tags.

Tip

If you don't set the value attribute, the word "on" is sent to the script. It's not particularly useful since you can't tell which button in the set was pressed.

Best javascript editor debugger Ajax website
→

Creating Radio Buttons

Figure 17.23. The name attribute serves a dual purpose for radio buttons: it links the radio buttons in a given set and it identifies the value when it is sent to the script. The value attribute is crucial since the visitor has no way of typing a value.

Figure 17.24. This CSS positions the labels absolutely, just as in Figure 17.21. Then it gives the first radio button and any radio button after a br element a 9 em margin. The remaining radio buttons get 1 em margins.

Figure 17.25. The radio buttons themselves are created with the (X)HTML tags. The labels (King, Queen, etc.) are created with plain text alongside the (X)HTML tags.

Figure 17.23. The `name` attribute serves a dual purpose for radio buttons: it links the radio buttons in a given set and it identifies the value when it is sent to the script. The `value` attribute is crucial since the visitor has no way of typing a value.

Figure 17.24. This CSS positions the labels absolutely, just as in Figure 17.21. Then it gives the first radio button and any radio button after a `br` element a 9 em margin. The remaining radio buttons get 1 em margins.