The form Object

You enclose HTML controls such as buttons , text fields, check boxes, and so on in forms in order to connect them to JavaScript functions. Form objects, supported by the <FORM> element, correspond to form objects in JavaScript.

We've already seen the form object at work; you use it to access the controls inside the form, as in this example that evaluated JavaScript expressions in the preceding chapter using the forms collectionan array of form objectsin the document object (you can see this code at work in Figure 3.15):

(Listing 04-04.html on the web site)

 <HTML>      <HEAD>          <TITLE>              Using the eval Function          </TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--             function evaluator()              {  document.forms[0].result.value   = eval(document.forms[0].expression.value)  }              // -->          </SCRIPT>      </HEAD>      <BODY>          <H1>Using the eval Function</H1>          <FORM>              <INPUT TYPE="TEXT" NAME="expression">              <INPUT TYPE="BUTTON" ONCLICK="evaluator()" VALUE="  =  ">              <INPUT TYPE="TEXT" NAME="result">          </FORM>      </BODY>  </HTML>

You'll find the properties, methods , and events of the form object in Table 4.8. We'll get all the details on browser version for each property, method, and event in Chapter 12, "Working with Forms, Buttons, Check Boxes, and Radio Buttons."

Table 4.8. The Properties, Methods, and Events of the form Object

Properties	Methods	Events
`acceptCharset`	`addBehavior`	`onactivate`
`action`	`appendChild`	`onbeforeactivate`
`all`	`applyElement`	`onbeforecopy`
`attributes`	`attachEvent`	`onbeforecut`
`autocomplete`	`blur`	`onbeforedeactivate`
`begin`	`clearAttributes`	`onbeforeeditfocus`
`blockDirection`	`click`	`onbeforepaste`
`behaviorUrns`	`cloneNode`	`onblur`
`canHaveChildren`	`componentFromPoint`	`onclick`
`canHaveHTML`	`contains`	`oncontextmenu`
`childNodes`	`detachEvent`	`oncontrolselect`
`children`	`dragDrop`	`oncopy`
`className`	`fireEvent`	`oncut`
`clientHeight`	`focus`	`ondblclick`
`clientLeft`	`getAdjacentText`	`ondeactivate`
`clientTop`	`getAttribute`	`ondrag`
`clientWidth`	`getAttributeNode`	`ondragend`
`contentEditable`	`getBoundingClientRect`	`ondragenter`
`dir`	`getClientRects`	`ondragleave`
`disabled`	`getElementsByTagName`	`ondragover`
`disabled`	`getExpression`	`ondragstart`
`elements`	`hasChildNodes`	`ondrop`
`encoding`	`insertAdjacentElement`	`onfocus`
`enctype`	`insertAdjacentHTML`	`onfocusin`
`end`	`insertAdjacentText`	`onfocusout`
`firstChild`	`insertBefore`	`onhelp`
`hasMedia`	`item`	`onkeydown`
`hideFocus`	`mergeAttributes`	`onkeypress`
`id`	`namedItem`	`onkeyup`
`innerHTML`	`normalize`	`onlosecapture`
`innerText`	`releaseCapture`	`onmousedown`
`isContentEditable`	`removeAttribute`	`onmouseenter`
`isDisabled`	`removeAttributeNode`	`onmouseleave`
`isMultiLine`	`removeBehavior`	`onmousemove`
`isTextEdit`	`removeChild`	`onmouseout`
`lang`	`removeExpression`	`onmouseover`
`language`	`removeNode`	`onmouseup`
`lastChild`	`replaceAdjacentText`	`onmousewheel`
`length`	`replaceChild`	`onmove`
`method`	`replaceNode`	`onmoveend`
`name`	`reset`	`onmovestart`
`nextSibling`	`scrollIntoView`	`onpaste`
`nodeName`	`setActive`	`onpropertychange`
`nodeType`	`setAttribute`	`onreadystatechange`
`nodeValue`	`setAttributeNode`	`onreset`
`offsetHeight`	`setCapture`	`onresize`
`offsetLeft`	`setExpression`	`onresizeend`
`offsetParent`	`submit`	`onresizestart`
`offsetTop`	`swapNode`	`onselectstart`
`offsetWidth`	`urns`	`onsubmit`
`onOffBehavior`		`ontimeerror`
`outerHTML`
`outerText`
`ownerDocument`
`parentElement`
`parentNode`
`parentTextEdit`
`previousSibling`
`readyState`
`scopeName`
`scrollHeight`
`scrollLeft`
`scrollTop`
`scrollWidth`
`sourceIndex`
`syncMaster`
`tabIndex`
`tagName`
`tagUrn`
`target`
`timeContainer`
`title`
`uniqueID`