Working with Form Elements | Dreamweaver MX Extensions

Almost every extension you make will involve collecting and processing user input using HTML forms. It's important that you know how to code the standard form elements and how to access each element to collect its value. Note that each form and each form element in a document must have a unique name before its value can be accessedexcept radio buttons , which must be named as a group .

note

Experienced scripters know that forms and form elements can also be referred to as members of arrays in the document. The first form in a document is form[0] , the first input element in a form as form.elements[0] , and so forth. The exercises and projects in this book all use names to access form elements, so accessing them as array members is not covered here.

Form

The form itself has the following syntax:

 <form name="myForm">  [form elements go here]  </form>

For use within extensions, the <form> tag doesn't require a method or action attribute.

Text Fields

The basic required code for a text field looks like this:

 <input type = "text" name = "myTextField">

To specify the width of the text field, use one of the following methods (new code is in bold):

 <input type = "text" name = "myTextField"  size = "10"  >  <input type = "text" name = "myTextField"  style = "size:10px"  >

The first method measures how many characters will show in the field; the second measures its size in pixels.

The JavaScript expression that collects a text field's value looks like this:

 document.myForm.myTextField.value

The following function collects the value stored in a text field called username , in a form called myForm , and puts it in an alert window:

 function greetMe() {  var greeting = "Hello, " + document.myForm.username.value + "!";  alert(greeting);  }

Checkboxes

The code for a checkbox looks like this:

 <input type = "checkbox" name = "myCheckBox"  value="myValue">

To specify that a checkbox is selected by default, add the following optional attribute (shown in bold):

 <input type = "checkbox" name = "myCheckBox" value="myValue"  checked  >

The JavaScript expression that determines whether a checkbox has been selected or not looks like this:

 document.myForm.myCheckBox.checked

If the checkbox has been selected, this expression will evaluate as true; if not, it will evaluate as false.

Listing A.1 show the code for a document with a form containing a checkbox and input button. Clicking the button calls a function that determines whether the checkbox has been selected, and if it has been, it displays an alert window:

Listing A.1 A Document with a Form Containing a Checkbox and Input Button

 <html>  <head>  <title>Checkbox Test</title>  <script language="JavaScript">  function greetMe() {  if (document.myForm.greeting.checked) {    alert("Greetings!");    }  }  </script>  </head>  <body>  <form name="myForm">  <input type="checkbox" name="greeting">  <input type="button" value="Click" onClick="greetMe()">  </form>  </body>  </html>

Radio Buttons

Unlike other form elements, radio buttons come in groups. Each group has a unique name. Only one member of the group at a time is allowed to be selected. The code for a group of two radio buttons looks like this:

 <input type = "radio" name = "myRadioGroup" value = "Fred">  <input type = "radio" name = "myRadioGroup" value = "Barney">

To indicate that one of the members in the group should be selected by default, add the following optional attribute (shown in bold):

 <input type = "radio" name = "myRadioGroup" value = "Barney"  checked  >

In JavaScript, the radio button group is treated like an array. The JavaScript expression that determines whether a particular member of a radio button group has been selected looks like this (using 0 to test the first member of the group):

 document.myForm.myRadioGroup[0].checked

The following function steps through an array of radio buttons looking for the one that is selected; when it finds the selected radio button, it displays an alert window and stops looking:

 function greetMe() {  for (var a=0;a<document.myForm.myRadioGroup.length;a++) {    if (document.myForm.myRadioGroup[a].checked) {      alert("Greetings, " + document.myForm.myRadioGroup[a].value);      break;      }    }  }

Listing A.2 shows the code for a document with a form containing two radio buttons and an input button. Clicking the button calls a function that determines which radio button has been selected and displays an appropriate greeting in an alert window:

Listing A.2 A Document with a Form Containing Two Radio Buttons and an Input Button

 <html>  <head>  <title>Radio Button Test</title>  <script language="JavaScript">  function greetMe() {  for (var a=0;a<document.myForm.myRadioGroup.length;a++) {    if (document.myForm.myRadioGroup[a].checked) {      alert("Greetings, " + document.myForm.myRadioGroup[a].value);      break;      }    }  }  </script>  </head>  <body>  <form name="myForm">  <input type = "radio" name = "myRadioGroup" value = "Fred" checked>  <input type = "radio" name = "myRadioGroup" value = "Barney">  <input type="button" value="Click" onClick="greetMe()">  </form>  </body>  </html>

Popup Menus

The popup menu (sometimes called the dropdown menu) is the most complex of the standard form elements to create. The HTML code looks like this:

 <select name="myMenu">      <option value="Fred">Fred</option>      <option value="Barney">Barney</option>      <option value="Wilma">Wilma</option>      <option value="Betty">Betty</option>  </select>

To specify a particular option as selected by default, add the following optional attribute (shown in bold):

 <option value="one"  selected  >First Item</option>

Accessing the value of a menu involves two stepsdetermining which option in the menu has been selected, and accessing the value of that option. The JavaScript code looks like this:

 myChoice = document.myForm.myMenu.selectedIndex;  myValue = document.myForm.myMenu.options[myChoice].value;

As with radio buttons, the menu's options form an array that is accessed by number.

The following function looks through an array called myMenu , in a form called myForm , to find the selected option and greets the person named in that option:

 function greetMe() {  myChoice = document.myForm.myMenu.selectedIndex;  myName = document.myForm.myMenu.options[myChoice].value;  window.alert("Greetings, " + myName + "!");  }

Listing A.3 shows the code for a document with a form containing a popup menu and an input button. Clicking the button calls a function that determines which menu option has been selected and displays a greeting in an alert window:

Listing A.3 A Document with a Form Containing a Popup Menu and an Input Button

 <html>  <head>  <title>Select Menu Test</title>  <script language="JavaScript">  function greetMe() {  myChoice = document.myForm.myMenu.selectedIndex;  myName = document.myForm.myMenu.options[myChoice].value;  window.alert("Greetings, " + myName + "!");  }  </script>  </head>  <body>  <form name="myForm">    <select name="myMenu">      <option value="Fred">Fred</option>      <option value="Barney">Barney</option>      <option value="Wilma">Wilma</option>      <option value="Betty">Betty</option>    </select>  </form>  </body>  </html>

Buttons

When creating forms for use with Dreamweaver extensions, you don't have to create your own buttons for basic functions like OK and Cancel. But you might want to create buttons for other purposes. The HTML code for a button looks like this:

 <input type = "button" value = "Click Me">

The value attribute determines what text will appear in the button. The button can also have a name, but it isn't necessary for most form uses because buttons don't store user input.

Form Elements and Event Handlers

Most form elements can have event handlers (and therefore function calls) attached to them.

Buttons, radio buttons, and checkboxes can have the onClick event handler attached to them, like this:

 <input type = "button" value = "Click Me" onClick="greetMe()">

Popup menus, radio buttons, and checkboxes can have the onChange event handler attached to themthis handler triggers a function to execute whenever the user chooses a new option from the list:

 <select name="myMenu" onChange = "greetMe()">

Text fields can have the onBlur event handler attached to themthis handler triggers a function to execute whenever the user enters text in the field and then moves on to interact with another form element:

 <input type = "text" name= "myTextField" onBlur = "greetMe()">

Listing A.4 shows the code for a document that contains an HTML form with two radio buttons and one text field. Clicking either of the radio buttons changes the value of the text field to match its own value.

Listing A.4 A Document That Contains an HTML Form with Two Radio Buttons and One Text Field

 <html>  <head>  <title>Form Test</title>  <script language="JavaScript">  function setMe() {  for (var a=0;a<document.myForm.myRadioGroup.length;a++) {    if (document.myForm.myRadioGroup[a].checked) {     document.myForm.myTextField.value=document.myForm.myRadioGroup[a].value;      break;        }     }  }  </script>  </head>  <body>  <form name="myForm">     <input type="radio" name="myRadioGroup" value="Fred"  onChange="setMe()">     <input type="radio" name="myRadioGroup" value="Barney"  onChange="setMe()">      <input type="text" name="myTextField">  </form>  </body>  </html>

To get some practice using form elements and calling on their values, create files using the code in the previous listings and try them out in a browser. You'll be getting the hang of coding forms in no time.