Java Reference
In-Depth Information
Ty p e
jmcpeak
into the Username fi eld and click the Check Availability link next to it. You'll see an alert
box like the one shown in Figure 14-7.
Figure 14-7
Now type
someone@xyz.com
in the
Email
fi eld and click the Check Availability link next to it. Again,
you'll be greeted with an alert box stating that the e-mail's already in use. Now input your own user
name and e-mail into these fi elds and click the appropriate links. Chances are an alert box will tell you
that your user name and/or e-mail is available (the user names
jmcpeak
and
pwilton
and the e-mails
someone@xyz.com
and
someone@zyx.com
are the only ones used by the application).
The body of this HTML page is a simple form whose fi elds are contained within a table. Each form fi eld
exists in its own row in the table. The fi rst two rows contain the fi elds you're most interested in, the
Username and Email fi elds.
<form>
<table>
<tr>
<td class=”fieldname”>
Username:
</td>
<td>
<input type=”text” id=”username” />
</td>
<td>
<a href=”javascript: checkUsername()”>Check Availability</a>
</td>
</tr>
<tr>
<td class=”fieldname”>
Email:
</td>
<td>
<input type=”text” id=”email” />
</td>
<td>
<a href=”javascript: checkEmail()”>Check Availability</a>
</td>
</tr>
<!-- HTML to be continued later -->
The fi rst column contains text identifi ers for the fi elds. The second column contains the
<input/>
ele-
ments themselves. Each of these tags has an
id
attribute,
username
for the
Username
fi eld and
email
for the
Email
fi eld. This enables you to easily fi nd the
<input/>
elements and get the text entered into
them. The third column contains an
<a/>
element. The hyperlinks use the
javascript:
protocol to
call JavaScript code. In this case, the
checkUsername()
and
checkEmail()
functions are called when
the user clicks the links. You'll examine these functions in a few moments.
