HTML and CSS Reference
In-Depth Information
As shown in Example 11.3, a document can have a number of HTML forms and input
types, called controls, such as simple textboxes, radio buttons, checkboxes, and so on.
JavaScript provides objects that parallel HTML tags; for example, the JavaScript
form
object parallels the HTML <
form
> tag and the JavaScript
elements
object parallels the
input devices such as radio buttons or checkboxes.
In this section we focus on the structure of the JavaScript
form
object and how to use
it in terms of the Legacy DOM 0, but because DOM 1 is a standardized version, some of
the examples will include that version. In this chapter you will be introduced to event
handling and forms, but events will be covered in more depth in Chapter 13. This chap-
ter also includes a section on how to validate input data, but in Chapter 17, “Regular
Expressions and Pattern Matching,” you will learn how to check all the input fields of a
form, using the magic of regular expressions and pattern matching and in Chapter 15
we will use the W3C DOM to manipulate form objects and fields (as well as other HTML
elements).
The
name
Attribute.
The HTML 4.01 specification calls the input types for forms,
controls. The controls are listed in Table 11.4. The form shown in Figure 11.8 displays
the controls in the browser as textboxes, checkboxes, select menus, radio buttons, etc.
The controls are created by the HTML <
input type=name/value/
> tag shown in Example
11.3. After the user enters data into the form or clicks a button to make a selection, the
data is collected by the browser and normally submitted to the server for further pro-
cessing. The name of the form control and its value are sent as name/value pairs (e.g.,
choice=fish
or
city=San Francisco
), to the server, where the names are used to extract the
values associated with them. This means that if form data will be used in a server script
such as PHP, ASP.NET, or CGI, the
name
attribute is required.
The
id
Attribute.
Before the server-side program is called, JavaScript can be used to
validate the data that was entered into a form, manipulate the data, collect the form data
and display in another window, send it in an e-mail, and so on. So why the
id
attribute?
Java-Script uses the unique
id
attribute and its associated
document.getElementById()
method to identify all XML/HTML elements (nodes) within the document, including
form controls. If the form data is not going to be sent to the server for processing, then
the
name
attribute is not necessary. Because the form control can be referenced either by
its name or a unique ID, when creating form fields, it is customary to use both and give
them the same value when possible:
1
<form>
<input type="text"
id=”your_name” name=”your_name”
/>
<input type="text"
id=”cell_phone” name=”field2”
/>
</form>
1. The ability to reference all of the HTML elements by unique ID was introduced by the W3C DOM, cov-
ered in depth in Chapter 15.