• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

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 collection—an array of form objects—in 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  


  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint