Java Reference
In-Depth Information
Input Fields
Input fields are the most common types of form control, but there are several categories of
input field as you'll soon see:
Text Input Fields
The default type of input field is "
text
" which is used for entering a short piece of text,
such as a username or phone number. In our example, we use a text input field to enter the
name of the superhero. The
type="text"
attribute isn't imperative (we didn't use it in the
search example as "
text
" is the default), but it is advisable to use it as it makes the inten-
ded purpose of the field explicit, helping with maintenance, readability, and future-proofing.
The initial value of this field can be set in the HTML using the "
value
" attribute:
<input type="text" name="name" value="Enter your name">
Password Input Fields
input type="password"
is used to enter passwords or secret information. This works
in the same way as an input field with
type="text"
, except that the characters are con-
cealed as they are entered so they're unable to be read on the screen.
To see this in action, we will add a
realName
property to our
hero
object. Obviously the
real name of a superhero is secret information, so it needs to be hidden from prying eyes
when it is being entered. Add the following line to the form in hero.htm (just before the sub-
mit button):
<label for="realName" class="break">Real Name:</label>
<input type="password" name="realName">
To process this information, we add the following line to the
makeHero()
function in
scripts.js:
hero.realName = form.realName.value;
