RADIO BOXES
Last month we dealt with checkboxes. Radio boxes are very similar except radio boxes are defined in groups and only one option from each group can be chosen.
Radio boxes are inserted using the <input> tag, by setting the "type" attribute to "radio":
<input type="radio">
As always you must also set the "name" attribute. If you set the same name in a number of Radio boxes then they become a group of radio boxes and only one of them can be checked. Also the "value" attribute must be set for each box. The reason behind the value attribute was explained last month as follows:
There is a very simple reason for this. Imagine you want someone's name. You simply supply an input field for them to type their name into. The name they type is returned to you as the value of that part of the form. (Don't worry about HOW it is returned to you yet). Well with a selection list, the visitor selects a particular option in the list and the value that is specified with the "value" attribute is returned to you. Maybe that's not so simple - read the paragraph again if you feel like it!
If you want one of the boxes to be checked when the page loads then you simply add "checked" to it's code (as shown below). Remember that only one option from each group can be chosen.
<form>
<b>Please select an option from the list below</b><br>
Option #1 <input type="radio" name="option" value="1" checked><br>
Option #2 <input type="radio" name="option" value="2"><br>
Option #3 <input type="radio" name="option" value="3"><br>
Option #4 <input type="radio" name="option" value="4">
</form>
If you want to see how the checkboxes look and work then visit http://www.usheen.com/suite101/form2.html
This is a very simple example because every box is in the same group. Imagine this slightly more complicated scenario: You want to be able to choose between a Roll and a Sandwich and you also want to choose which filling you want.
First of all we'll deal with the first part of the problem: Roll or Sandwich.
<form>
<input type="radio" name="which one" value="sandwich">Sandwich<br>
<input type="radio" name="which one" value="roll">Roll
</form>
This is fairly simple. Next we have to add a choice of fillings. We just have to set a different "name" for the next options. I'll also add some "checked" attributes.
<form>
<b><big>
<input type="radio" name="which one" value="sandwich" checked>Sandwich
<input type="radio" name="which one" value="roll">Roll
Go To Page: 1 2
