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).
11.4.1 Naming Forms and Input Types (Controls) for Forms
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.
 
 
Search WWH ::




Custom Search