Team LiB
Previous Section Next Section

Form Fields

HTML supports a variety of form elements, including single-line and mutiline text boxes, password fields, radio buttons, checkboxes, pull-down menus, scrolled lists, hidden fields, and numerous types of buttons. This section presents a short review of each of these tags and shows how JavaScript can be used to access and modify their properties.

Common Input Element Properties

All <<input>> tags are represented in the DOM as HTMLInputElement objects. These objects share a number of properties related to their functionality as form fields, as well as the (X)HTML standard properties you would expect (id, title, lang, and so on.). The properties common to all objects representing <<input>> tags are shown in Table 14-2. Specific types of input elements—for example, <<input type="image" />>—have additional properties and methods specific to the type of input they handle. For example, input with type equal to "image" defines an src attribute, which is undefined with other type values.

Table 14-2: Properties and Methods Common to All Objects Representing <input> Tags

Property

Description

AccessKey

String holding the accelerator key that gives the element focus as set by the accesskey attribute. Note the case difference.

defaultValue

String holding the contents of the value attribute when the page loaded.

Disabled

Boolean value indicating whether the user can interact with this field. This can be set by the disabled (X)HTML attribute.

form

Read-only reference to the Form containing this field.

name

String containing the name of the field as defined by the name attribute. The id attribute and corresponding id property are also used.

Size

Commonly used for <input> type set "text" or "password", in which case it specifies the width in characters. So type values like "radio" or "checkbox" do not support this attribute while image may define size in pixels.

TabIndex

Integer indicating the field's position in the document's tabbing order as defined by the tabindex atribute.

type

String indicating what kind of form input field the element represents. Valid values are "text", "password", "button", "image", "submit", "reset", "radio", "checkbox", "hidden", and "file".

Blur()

Causes the field to lose focus.

focus()

Brings the field into focus for user input.

A few properties do require some brief discussion. First, the form property references the Form object that element is enclosed within. So, given

<<form name="myform" id="myform">>
  <<input type="text" name="field1" id="field1" />>
<</form>>

the value of document.myform.field1.form is the Form object named myform. Of course, you might wonder about the usefulness of this, since we knew the form name to access the property. In short, it is most useful when a function or object is given some generic form field object without any indication of the form it is enclosed within.

The next property that should be discussed is defaultValue. This property holds the string set by the value attribute in the original HTML file. So, given <<input type="text" name="testfield" value="First value" />> within the form named testform, the value of document .testform..testfield.defaultValue would be the string "First value." This will also be held in the property document.testform.testfield.value at first. However, as the user changes the contents of the field, the value property will change to reflect the user’s modifications, while the defaultValue property will remain constant. In fact, executing reset() on the form sets all the form’s elements’ values to their defaultValues. Interestingly, while it is obvious that value is changeable both by the user and by script, it turns out that defaultValue is also defined to be settable by script, though the value of this is not as obvious.

In traditional JavaScript as well as under DOM Level 1, all forms of text fields support the blur() and focus() methods. The text input fields also support select() methods. So given these methods, onblur, onfocus, and onselect are of course supported. Other event handlers are more focused on user activities so many fields also support onchange, which is fired once a field’s content has changed and the field has lost focus. Also supported are a variety of keyboard-related events, such as onkeypress, onkeyup, and onkeydown. We’ll show examples of the use of each of these properties and methods in more detail as we explore how the different kinds of form fields are used.

Buttons

There are three basic types of buttons in HTML: submit, reset, and generic buttons. A fourth type is the image button, and a fifth is a generalized button element. The last two types are slightly different from the basic types, and will be discussed separately.

All three of the basic button types are defined with (X)HTML’s versatile <<input>> tag. You use <<input type="submit" />> to create a Submit button, <<input type="reset" />> to create a Reset button, and <<input type="button" />> to create a generic button. To specify the text appearing on the button, set the value attribute—for example, <<input type="button" value="Click me please!" />>.

These common attributes should not be overlooked; we can use them to improve the look and usability of a button, as demonstrated here:

<<form>>
<<input type="button" value="Click me" name="button1" id="button1" 
 title="Please click me, pretty please!"
 style="background-color: red; color: white;"
 accesskey="c" />>
<</form>>

The default behavior of a Submit button is to send the form fields to the server for processing. Not surprisingly, the Reset button causes all form fields to revert to their original state, the state they were in when the page loaded. The generic button has no default action; to make use of it you generally attach an onclick event handler that causes something useful to happen when the button is clicked.

The method these buttons have in addition to the properties and methods common to all input elements is shown in Table 14-3. You can force a "click" of a button by invoking its click() method. Similarly, like all input elements, you can focus a button using its focus() method and move away from it using blur(). Often a browser will highlight a button in some fashion when it has focus—for example, under Internet Explorer a dotted line is placed around its edge.

Table 14-3: Additional Method of Inputs with Type "submit", "reset", and "button"

Method

Description

click()

Simulates a click on the button, firing its default action

The following simple example shows many of the methods and events for buttons in action.

<<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">>
<<html>>
<<head>>
<<title>>Button Tester<</title>>
<<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />>
<</head>>
<<body>>
<<form action="http://www.javascriptref.com" method="get" 
      name="testform" id="testform" 
      onreset="return confirm('Clear fields?');" 
      onsubmit="return confirm('Send form?');">>

<<label>>Test Field: <<input type="text" value="test information" />><</label>>
<<br />><<br />>
<<label>>Test Field 2: <<input type="text" />><</label>>
<<br />><<br />>
<<input type="reset" value="clear fields" onclick="alert('clicked');" />>
<<input type="submit" value="submit" name="thesubmit" id="thesubmit" 
       onclick="alert('clicked');" />>
<<input type="button" value="regular button" onclick="alert('clicked');" />>
<<input type="button" value="Focus submit button"
       onclick="document.testform.thesubmit.focus();" />>
<<input type="button" value="Blur submit button" 
       onclick="document.testform.thesubmit.blur();" />>
<<input type="button" value="Click the submit button" 
       onclick="document.testform.thesubmit.click();" />>
<</form>>
<</body>>
<</html>>

Remember that these buttons (indeed, all form elements) can only appear within a <<form>> tag. While Internet Explorer may let you get away with using form elements anywhere in a document, browsers enforcing standards will not render form field elements outside a <<form>> tag.

Image Buttons

The simple gray appearance provided by standard (X)HTML Submit, Reset, and generic buttons is often not desirable. A good approach to livening up your buttons is to apply CSS to them. However, some designers instead use image buttons. There are a few ways to create image buttons in markup. The first is simply to wrap an <<img />> tag within a link and trigger some JavaScript, for example,

<<a href="javascript:document.myform.submit();">><<img src="images/submit.gif"
 width="55" height="21" border="0" alt="Submit" />><</a>>

Alternatively, you can use the <<input type="image" />> form field. Under (X)HTML, such fields are used to create graphical Submit buttons. For example, to create a submission button consisting of an image, you might use

<<input type="image" name="testbutton" id="testbutton"
       src="../images/button.gif" alt="Submit" />>

The unique properties of image buttons are discussed in Table 14-4. In particular, notice that image maps can be used with image buttons via the usemap attribute. Yet, interestingly, regardless of the use of a usemap attribute, image-based Submit buttons always send an x and y value in during submission, indicating the pixel coordinates of the image clicked.

Table 14-4: Additional Properties of Inputs of Type "image"

Property

Description

Alt

Text alternative of the button for non-visual browsers

Src

URL of the image to display as a button

UseMap

Indicates the button is a client-side image map

Note 

Despite being defined since HTML 4, the image button is often not supported by older browsers. Even relatively recent browsers such as Internet Explorer 5 do not properly recognize it.

Generalized Buttons

HTML 4 and XHTML support the <<button>> tag, which is much more flexible than <<input>> and provides the possibility of visually richer buttons. The basic syntax of the <<button>> tag is presented here:

<<button type="button | reset | submit"
        id="button name" name="button name" 
        value="button value during submission">>
Button content
<</button>>

Two examples of <<button>> in use are shown here:

<<button type="submit" name="mybutton" id="mybutton">>
     <<em>>Yes sir, I am a submit button!<</em>>
<</button>>
<<button type="button" name="mybutton2" id="mybutton2">>
  <<img src="button.gif" border="0" alt="button!" />>
<</button>>

Renderings unfortunately might not be as expected:

Click To expand

Supporting the basic syntax and previous example, DOM Level 1 defines the expected properties for the HTMLButtonElement object shown in Table 14-5.

Table 14-5: Properties of the HTMLButtonElement Object Representing <button> Tags

Property

Description

accessKey

Holds the accelerator key string

disabled

Boolean value indicating if field is disabled or not

form

Reference to the enclosing Form object

name

Name of the field (also uses id)

tabIndex

Numeric position in the tabbing order as defined by the tabindex attribute

type

Indicates the type of the button: "button," "reset," or "submit"

value

The value sent to the server if the form is submitted

Focus and blur events can be caught as usual with onfocus and onblur event handlers. Click events and methods are also typically supported in browsers. However, despite its inclusion in W3C standards, the <<button>> tag is inconsistently rendered by older browsers (notably Netscape 4), so designers might instead opt to use common <<input type="submit" />>, <<input type="reset" />>, and <<input type="button" />> tags or even fake the operation of form buttons using links and images (as discussed earlier).

Text Fields

There are three kinds of text input fields: single-line text entries, password fields, and multiline text fields called text areas. A single-line text field is defined by <<input type="text" />>, while a password field is defined by <<input type="password" />>. Under traditional HTML, both of these forms of the <<input>> element support the same attributes, as summarized here:

<<input type="text or password"
       name="unique alphanumeric name for field"
       id="unique alphanumeric name for field"
       maxlength="maximum number of characters that can be entered"
       size="display width of field in characters"
       value="default value for the field" />>

The properties and methods "text" and "password" fields have in addition to those common to all input elements are shown in Table 14-6.

Table 14-6: Additional Properties of Inputs with Type of "text" or "password"

Property

Description

maxLength

The maximum number of characters that can be entered into the field

readOnly

Boolean indicating if the user may modify the contents of the field

select()

Selects the contents of the field, for example, in preparation for replacement or copying to the clipboard

The following example shows the use of text fields and their properties and methods, including both reading and setting values.

<<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">>
<<html>>
<<head>>
<<title>>Textfield Test<</title>>
<<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />>
<</head>>
<<body>>
<<h2 align="center">>Test Form<</h2>>
<<form name="testform" id="testform" 
      action="http://www.javascriptref.com" method="get">>
<<label>>Text Field 1: <<input type="text" name="text1" id="text1" size="20"
               value="Original Value" />><</label>>
<<br />>
<<label>>Text Field 2: <<input type="text" name="text2" id="text2" size="20"
               maxlength="20" />><</label>>
<<br />>
<<input type="button" value="Check Value"
       onclick="alert(document.testform.text1.value);" />>

<<input type="button" value="Set Value"  
  onclick="document.testform.text1.value=document.testform.text2.value;"
 />>

<<input type="button" value="Toggle Disabled"
onclick="document.testform.text1.disabled=!(document.testform.text1.disabled
);" />>

<<input type="button" value="Toggle Readonly"
onclick="document.testform.text1.readOnly=!(document.testform.text1.readOnly
);" />>

<<input type="button" value="Focus"         
       onclick="document.testform.text1.focus();" />>
<<input type="button" value="Blur" 
       onclick="document.testform.text1.blur();" />>
<<input type="button" value="Select" 
       onclick="document.testform.text1.select();" />>
<</form>>

<<hr />>
<<h2 align="center">>Common Field Properties<</h2>>
<<script type="text/javascript">>
<<!-- 
   document.write("defaultValue: " + document.testform.text1.defaultValue+"<<br />>");
   document.write("form: "+document.testform.text1.form+"<<br />>");
   document.write("form.name: " + document.testform.text1.form.name+
"<<br />>");
   document.write("name: "+document.testform.text1.name+"<<br />>");
   document.write("type: "+document.testform.text1.type+"<<br />>");
   document.write("value: "+document.testform.text1.value+"<<br />>");
//-->>
<</script>>
<</body>>
<</html>>

A rendering of this example is shown in Figure 14-2.

Click To expand
Figure 14-2: Text fields being tested

Textareas

Closely related to inputs of type "text" are <<textarea>> tags, multiline text entry fields. The basic syntax for <<textarea>> is

<<textarea name="field name" id="field name"

          rows="number of rows" cols="number of columns">>

Default text for the field

<</textarea>>

Even though it is not, strictly speaking, an <<input>> tag, the HTMLTextAreaElement has all the properties and methods of inputs of type "text", plus those listed in Table 14-7. It does not, however, have a maxLength property.

Table 14-7: Unique Properties of the HTMLTextAreaElement Object

Property

Description

cols

Width of the input area in characters

rows

Height of the input area in characters

Using a <<textarea>> in JavaScript is pretty much the same approach as using a standard single-line text field or password field, the main differences of course being the rows and columns to change the size of the region. Yet the value and defaultValue may be slightly different since a <<textarea>> may have return characters or other things that are escaped in JavaScript. Finally, the type property will report the field as a textarea rather than text. This brief example demonstrates basic use of JavaScript and a <<textarea>>.

<<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">>
<<html>>
<<head>>
<<title>>Textarea Test<</title>>
<<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />>
<</head>>
<<body>>
<<h2 align="center">>Test Form<</h2>>
<<form name="testform" id="testform" 
      action="http://www.javascriptref.com" method="get">>
<<label>>Textarea 1: 
 <<textarea name="field1" id="field1" rows="5" cols="40">>
     This is some
           default text
<</textarea>><</label>>
<<br />><<br />>

<<input type="button" value="Check Value"
 onclick="alert(document.testform.field1.value);" />>

<<input type="button" value="Set Value"
 onclick="document.testform.field1.value='this is a \n\n\n\t\t test!';" />>
<<br />>
<<input type="button" value="Change Rows"

onclick="document.testform.field1.rows=document.testform.rowsField.value;"
 />>
<<input type="text" name="rowsField" id="rowsField" value="2" 
       size="2" maxlength="2" />>
<<br />>

<<input type="button" value="Change Cols" 

onclick="document.testform.field1.cols=document.testform.colsField.value;"
 />>
<<input type="text" name="colsField" id="colsField" value="10"
       size="2" maxlength="2" />>
<<br />>
<</form>>
<<hr />>
<<h2 align="center">>Common Field Properties<</h2>>
<<script type="text/javascript">>
<<!-- 
   document.write("defaultValue: " + document.testform.field1.defaultValue+"<<br />>");
   document.write("form: "+document.testform.field1.form+"<<br />>");
   document.write("form.name: " + document.testform.field1.form.name+
"<<br />>");
   document.write("name: "+document.testform.field1.name+"<<br />>");
   document.write("rows: "+document.testform.field1.rows+"<<br />>");
   document.write("cols: "+document.testform.field1.cols+"<<br />>");
   document.write("type: "+document.testform.field1.type+"<<br />>");
   document.write("value: "+document.testform.field1.value+"<<br />>");
//-->>
<</script>>
<</body>>
<</html>>

One interesting aspect of the <<textarea>> tag that bears some discussion is that there is no obvious way to set the maximum amount of content that can be entered in the field. For browsers that support all the core events, such as onkeypress, we could easily limit the field using script, as shown here:

<<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">>
<<html>>
<<head>>
<<title>>Limited Text Area<</title>>
<<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />>
<</head>>
<<body>>
<<form name="myform" id="myform" action="#" method="get">>
<<label>>Comments:<<br />>
<<textarea name="comments" id="comments" rows="4" cols="40"
onkeypress="return (document.myform.comments.value.length << 100);">>
Will be limited to 100 characters in a compliant browser.
<</textarea>>
<</label>>
<</form>>
<</body>>
<</html>>

Of course, the preceding script will not work in many older browsers because they do not support the onkeypress event. A possible workaround to deal with the unlimited field length is to examine length of the field’s value when its contents change (or at submit time) and reduce it to the proper number of characters. The example here illustrates one possible approach to this problem:

<<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">>
<<html>>
<<head>>
<<title>>Limited Text Area Take 2<</title>>
<<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />>
<<script type="text/javascript">>
<<!--
function checkLimit(field, limit)
{
 if (field.value.length >> limit)
  {
   alert("Field limited to "+limit+" characters");
   // Truncate at the limit
   var revertField = field.value.slice(0, limit-1);
   field.value = revertField;
   field.focus();
  }
}
//-->>
<</script>>
<</head>>
<<body>>
<<form id="myform" name="myform" action="#" method="get">>
<<label>>Comments:<<br />>
<<textarea id="comments" name="comments" rows="8" cols="40"
onchange="checkLimit(this, 100);">>
Try entering 10 more characters to surpass the 100 character limit 
on this field, then click outside the textarea.
<</textarea>>
<</label>>
<</form>>
<</body>>
<</html>>
Note 

A troublesome aspect of the <<textarea>> tag is that the wrapping of text is not supported in a standard way between browsers. The nonstandard wrap attribute can be set to a value too “soft” to enforce word wrapping in most browsers. Oddly, HTML 4.0 and the DOM do not address this issue, but most browser JavaScript object models typically support access to this HTML property. If word wrapping behavior is critical to your application, you will have to address the issue on a browser-by-browser basis.

Checkboxes and Radio Buttons

Checkboxes and radio buttons (“radios,” for short) have much more limited functionality than a text field, and thus there is less to manipulate via JavaScript. In terms of (X)HTML syntax, checkboxes and radio buttons are very similar, and both use the <<input>> tag. The basic HTML syntax for checkboxes and radios follows here:

<<input type="checkbox or radio"
           name="field name"
           id="field name"
           value="value for submission"
           checked="true or false" />>

The JavaScript objects corresponding to these elements have all the properties of normal input elements, plus those listed in Table 14-8.

Table 14-8: Additional Properties of <input> with Type of "radio" or "checkbox"

Property

Description

checked

Boolean indicating the state of the field

defaultChecked

Boolean indicating whether the field was checked when the page loaded

Two attributes of checkboxes and radios require some extra discussion. First is the checked attribute, which simply sets the field to be checked by default when the page loads or is reset (it is reflected in the corresponding object as the checked and defaultChecked properties). Second, the content of the value attribute is sent to a server-side program upon form submission if the field is checked. For example, given <<input type="checkbox" name="testbox" id="testbox" value="green" />>, the name-value pair testbox=green is transmitted when the field is checked. However, if no value attribute is provided, a value of on is transmitted instead, resulting in the pair testbox=on.

Like other <<input>> fields, you can of course invoke the blur() and focus() methods for checkboxes as well as radios. These fields also support the click() method to change the state of the control. Given these methods, the events onblur, onclick, and onfocus are supported. The event onchange is also very useful with these fields.

An important consideration with checkboxes and radios is how they are named. Typically, checkboxes are named differently and have their own values, as shown here:

<<form name="testform" id="testform">>
Mustard: <<input type="checkbox" name="mustard" id="mustard" />>
Ketchup: <<input type="checkbox" name="ketchup" id="ketchup" />>
<</form>>

Given that each checkbox has its own name, access to them is similar to other form elements. In the previous example, you would access the two checkboxes via document .testform.mustard and document.testform.ketchup. However, if checkboxes share the same name, or in the case of radio buttons where they must be the same, you will have a very different approach to accessing the fields from JavaScript.

Collections of Checkboxes and Radio Buttons

Checkboxes and radio buttons with the same name are accessible as a JavaScript collection by the name they share. For example, given the following,

<<form name="testform" id="testform">>
Mustard: 
<<input type="checkbox" name="condiments" id="check1"
value="mustard" />><<br />>
Ketchup: 
<<input type="checkbox" name="condiments" id="check2"
value="ketchup" />><<br />>
Mayo: 
<<input type="checkbox" name="condiments" id="check3"
value="mayo" />><<br />>
<</form>>

we would find that document.testform.condiments is a collection containing the individual checkboxes. We can find the length of the collection through document.testform .condiments.length and even move through elements using array syntax like document .testform.condiments[1].

Radio buttons must be named this way because radios are used to select one item out of many. So the following

Yes: 
<<input type="radio" name="myradiogroup" id="radio1" value="yes" />>
No: 
<<input type="radio" name="myradiogroup" id="radio2" value="no" />>
Maybe: 
<<input type="radio" name="myradiogroup" id="radio3" value="maybe" />>

is correct and works properly, while the following

Yes: 
<<input type="radio" name="myradiogroup" id="radio1" value="yes" />>
No: 
<<input type="radio" name="myradiogroup2" id="radio2" value="no" />>
Maybe: 
<<input type="radio" name="myradiogroup3" id="radio3" value="maybe">>

does not, as it fails to preserve the expected “one of many selection” of radio buttons.

Note 

In the case of grouped items like radios, you may notice that the name and id values do not match up. This is a small variation in XHTML where the id for an element must be unique whereas the name value should not be. Be careful, you really do need to know your markup to take full advantage of JavaScript.

Given that with radio or checkbox groups you will generally have an array of identically named items, you might have to loop through the collection in order to figure out which item was selected. A complete example showing this as well as other radio and checkbox features is presented here; its rendering appears in Figure 14-3.

Click To expand
Figure 14-3: Checkbox/radio example under Internet Explorer
<<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">>
<<html>>
<<head>>
<<title>>radio/checkbox test<</title>>
<<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />>
<<script type="text/javascript">>
<<!--
function showradiovalue(radiogroup)
{
   var numradios = radiogroup.length;

   for (var i = 0; i << numradios; i++)
      if (radiogroup[i].checked)
         alert('radio '+i+' with value of '+radiogroup[i].value);
}
//-->>
<</script>>
<</head>>
<<body>>
<<h2 align="center">>Test Form<</h2>>

<<form name="testform" id="testform" action="#" method="get">>
<<em>>Checkbox: <</em>>
<<input type="checkbox" name="check1" id="check1" value="testvalue" />>
<<br />><<br />>
<<em>>radio buttons: <</em>>
yes:
<<input type="radio" name="radiogroup1" id="radio1" value="yes" />> 
no:
<<input type="radio" name="radiogroup1" id="radio2" value="no" />>
maybe:
<<input type="radio" name="radiogroup1" id="radio3" value="maybe" />>
<<br />><<br />>
<<input type="button" value="Click checkbox" 
       onclick="document.testform.check1.click();" />>
<<input type="button" value="Click radio"
       onclick="document.testform.radiogroup1[0].click();" />>
<<input type="button" value="Focus checkbox"
       onclick="document.testform.check1.focus();" />>
<<input type="button" value="Blur checkbox"
       onclick="document.testform.check1.blur();" />>
<<input type="button" value="Checkbox state"
       onclick="alert('checked?'+document.testform.check1.checked);" />>
<<input type="button" value="Radio state"
       onclick="showradiovalue(document.testform.radiogroup1);" />>
<</form>>
<<hr />>
<<h2 align="center">>Field Properties<</h2>>
<<script type="text/javascript">>
<<!--
with (document)
 {
  write("checked: " + document.testform.check1.checked+"<<br />>");
  write("defaultchecked: "+document.testform.check1.defaultChecked+
"<<br />>");
  write("form: " + document.testform.check1.form+"<<br />>");
  write("form.name: " + document.testform.check1.form.name+"<<br />>");
  write("name: " + document.testform.check1.name+"<<br />>");
  write("type: " + document.testform.check1.type+"<<br />>");
  write("value: " + document.testform.check1.value+"<<br />><<br />>");
  write("radiogroup array:" + document.testform.radiogroup1+"<<br />>");
  write("radiogroup array length:" +
 document.testform.radiogroup1.length+"<<br />>");
  for (var i=0; i << document.testform.radiogroup1.length; i++)
    write("radiogroup["+i+"].value:" + 
          document.testform.radiogroup1[i].value+"<<br />>");
 }
//-->>
<</script>>
<</body>>
<</html>>

Hidden Fields

Hidden form fields are defined using <<input type="hidden" />>. They’re used to keep control of state information for server-side programs. Hidden form elements will never render onscreen, though their name-value pair will be sent during form submission. Because it is non-visual and non-interactive, the XHTML syntax of a hidden field is essentially the following:

<<input type="hidden" name="fieldname" id="fieldname" value="fieldvalue" />>

The JavaScript properties useful for manipulation of hidden fields are simply disabled, form, id, name, and value (which have been discussed for text fields previously). Hidden fields may not seem terribly useful to some readers, but for many state-preservation tasks, they are often hard to replace. We’ll see some interesting possibilities for this form field when discussing form validation later in the chapter.

Note 

Hidden fields have a dangerous downside when used for state control information—they are easily viewable and changeable by curious or malicious end users.

File Upload Fields

The final type of the <<input>> is the file upload control as defined by <<input type="file" />>. The basic XHTML syntax for the field is

<<input type="file" 
       id="field name"
       name="field name"
       size="field width in characters"
       accept="MIME types allowed for upload" />>

The tag creates a file upload field similar to this one in supporting browsers.

Click To expand

File upload fields have one extra property shown in Table 14-9 in addition to those provided by the HTMLInputElement. The accept attribute is used to define the MIME types the user may upload. Unfortunately, given the lack of browser support for this attribute, it is useless.

Table 14-9: Additional Property of <input> with Type "file"

Property

Description

accept

Comma-separated list of MIME types of files the user is permitted to upload

Note 

A common oversight with file upload fields is that in order to work, the form must have method="POST ", and the enctype attribute must be set to “multipart/form-data”.

Select Menus

In (X)HTML, the <<select>> tag is used to create two different kinds of pull-down menus. The first and most common is a single-choice menu, often simply called a pull-down. The second form of the menu allows for multiple choices to be made and is generally referred to as a scrolled list. Under JavaScript, we traditionally refer to both tags through one object, simply termed the Select object. Under the DOM Level 1, this combination is preserved, but the object is correctly known as the HTMLSelectElement.

To begin the discussion, we first present an example of both the common single-item pull-down and the multiple-choice item in XHTML:

<<strong>>Single Robot Choice:<</strong>> 
<<select name="robot" id="robot">>
      <<option>>Security<</option>>
      <<option>>Trainer<</option>>
      <<option>>Friend<</option>>
      <<option>>Cook<</option>>
<</select>>

<<br />><<br />>

<<strong>>Multiple Robot Choice:<</strong>> 
<<select name="robotMulti" id="robotMulti" size="4" multiple="multiple">>
      <<option>>Security<</option>>
      <<option>>Trainer<</option>>
      <<option>>Friend<</option>>
      <<option>>Cook<</option>>
<</select>>

An HTMLSelectElement has the properties and methods common to other form fields (name, disabled, size, tabIndex, form, focus(), and blur()) as well as the additional properties and methods shown in Table 14-10. A few of these require some discussion. First is multiple, the presence of which indicates the menu to be a multiple-select menu. The size attribute is used to indicate the number of choices that are shown in the field; by default, the value for this attribute is 1.

Table 14-10: Additional Properties and Methods of an HTMLSelectElement Object

Property

Description

length

Number of <option>s this element contains (the length of the options[] collection).

multiple

Boolean indicating whether the user can select more than one of the options.

SelectedIndex

Index of the currently selected option in the options[] collection. If multiple is true, only the first selected choice will be held in this property.

Size

Number of options visible at once (1 for a pull-down, more than 1 for scrolled list).

options[]

Collection of Options contained by the <select>.

value

String holding the value attribute of the currently selected option. If multiple is true, only the value of the first selected option is present.

add(element, before)

Inserts the new Option element before the Option before.

remove(index)

Deletes the Option at position index in the options[] collection.

Note 

The value property of the Select object is not widely supported in old browsers. Avoid using it for this reason. Instead, use the selectedIndex in conjunction with the options[] collection to extract the selected value manually.

Many of the similar event handlers like onfocus are available for the object, but the most useful event handler for <<select>> is onchange, which is fired whenever the user selects a different option in the menu.

The key to scripting a select menu, be it a single- or multiple-choice menu, is an awareness of how to examine the options[] collection for the currently selected value. Given a single-choice menu, the currently selected option is held in the selectedIndex property and is easily obtained. For example, given a <<select>> called testselect in a form called testform, document.testform.testselect.selectedIndex would reference the particular option in question. To see the value of the selected option, you would have to use a fairly long statement like alert(document.testform.testselect.options[document.testform.testselect .selectedIndex].value). As you can see, that becomes unwieldy very quickly, so often the this shorthand form is used with <<select>>, as demonstrated here:

<<form>>
    <<select
     onchange="alert(this.options[this.selectedIndex].value);">>
          <<option value="value one">>Option 1<</option>>
          <<option value="value two">>Option 2<</option>>
          <<option value="value three">>Option 3<</option>>
    <</select>>
<</form>>

However, when the multiple attribute is true you will need to loop through the options[] collection to find all the selected items:

<<script type="text/javascript">>
<<!--
function showSelected(menu)
  {
   var i, msg="";
   for (i=0; i << menu.options.length; i++)
      if (menu.options[i].selected)
         msg += "option "+i+" selected\n";

   if (msg.length == 0) 
      msg = "no options selected";
    alert(msg);
  }       
//-->>
<</script>>
<<form name="myform" id="myform">>
  <<select name="myselect" id="myselect" multiple="true">>
    <<option value="Value 1" selected="true">>Option 1<</option>>
    <<option value="Value 2">>Option 2<</option>>
    <<option value="Value 3" selected="true">>Option 3<</option>>
    <<option value="Value 4">>Option 4<</option>>
    <<option value="Value 5">>Option 5<</option>>
   <</select>>
  <<br />>
  <<input type="button" value="Show Selected"
         onclick="showSelected(document.myform.myselect);" />>
<</form>>

Option Elements

Now that we’ve covered how to access options in a select menu, let’s take a look at the properties of the Option element itself. These objects have most of the attributes and methods of other form elements, plus those listed in Table 14-11.

Table 14-11: Additional Properties of the HTMLOptionElement Object

Property

Description

defaultSelected

Boolean indicating if this option is selected by default (i.e., whether the <option> tag had attribute selected).

index

Number indicating the slot at which this option can be found in its containing Select's options[] collection.

selected

Boolean indicating if this option is currently selected.

Text

String holding the text found enclosed by the opening and closing <option> tags. This is often confused with value; since the text enclosed by the <option> tags is sent to the server, its value is not specified.

value

String holding the text of the value attribute, which will be sent to the server if the option is selected at submission time.

Scripting Select Menus

The fact that form fields are scriptable means that you can affect the appearance or content of one element in response to actions users perform on another. We’ll see this technique several times later in this chapter, but perhaps the most common application is with select menus.

Related select menus provide the ability to present a large number of options very quickly to the user. The key to building such menus in JavaScript is understanding how to edit or even add new <<option>>s to a menu on the fly. The traditional way to do this in JavaScript is to use the new operator on the Option() constructor, and then insert the resulting option into the menu.

The Option constructor syntax is

var newOption = new Option(optionText, optionvalue);

where optionText is a string holding the text enclosed by the opening and closing <<option>> tags and optionValue is a string specifying the element’s value attribute.

Once created, Option objects can be inserted into the options[] collection for a select menu. You can delete any unused entries by setting their values to null. The following simple example provides two menus, one with a country and another with a list of cities. The city menu will change dynamically when the user chooses a country.

<<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">>
<<html>>
<<head>>
<<title>>Related Select Test<</title>>
<<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />>
<<script type="text/javascript">>
<<!--
// Create an array to hold the cities for each country
var cities = new Array(4);
cities["Australia"] =
      ["Sydney", "Melbourne", "Canberra", "Perth", "Brisbane"];
cities["France"] = 
      ["Paris", "Lyons", "Nice", "Dijon"];
cities["Japan"] = ["Tokyo", "Kyoto", "Osaka", "Nara"];
cities["New Zealand"] = 
      ["Auckland", "Wellington", "Christchurch", "Dunedin", "Queenstown"];

function removeOptions(optionMenu)
{
  for (var i=0; i << optionMenu.options.length; i++)
    optionMenu.options[i] = null;
}

function addOptions(optionList, optionMenu)
{
 removeOptions(optionMenu);  // clear out the options
 for (var i=0; i << optionList.length; i++)
   optionMenu[i] = new Option(optionList[i], optionList[i]);
}
//-->>
<</script>>
<</head>>
<<body>>
<<h2>>Vacation Chooser<</h2>>
<<form name="testform" id="testform" action="#" method="get">>
Country:
<<select name="country" id="country"
 onchange="addOptions(cities[this.options[this.selectedIndex].text], 
                             document.testform.city);">>
      <<option selected="selected">>Australia<</option>>
      <<option>>France<</option>>
      <<option>>Japan<</option>>
      <<option>>New Zealand<</option>>
<</select>>

City:
<<select name="city" id="city">>
      <<option>>Sydney<</option>>
      <<option>>Melbourne<</option>>
      <<option>>Canberra<</option>>
      <<option>>Perth<</option>>
      <<option>>Brisbane<</option>>
<</select>>
<</form>>
<</body>>
<</html>>

The previous example illustrated the traditional approach to dynamic manipulation of select menus. Internet Explorer as well as DOM Level 1–compliant browsers support the add(element,before) and remove(index) methods to more easily work with the list of options in a <<select>> menu. The remove() method works the same in Internet Explorer as it does in the DOM, but the add() method can be tricky. In the case of the DOM, add() expects the before parameter to indicate a particular HTMLOptionElement object, while, traditionally, in Internet Explorer, an index value was passed.

Option Groups

A relatively unknown and often poorly supported tag for menus called <<optgroup>> can be used to segment option choices or even to create submenus. For example, consider the markup shown here:

<<select name="robotchooser" id="robotchooser">>
   <<option>>Choose your robot<</option>>
   <<option>>-------------------------<</option>>
   <<option>>Butler<</option>>
   <<optgroup label="Security Models">>
      <<option>>Man<</option>>
      <<option>>K-9<</option>>
   <</optgroup>>
   <<optgroup label="Friend Models">>
      <<option>>Female<</option>>
      <<option>>Male<</option>>
   <</optgroup>>
   <<option>>Trainer<</option>>
<</select>>

In a standards-support browser such as Netscape 6 or later, you would probably see something like that shown on the right.

The DOM provides only two properties to manipulate this element via the HTMLOptGroupElement object beyond those standard to any (X)HTML element, and they are shown in Table 14-12. Strangely, unlike with select elements, the DOM does not provide shortcut methods to manipulate the options enclosed by the <<optgroup>> tags, nor are the form or similar properties defined.

Table 14-12: Specific DOM Properties of HTMLOptGroupElement Objects

Property

Description

disabled

Boolean indicating whether the user may interact with this option group

label

String holding the text of this option group's label

Other Form Elements: Label, Fieldset, and Legend

HTML supports a few other tags for forms that are primarily related to accessibility improvements and style sheets. For example, the <<label>> tag applies a label to the form fields it encloses for both improved usability and non-visual user agents. The following are two examples of the use of the <<label>> tag:

<<form action="#" method="get">>
<<label>>Username: 
<<input type="text" id="username" name="username" />>
<</label>><<br />>
<<label for="userpassword">>Password: <</label>>
<<input type="password" id="userpassword" name="userpassword" />>
<</form>>

The properties supported by the HTMLLabelElement object beyond the standard DOM properties and methods for (X)HTML elements are shown in Table 14-13. Notice the use of htmlFor to represent the for attribute, in view of the fact that, under JavaScript, for is a reserved keyword. We’ll see another use of <<label>> later in the chapter to improve form usability.

Table 14-13: Properties of the HTMLLabelElement Object

Property

Description

accessKey

String holding the accelerator key giving focus to this element as defined by the accesskey attribute

form

Reference to the Form object containing this element

htmlFor

String containing the value of the name or id attribute of the element to which this label applies

The <<fieldset>> tag is used to define a grouping of a set of elements. The <<legend>> tag is used within <<fieldset>> to create a label for the grouping. Here is an example of the usage of the two tags.

<<form action="#" method="get">>
<<fieldset>>
<<legend>>Login Info<</legend>>
<<label>>Username: 
<<input type="text" id="username" name="username" />>
<</label>><<br />>
<<label for="userpassword">>Password: <</label>>
<<input type="password" id="userpassword" name="userpassword" />>
<</fieldset>>
<</form>>

Generally, a browser will render elements within a <<fieldset>> within a box, as shown here.

There is very limited control over <<fieldset>> and <<legend>> from JavaScript, even when the DOM is supported. The properties over and above the core (X)HTML properties supported by the HTMLFieldSetElement and the HTMLLegendElement objects are shown in Tables 14-14 and 14-15, respectively. As you can see, there is really little that can be done with these tags interactively.

Table 14-14: The Extra Property Supported by the HTMLFieldSetElement Object

Property

Description

form

Reference to the form containing the element the object represents.

Table 14-15: Properties of the HTMLLegendElement Object

Property

Description

accessKey

String containing the accelerator key giving focus to the element as defined by the accesskey attribute

align

String indicating alignment of the element ("top", "bottom", "right", or "left")

form

Reference to the form containing the element the object represents

Now that we have reviewed how to access all types of (X)HTML form elements from JavaScript, it is time to put our knowledge to work by improving form usage through validation, usability improvements, and dynamic forms.


Team LiB
Previous Section Next Section