Java Reference
In-Depth Information
Note that the 3.7 GHz processor is out of stock, so if you choose that, a message box tells you it's out
of stock, and the 3.2 GHz processor speed radio button won't be selected. The previous setting will be
restored when the user dismisses the message box.
Let's first look at the body of the page, where you define the check boxes and radio buttons and a
standard button inside a form called form1 . You start with the check boxes:
<p>
Tick all of the components you want included on your computer
</p>
<p>
<label for="chkDVD">DVD-ROM</label>
<input type="checkbox" id="chkDVD" name="chkDVD" value="DVD-ROM" />
</p>
<p>
<label for="chkBluRay">Blu-ray</label>
<input type="checkbox" id="chkBluRay" name="chkBluRay" value="Blu-ray" />
</p>
Each check box has a label and is contained within a <p/> element for formatting purposes.
Next come the radio buttons for selecting the required CPU speed. Again, each has a label, but unlike
the check boxes, these radio buttons are contained within a single <p/> element:
<p>
Select the processor speed you require
</p>
<p>
<input type="radio" name="radCpuSpeed" checked="checked"
value="3.2 ghz" />
<label>3.2 GHz</label>
<input type="radio" name="radCpuSpeed" value="3.7 ghz" />
<label>3.7 GHz</label>
<input type="radio" name="radCpuSpeed" value="4.0 ghz" />
<label>4.0 GHz</label>
</p>
The radio button group name is radCpuSpeed . Here, the first one is set to be checked by default by the
inclusion of the checked attribute inside the <input/> element's definition. It's a good idea to ensure
that you have one radio button checked by default, because if you do not and the user doesn't select a
button, the form will be submitted with no value for that radio group.
Next, the standard button that completes your form:
<input type="button" value="Check form" name="btnCheck" />
Before proceeding further, a note: To make the JavaScript code easier, you could use the onclick attributes
on each of the radio buttons as well as the standard button. But as mentioned in Chapter 10, you want to
avoid those attributes as much as possible because it couples your HTML and JavaScript together.
Two functions are used to handle the click events for the standard button and the radio buttons:
btnCheckClick() and radCpuSpeedClick() , respectively. And before we look at these functions, you
Search WWH ::




Custom Search