Radio buttons allow the user to choose one of several options (if you click on one option and then click on a second option, the first option will automatically be unselected).
The HTML for a set of 2 radio buttons looks like this:
<input type="radio" value="first button" id="radio1" name="myRadioButtons"/>First choice
<input type="radio" value="second button" id="radio2" name="myRadioButtons"/>Second choice
The first three attributes (type, value and id) are familiar
the type attribute indicates that the input element is a radio button (rather than a text box or button...)
the id attribute allows us to use document.getElementById()
the value attribute will be retrieved with document.getElementById().value
The third attribute, name, is new. Notice that both have the same name "myRadioButtons". This is important because this is what indicates that these buttons belong to the same group. The browser knows that only one of the radio buttons in a group can be selected at a time.
1. Create 7 radio buttons by typing this line 7 times:
<input type="radio" value="" id="" name=""/>
2.View your file with a browser. You'll just see 5 little circles. Click on each one and see what happens. Notice that you can fill them all in (we'll fix that so you can only fill one at a time).
3. Go back to the file and fill in their attributes like this:
Give them all the name timeZoneChoice (i.e. name="timeZoneChoice")
Give them the ids "zone1", "zone2", "zone3", "zone4", "zone5", "zone6", "zone7"
Leave the values blank for now (i.e. value="")
4.View your file in a browser again. Click on each circle and notice that only one can be filled in at a time. That's because you've grouped them by giving them all the same name. This is what you want - the user should only be able to select one option.
5. Go back to your file and add the text that goes with each radio button. Type it just after the input element closes (i.e. after />). The text will be "Hawaii", "Alaska", "Pacific", "Mountain", "Central" "Eastern" and "Atlantic"
6. Go to your Catalayst quiz and answer question #2
Next, you'll finish setting up the page look by adding text and CSS