Welcome to the Bravenet Resource Center. Use these resources to help make your web pages more advanced and fun to use.
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:
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:
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:
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:
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:
The radiobutton code is now complete and correct, lets add some text so that the visitor will know what the radiobutton represents:
Here is how the radiobutton will appear on a webpage:
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:
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:
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:
Now the list is complete and it will appear on the webpage like this:
Finally, let's code up two common groups of choices and add them to the same form.
<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
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:
Carrots Peas Corn Beans