CATCHING INTERACTIVE DATA - HTML5 - page 325

When you enter data into an HTML5 form and click the Submit button, the form data are
sent to the server. In this i rst example, the name and e-mail will be sent from the client-side
HTML5 program to the server-side PHP program, and it'll return HTML to the client. If you
have a remote sever — a hosting service — be sure to include the full URL of the PHP i le.
h is example assumes a localhost with both the HTML5 and PHP i le in the same
directory, but that's just to make it simpler. h e following HTML5 page ( SendData.html in
this chapter's folder at www.wiley.com/go/smashinghtml5 ) will send the data.

<! DOCTYPE HTML >
< html >
< head >
< script type = ”text/javascript” >
SendMaster=new Object();
SendMaster.eLert=function()
{
alert(“Oops! Seems to be a little boo-boo in the e-mail format.”);
}
</ script >
< style type = ”text/css” >
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#336600;
font-size:14px;
background-color:#FFCC33;
}
</ style >
< meta http-equiv = ”Content-Type” content = ”text/html; charset=iso-8859-1” />
< title > Data Sender </ title >
</ head >
< body >
< form action = ”formCatcher.php” method = ”post” >
< fieldset >
< legend > Send Name and Email to PHP </ legend >
< input size = 20 name = ”formName” placeholder= ”Enter Name” >
< p />
< input type =email size = 32 NAME = ”formEmail” placeholder= ”Enter Name”
onInvalid= ”SendMaster.eLert()” >
< p />
</ fieldset >
< input type = ”submit” name = ”sender” value = ”Send” >
</ form >
</ body >
</ html >

329

h e script includes both a text type and email type input form. (If no type of form is
assigned, it defaults to a text type.) An important detail to note is that the Submit button is
given a name ( sender ) that is used by the PHP script to determined whether the data from
this form has been sent.