Markup Elements and Scripting Access | HTML & XHTML: The Complete Reference (Osborne Complete Reference Series)

< Day Day Up >

Markup elements in a page need to be named properly to allow scripting languages to easily read and manipulate them. The basic way to attach a unique identifier to an element under HTML 4 or XHTML is by using the id attribute. The id attribute is associated with nearly every element.

The point of the id attribute is to bind a unique identifier to the element. To name a particular enclosed bolded piece of text "SuperImportant," you could use the markup shown here:

  <b id="SuperImportant">  This is very important.  </b>

Naming is very important. Authors are encouraged to adopt a consistent naming style and to avoid using potentially confusing names that include the names of HTML elements themselves . For example, button does not make a very good name, and might interfere with scripting language access.

Before the rise of HTML 4, the name attribute often was used to expose items to scripting. For backward compatibility, the name attribute is defined for <a> , <applet> , <button> , <embed> , <form> , <frame> , <iframe> , <img> , <input> , <object> , <map> , <select> , and <textarea> . Notice that the occurrence of the name attribute corresponds closely to the Netscape 3 object model.

Note	Both <meta> and <param> support attributes called name , but these have totally different meanings beyond script access.

Page developers must be careful to use name where necessary to ensure backward script compatibility with older browsers. Earlier browsers will not recognize the id attribute, so use name as well. For example, <a name="link1" id="link1"> hopefully would be interpreted both by older script-aware browsers as well as by the latest standards-supporting browser.

Note	There are some statements in standards documentation that suggest that it is not a good idea to set the name and id attributes the same, but practice shows this appears to be the only way to ensure backward browser compatibility.

When documents are well formed , in the sense that tags are used and named properly, scripting languages such as JavaScript can be used to read and manipulate the various objects in a page. The object models previously mentioned define a special set of reserved names that use this notation to allow scripting languages such as JavaScript to refer to entities in the browser and the document, including form elements. The basic notation uses a series of object and property names separated by dots. For example, to access the form defined by

  <form action="#" name="myform" id="myform">   <input type="text" name="username" id="username" />   </form>

with a scripting language, use either window.document.myform or simply document.myform because the current window can be assumed. The field and its value can be accessed in a similar fashion. To access the text field, use document.myform.username . To access the actual value of the username field, access the value property using document.myform.username.value .

Note	Under Internet Explorer, it may be possible to use a shorthand notation such as myform.username.value , but this will cause problems in other browsers.

Note

In addition to proper naming, when adding scripting to a page the HTML should always be well formed. Simple things ”for example, crossed elements such as <b><i> Test </b></i> ” might cause a problem with a scripting language. This has to do with the manipulation of the text within the elements. Page authors should consider it extremely dangerous to manipulate poorly formed markup with scripts.

The following example shows how the content of a form field is accessed and displayed dynamically in an alert window by referencing the fields by name.

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  Meet and Greet  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   <script type="text/javascript">  <!-- function sayHello() {  var theirname;      theirname=document.myform.username.value;  if (theirname != "")   alert("Hello "+theirname+"!");  else   alert("Don't be shy."); } // -->  </script>   </head>   <body>   <form action="#" name="myform" id="myform">   <b>  What's your name?  </b>   <input type="text" name="username" id="username"  size="20" />   <input type="button" value="Greet" onclick="sayHello();" />   </form>   </body>   </html>

It also is possible to refer to elements such as forms and form elements without assigning them a name using an array notation. For example, forms can be referred to by a forms[ ] array with the numbers beginning at 0. Elements within a form can be referred to by an elements[ ] array that also begins at 0. The previous example contains only one form and one field, so the syntax document.forms[0].elements[0].value is the same as document.myform.username.value . Note that it generally is better to name elements than to access them through their position in a page because any additions or movement of the markup elements within the page could potentially break the script.

Aside from reading the contents of an element with JavaScript, it is also possible, in some cases, to update the contents of certain elements such as form fields. The following example code shows how this might be done:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  Meet and Greet 2  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   <script type="text/javascript">  <!-- function sayHello() {  var theirname;      theirname = document.myform.username.value;  if (theirname != "")   document.myform.response.value="Hello "+theirname+"!";  else   document.myform.response.value="Don't be shy."; } // -->  </script>   </head>   <body>   <form action="#" name="myform" id="myform">   <b>  What's your name?  </b>   <input type="text" name="username" id="username"  size="20" />   <br /><br />   <b>  Greeting:  </b>   <input type="text" name="response" id="response" size="40" />   <br /><br />   <input type="button" value="Greet" onclick="sayHello();" />   </form>   </body>   </html>

If you look at Figure 14-4, you'll notice that under Netscape 3 and Internet Explorer 3, only some objects in a page are changeable , notably form elements. Starting with Internet Explorer 4, everything in a page can be modified right down to the very text and markup itself. This is the real idea of Dynamic HTML and is discussed next .

< Day Day Up >