Thông tin tài liệu
ptg 350 Chapter 11 • Working with Forms and Input Devices 11.4.3 Naming Forms and Buttons How JavaScript References a Form by name or id. The <form> tag has a name attribute that allows you to give your form a name. It is somewhat easier and more read- able to reference a form by its name than by using the array syntax, such as forms[0] and forms[1]. You will need the name attribute if you are submitting the form to a server-side program as discussed in Section 11.4.1. Any object, including the form, can also be referenced by using its unique ID and the getElementById() method of the document, standardized by the W3C DOM. In Example 11.6, two HTML forms are created: One contains a textbox, and the other a button. Each of the forms is given a name with the name attribute and an id. In the JavaScript program, the two forms are accessed by using the name and the id of the form and its elements. Table 11.7 Properties of the elements Object Property What It Describes form The name of the form object where the element was defined (read- only). name The name of the input device as specified in the HTML name attribute (read-only). type The type of input device, such as radio, checkbox, password, and so on (read-only). disabled A Boolean value; if true the element is disabled so that it can’t be modified; even if it contains a value, data from a disabled form field is not sent back to the server. value The text that is associated with the input device, such as the text entered into the text area or textbox, the text that appears in a button, and so on (read/write). EXAMPLE 11.6 <html> <head><title>Naming Forms object</title></head> <body> 1 <form name="form1" id=”first_form”> Enter your name: 2 <input type="text" id="namefield" name="namefield" value="Name: " /> 3 </form> From the Library of WoweBook.Com ptg 11.4 JavaScript and the form Object 351 4 <form name="form2" id="second_form"> 5 <input type="button" value="Press here"> 6 </form> <big> 7 <script type="text/javascript"> // DOM Level 0. How do we reference the form in JavaScript? // Go down the document tree: window/document/form.property // The window object can be left off, because it is at the top document.write( "The first form is named: " + 8 window.document.forms["form1"].name); document.write( ".<br />The second form is named: " + 9 document.forms["form2"].name); document.write(".<br />Also can be referenced as: <em>" + 'document["form2"].name'+".</em><br />"); document.write("Another way to reference a form: <em>" + 'document.form2.name' +".</em><br />"); 10 // DOM Level 1. The standardized W3C DOM way document.write("<br />Using the id attribute to get the form \ name,<br />"); 11 var f1 = document.getElementById("first_form"); // define variables var f2 = document.getElementById("second_form"); 12 document.write("The first form is named " + f1.name + ".<br />"); document.write("The first form is named " + f2.name + ".<br />"); </script> </big> </body> </html> EXPLANATION 1 The name of the first HTML form in the document is form1. The id attribute is as- signed first_form. 2 The input type for this form is a text field with a default value “Name: ”. 3 This tag ends the first form. 4 The name of the second form is form2. Its id is second_form. 5 The input type for this form is a button with the value “Press here”, which will ap- pear as text in the button. 6 This tag ends the second form. 7 The JavaScript program starts here. Continues EXAMPLE 11.6 (CONTINUED) From the Library of WoweBook.Com ptg 352 Chapter 11 • Working with Forms and Input Devices 8 To display the name of the first form, descend the JavaScript tree, starting at the window, to the document, to the first form object named form1, to its name property. We could write document.forms[0].name or document.form1.name, but by using the form object as a property of the document and the associative array notation with its name in square brackets, it is easier to identify the object as a form object by name if there are a number of forms on the page. 9 To display the name of the second form, descend the JavaScript tree as in line 8. This time we left out the window object, which is fine because JavaScript knows that the window is always at the top of the tree. See Figure 11.13. 10 Although this chapter focuses on the JavaScript legacy DOM 0 when working with forms, all HTML elements are accessible via the DOM Level 1, the standard- ized DOM, which all modern browsers should support. Navigating forms, images, and links with JavaScript has always been supported by DOM 0 and is still widely used. 11 The getElementById() method returns a reference to the HTML element by the id that was assigned to it on line 1. In most of the examples, the name and id are the same, but in this example, they are different to make it clear that the id, not the name, is used to get a reference to the element. The variable, f1, is a reference to the first form. 12 Now that we have a reference to the form, we can use it and the dot notation to get its name. Figure 11.13 Name those forms! EXPLANATION From the Library of WoweBook.Com ptg 11.4 JavaScript and the form Object 353 The elements and properties of the HTML <form> tag are shown in Table 11.8. How JavaScript References the Form Elements by Name. Each form object is an element of the forms[] array and each form contains input types such as buttons, textboxes, checkboxes, and so on. Each of the input types is also stored in an array called elements[] in the order in which the input device is found in the document. In the fol- lowing example, there is one form, called myform. It contains two elements, button input types, named button1 and button2, respectively. The JavaScript program gets access to the form and button properties by using names to reference them. An object can be referenced by using the numeric array notation, or referenced by its name with the dot notation; that is, object first, then dot and name, or by putting the name as a string in square brackets (associative array). If there are a number of forms and buttons, using the associative array notation, rather than the numerically indexed array notation, might make it easier to locate the object. For instance, if one of the forms or input devices has been moved or deleted, the numeric index values for all of the objects on the page would Table 11.8 <form> Tag Elements and Properties Object Property Purpose button name, type, value A general-purpose GUI button. checkbox checked, defaultChecked, name, type, value A set of (or one) clickable boxes allowing multiple selections. FileUpLoad name, type, value A field allowing a file to be submitted as part of a form. hidden name, type, value A field where the content is not shown in the form. password defaultValue, name, value A field for entering a password, masking the real characters typed. radio checked, defaultChecked, name, type, value A set of (or one) clickable boxes allowing only one selection. reset name, type, value A button that clears and resets the form fields. select length, name, options, selectedIndex, type, value A popup or scrolling list of items from which to choose. submit name, type, value, A button used for submitting form data. text defaultValue, name, type, value A rectangular field allowing one line of input. textarea defaultValue, name, type, value A rectangular box allowing multiple lines of input value. From the Library of WoweBook.Com ptg 354 Chapter 11 • Working with Forms and Input Devices need to be changed. Writing document[“form3”][“button2”] in place of docu- ment.forms[2].elements[1] would make the change easier. If the first form on the page is named “myForm”, there are several ways to reference it: document.forms[0] document.forms.myForm document.forms["myForm"] And to name a form’s input element: document.forms[0].elements[0] document.myform.button1 document["myForm"]["button1"] EXAMPLE 11.7 </html> <head><title>Naming Buttons</title></head> <body bgcolor="cyan"><font face="arial"> <strong>Naming Forms and Buttons<br /> <big> 1 <form name="myform"> 2 <input type="button" name="button1" id="button1" value="red" /> 3 <input type="button" name="button2" id="button2" value="blue" /> 4 </form> <script type="text/javascript"> document.write("<b><br />Form name is: </b><em>" + 5 document.myform.name + "</em>"); document.write("<b><br />Form name is: </b><em>" + 6 document["myform"].name +"</em>"); document.write("<b><br />Name of first button is:</b><em> " + 7 document["myform"]["button1"].name + "</em>and its type is<em>" + document.myform.button1.type); document.write("</em><b><br />Value of button1 field:</b><em> " + 8 document["myform"]["button1"].value); document.write("</em><b><br />Name of second button is:</b><em> " + document.myform.button2.name); document.write("</em><b><br />Value of button2 field:</b><em> " + document.myform.button2.value); </script> </big> </strong> </body> </html> From the Library of WoweBook.Com ptg 11.4 JavaScript and the form Object 355 EXPLANATION 1 The HTML form starts here. It is named myform. JavaScript can now reference the form by its name. 2 The input type is a button named button1 and assigned a value of red. JavaScript can now reference the button by its name. The id attribute will not be used in this example. It is here because it is common to use both a name and id for the form and its elements. The id gives JavaScript another way to get access to the object, which will be covered in detail in later chapters. 3 The input type is a button named button2 and assigned a value of blue. 4 The form ends here. 5 Within the JavaScript program the form is referenced by its name. It is a property of the document object. Without naming the form, it would be referenced as doc- ument.forms[0].name. 6 The name assigned to the first button is displayed. Putting the name as a string in square brackets (associative array) is a common approach to naming forms and their elements. Without naming the form or the button, it would be referenced as document.forms[0].elements[0].value. It is easy to make typos here. Spelling my- form.name as myform1.name causes the output to be myform1 is undefined. See Fig- ures 11.14 and 11.15. 7 Using the associative array notation, the name for the form is a string inserted in the first set of brackets, and the second element, a string name for button1 is in- serted in the second set of square brackets. We use the dot notation to retrieve the value of the type property for the form’s button. 8 Using the two-dimensional associative array notation, we retrieve the value that was assigned to button1, which is red. Figure 11.14 Name that button! From the Library of WoweBook.Com ptg 356 Chapter 11 • Working with Forms and Input Devices 11.4.4 Submitting Fillout Forms Submitting an HTML Form Without JavaScript. When the user clicks a submit button, the form is normally sent to the server for further processing by another appli- cation such as a PHP, ASP.NET, or CGI script. Before the server gets the form, its content is gathered by the browser, URL encoded, and then sent to the address supplied in the action attribute of the form. (In the previous examples, the action attribute was not used because there was no reason to process the user input in the sample forms.) The appli- cation on the server side decodes and processes the form information. From there, an acknowledgment can be sent back to the user, an e-mail delivered, the processed infor- mation sent to a database, or whatever else we define. Now let’s look at an example of an HTML form and how it is submitted to a server application. After the user fills out the form, he or she will click the Submit button. The form data will be collected by the browser as name/value pairs and sent to the server. The method attribute determines how the data is sent (as a query string or message body) and the action attribute determines where it will be sent (the URL of a server). Figure 11.15 What went wrong? Watch your spelling! We tried to reference a form by the wrong name! EXAMPLE 11.8 <html> <head><title>An HTML Form</title></head> <body><big><strong> 1 <form action="/cgi-bin/bookstuff/form1.cgi" method="post"><p> <fieldset><legend>All About You</legend> <p> Type your name here: 2 <input type="text" name="namestring" size="50" /> </p> <b>Choose a work place:</b><br /> 3 <input type="checkbox" name="place" value="LA">Los Angeles<br /> <input type="checkbox" name="place" value="SJ">San Jose<br /> <input type="checkbox" name="place" value="SF" checked>San Francisco <br /> From the Library of WoweBook.Com . here"> 6 </form> <big> 7 <script type="text /javascript& quot;> // DOM Level 0. How do we reference the form in JavaScript? // Go down the document tree: window/document/form.property. name in square brackets, it is easier to identify the object as a form object by name if there are a number of forms on the page. 9 To display the name of the second form, descend the JavaScript. window object, which is fine because JavaScript knows that the window is always at the top of the tree. See Figure 11.13. 10 Although this chapter focuses on the JavaScript legacy DOM 0 when working
Ngày đăng: 04/07/2014, 02:20
Xem thêm: Học JavaScript qua ví dụ part 39 pps, Học JavaScript qua ví dụ part 39 pps
