Java Reference
In-Depth Information
➤
Having discussed forms, we then went on to look at the different types of HTML elements
that can be placed inside forms, how to create them, and how they are used in JavaScript.
➤
The objects associated with the form elements have a number of properties, methods, and
events that are common to them all. They all have the
name
property, which you can use to
reference them in your JavaScript. They also all have the
form
property, which provides a
reference to the
Form
object in which that element is contained. The
type
property returns a
text string telling you what type of element this is; types include
text
,
button
, and
radio
.
➤
You also saw that the methods
focus()
and
blur()
, and the events
focus
and
blur
, are
available to every form element object. Such an element is said to receive the focus when it
becomes the active element in the form, either because the user has selected that element or
because you used the
focus()
method. However an element got the focus, its
focus
event
will fire. When another element is set as the currently active element, the previous element
is said to lose its focus, or to blur. Again, loss of focus can be the result of the user selecting
another element or the use of the
blur()
method; either way, when it happens the
blur
event fires. You saw that the firing of
focus
and
blur
can, if used carefully, be a good place
to check things like the validity of data entered by a user into an element.
➤
All elements return a value, which is the string data assigned to that element. The meaning of
the value depends on the element; for a text box, it is the value inside the text box, and for a
button, it's the text displayed on its face.
➤
Having discussed the common features of elements, we then looked at each of the more
commonly used elements in turn, starting with the button element.
➤
The button element's purpose in life is to be clicked by the user, where that clicking fires
some script you have written. You can capture the clicking by connecting to the button's
click
event. A button is created by means of the
<input/>
element with the
type
attribute
set to
button
. The
value
attribute determines what text appears on the button's face. Two
variations on a button are the
submit
and
reset
buttons. In addition to acting as buttons,
they also provide a special service not linked to code. The
submit
button automatically
submits the form to the server; the
reset
button clears the form back to its default state
when loaded in the page.
➤
The text element allows the user to enter a single line of plaintext. A text box is created
by means of the
<input/>
element with the
type
attribute set to
text
. You can set how
many characters the user can enter and how wide the text box is with the
maxlength
and
size
attributes, respectively, of the
<input/>
element. The text box has an associated
object called
Text
, which has the additional events
select
and
change
. The
select
event
fires when the user selects text in the box, and the more useful
change
event fires when
the element loses focus and its contents have changed since the element gained the focus.
The firing of the
change
event is a good place to do validation of what the user has just
entered. If she entered illegal values, such as letters when you wanted numbers, you can
let her know and send her back to correct her mistake. A variation on the text box is the
password
box, which is almost identical to the text box except that the values typed into
it are hidden and shown as asterisks. Additionally, the text box also has the
keydown
,
keypress
, and
keyup
events.
