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++) {
