ADDING FORMS - HTML5 - page 287

elements[0] , using a zero-based counting system. Likewise, forms make up a zero-based
array with the i rst form being forms[0] . ( Note: Both elements and forms are plural, even
though <element> and <form> are singular.)

To help see the parts in a DOM arrangement, the following simple script ( NameID.html in
this chapter's folder at www.wiley.com/go/smashinghtml5 ) demonstrates dif erent
ways of referencing the same objects in a document with forms. h e preferred manner is by
object and property name. h e dif erent combinations are for demonstration only. It also uses
several types of input as well.

<! DOCTYPE HTML >
< html >
< head >
< script type = ”text/javascript” >
FormMaster=new Object();
FormMaster.resolveForm=function()
{
alpha = document.motherShip.elements[0].value;
beta = document.forms[0].secondInput.value;
gamma = document.motherShip.thirdInput.value;
delta = document.forms[0].elements[3].value;
epsilon = document.motherShip.fifthInput.value;
const cr=”\n”;
message=alpha+cr+beta+cr+gamma+cr+delta+cr+epsilon;
document.motherShip.output.value=message;
}
</ script >
< style type = ”text/css” >
h3 {
font-family:”Arial Black”, Gadget, sans-serif;
color:#677E52;
}
body {
font-family:Verdana, Geneva, sans-serif;
color:#89725B;
background-color:#B0CC99;
}
</ style >
< meta http-equiv = ”Content-Type” content = ”text/html; charset=UTF-8” >
< title > DOM and Forms </ title >
</ head >
< body >
<article>
<header>
< h3 > DOM, the Form, and the Nodes </ h3 >
</header>
< form name =motherShip>
< input type =number name =firstInput>
Number < br >
< input type =email name =secondInput>

291