Java Reference
In-Depth Information
➤
The next element you looked at was the text area, which is similar to the text box except
that it allows multiple lines of text to be entered. This element is created with the open tag
<textarea>
and closed with the
</textarea>
tag, the width and height in characters of the
text box being determined by the
cols
and
rows
attributes, respectively. The
wrap
attribute
determines whether the text area wraps text that reaches the end of a line and whether that
wrapping is sent when the contents are posted to the server. If this attribute is left out, or set
to
off
, no wrapping occurs; if set to
soft
, it causes wrapping client‐side, but is not sent to
the server when the form is sent; if set to
hard
, it causes wrapping client‐side and is sent to
the server. The associated
Textarea
object has virtually the same properties, methods, and
events as a
Text
object.
➤
You then looked at the check box and radio button elements together. Essentially they are
the same type of element, except that the radio button is a grouped element, meaning that
only one in a group can be checked at once. Checking another one causes the previously
checked button to be unchecked. Both elements are created with the
<input/>
element,
the
type
attribute being
checkbox
or
radio
. If
checked
is put inside the
<input>
tag, that
element will be checked when the page is loaded. Creating radio buttons with the same
name creates a radio button group. The name of a radio button actually refers to an array,
and each element within that array is a radio button defined on the form to be within
that group. These elements have associated objects called
Checkbox
and
Radio
. Using the
checked
property of these objects, you can find out whether a check box or radio button
is currently checked. Both objects also have the
click
event in addition to the common
events
focus
and
blur
.
➤
Next in your look at elements were the drop‐down list and list boxes. Both, in fact, are
the same select element, with the
size
attribute determining whether it's a drop‐down
or list box. The
<select>
tag creates these elements, the
size
attribute determining how
many list items are visible at once. If a
size
of
1
is given, a drop‐down box rather than
a list box is created. Each item in a select element is defined by the
<option/>
element,
or added to later by means of the
Select
object's
options
collection property, which is
an array‐like structure containing each
Option
object for that element. However, adding
options after the page is loaded differs slightly between standards‐compliant browsers
and old‐IE. The
Select
object's
selectedIndex
property tells you which option is
selected; you can then use that value to access the appropriate option in the
options
collection and use the
Option
object's
value
property. The
Option
object also has the
text
and
index
properties,
text
being the displayed text in the list and
index
being its
position in the
Select
object's
options
collection property. You can loop through the
options
collection, finding out its length from the
Select
object's
length
property. The
Select
object has the
change
event, which fires when the user selects another item from
the list.
➤
You then looked at HTML5's new elements and input types, as well as the
input
event.
You learned how to write JavaScript code to manipulate the
<output/>
,
<meter/>
, and
<progress/>
elements and modify their output when users input data in a form.
In the next chapter, you look at JavaScript Object Notation (JSON), a data format that lets you
store JavaScript objects and arrays as string data.
