Java Reference
In-Depth Information
As you can see, values from a password input field are accessed in exactly the same way
as text input fields using the value property.
Checkbox Input Fields
Check boxes are created using input fields with type="checkbox" . They are used to
select different options that can be checked (true) or left unchecked (false). The user can
select more than one checkbox from a list.
We'll use checkboxes to add a list of powers that the superhero can have. Add the following
lines of code to the form in hero.htm:
<p>Super Powers:</p>
<label for="flight">Flight:</label>
<input type="checkbox" value="Flight" name="powers">
<label for="strength">Super Strength:</label>
<input type="checkbox" value="Strength" name="powers">
<label for="speed">Super Speed:</label>
<input type="checkbox" value="Super Speed" name="powers">
<label for="energy">Energy Blasts:</label>
<input type="checkbox" value="Energy Blasts" name="powers">
<label for="telekinesis">Telekinesis:</label>
<input type="checkbox" value="Telekinesis" name="powers">
Notice that all the checkbox elements have the same name property of " powers ". This
means that they can be accessed as an HTML collection like so:
form.powers;
We can then iterate over this collection using a for loop to see if each checkbox was
checked. Checkbox objects have a checked property that tells us if it has been checked
or not. It is a Boolean property, so can only have the values true or false . The value
property is used to set the name of the power that can be used if the checkbox has been
checked. Add the following code to the makeHero() function in scripts.js:
hero.powers = [];
for (i=0; i < form.powers.length; i++) {
Search WWH ::




Custom Search