Creating radio buttons

Radio buttons are used for allowing the user to select an option from a list of choices. A radio button is created with the <input> tag and the type attribute set to "radio", as shown below:

<input type="radio">, which produces .

Note to make sure the user can select a radio button, we need to make sure that we add the name attribute to the <input> tag. Since we do not have the name attribute in the above example, it cannot be selected. In the following example, we use the name attribute:

Select gender:
<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female

which will produce:

Select gender:
Male
Female

To ensure that the user selects an option before the user submits the form, make one of your radio buttons checked by default by adding the checked attribute. The following shows the example by using the previous gender example:

Select gender:
<input type="radio" name="gender" checked> Male
<input type="radio" name="gender"> Female

to produce

Select gender:
Male
Female

When you process the form, it is important to know which option the user selected. Otherwise, you won't know what the user selected. To determine which gender the user selected, you can use the value attribute with each radio button.

Select gender:
<input type="radio" name="gender" checked value="M"> Male
<input type="radio" name="gender" value="F"> Female