Webmaster Resources Center

Welcome to the Bravenet Resource Center. Use these resources to help make your web pages more advanced and fun to use.

Forms Tutorials

Radio Buttons

The radiobutton is used to give a visitor the ability to choose one option from a selection of many options. This is very handy for creating polls, surveys and anything else that requires visitors to choose one option from a list of pre-defined choices.

The radiobutton uses a standard <input> tag defined with its own special 'type'. It has several attributes that should be defined for best results:

  1. TYPE - specify the type of input to use for this field
  2. NAME - unique name to identify and group this field
  3. VALUE - assign what this field should represent

Let's write a basic radiobutton input tag, step by step, to show how the tag is correctly coded. First we start with the opening input tag:

<input

Next we need to define what sort of input field we want to use. In this case we are coding a radiobutton, so we enter "radio" as the type:

<input type="radio"

Radiobuttons help us create a list of choices a visitor can choose from. In order to 'group' the choices together we need to assign a common name to all of the radiobuttons in one common group:

<input type="radio" name="fruit"

This radiobutton will be presented as one choice of several. Now that we have assigned the button to a common group, we have to define what the button specifically represents within the common group:

<input type="radio" name="fruit" value="apples">

The radiobutton code is now complete and correct, lets add some text so that the visitor will know what the radiobutton represents:

<input type="radio" name="fruit" value="apples" style="border-width: 0px;"> Apples

Here is how the radiobutton will appear on a webpage:

Apples

Let's group several radiobuttons together into a list of choices. The common group we have defined is 'fruit' so let's create a form and code up some fruit choices for the list:

<form>
<input type="radio" name="fruit" value="apples" style="border-width: 0px;"> Apples
<input type="radio" name="fruit" value="oranges" style="border-width: 0px;"> Oranges
<input type="radio" name="fruit" value="lemons" style="border-width: 0px;"> Lemons
<input type="radio" name="fruit" value="limes" style="border-width: 0px;"> Limes
</form>

The list will display the selections and allow visitors to click any single radio button in the group and add a dot to it. Only one button in a group can be selected at one time. Here is how the list will appear on a webpage, try clicking the buttons to see how they behave:

Apples Oranges Lemons Limes

The list is almost complete, but we want one choice from the list to be displayed as pre-selected when the visitor first views the list of choices. We can do that easily by adding the word checked to the tag we want to show as selected, in the group:

<form>
<input type="radio" name="fruit" value="apples" style="border-width: 0px;" checked> Apples
<input type="radio" name="fruit" value="oranges" style="border-width: 0px;"> Oranges
<input type="radio" name="fruit" value="lemons" style="border-width: 0px;"> Lemons
<input type="radio" name="fruit" value="limes" style="border-width: 0px;"> Limes
</form>

Now the list is complete and it will appear on the webpage like this:

Apples Oranges Lemons Limes

Finally, let's code up two common groups of choices and add them to the same form.

<form>
<input type="radio" name="fruit" value="apples" style="border-width: 0px;" checked> Apples
<input type="radio" name="fruit" value="oranges" style="border-width: 0px;"> Oranges
<input type="radio" name="fruit" value="lemons" style="border-width: 0px;"> Lemons
<input type="radio" name="fruit" value="limes" style="border-width: 0px;"> Limes

<input type="radio" name="veggies" value="carrots" style="border-width: 0px;" checked> Carrots
<input type="radio" name="veggies" value="peas" style="border-width: 0px;"> Peas
<input type="radio" name="veggies" value="corn" style="border-width: 0px;"> Corn
<input type="radio" name="veggies" value="beans" style="border-width: 0px;"> Beans
</form>

Now when our two groups appear on the page, the visitor can select one individual item from each common group of items. Try selecting items in each group shown below:

Apples Oranges Lemons Limes

Carrots Peas Corn Beans