Week 4

1. Week 4 • Using PHP with HTML forms • Form Validation • Create your own Contact form Please Visit: http://www.jandcconsultants.com/school/ to download all the PowerPoint Slides for the different weeks

2. HTML Forms <form method="post"name="myform"id="myform"action="<?php echo $_SERVER['PHP_SELF'];?>"> Name: <input type="text"name="fullname"id="fullname"style="width: 250px;"> <br> E-Mail: <input type="text"name="email"id="email"style="width: 250px;"> <br> Phone: <input type="text"name="phone"id="phone"style="width: 200px;"> <br> Comment: <textarea name="comment"id="phone"style="width: 250px; height: 150px;"></textarea> <br> <input type="submit"value="Submit" name="submit" id="submit"> <input type="button"value="Clear" name="clear" id="clear" onclick="document.getElementById('name').value = ''; document.getElementById('email').value = ''; document.getElementById('comment').value = ''; document.getElementById('phone').value = ''; "> </form> What is an HTML form? A series of inputs (text areas, text boxes, file browsers, etc.) that allow you to communicate with users of your Web site. HTML Form Example

3. Using PHP with HTML Forms <?php //Check if the Form was Submitted $posted = false; if(isset($_POST['s1'])) { $posted = true; $fullname = $_POST["fullname"]; $email = $_POST["email"]; $phone = $_POST["phone"]; $comment = $_POST["comment"]; $subject = "MyWebsite.Com: Contact Us Submission"; $date_sent = date("Y-m-d H:i:s", time()); //Example: 2008-05-23 18:48:16 } if($posted) { echo "<h1> <font color=green>Submission Succesful! Sent on " . $date_sent . "</font></h1>;" echo "Fullname: " . $fullname . "<br>"; echo "E-Mail: " . $email . "<br>"; echo "Phone: " . $phone . "<br>"; echo "Comment: " . $comment . "<br>"; } else {" <h1>Submission Failed!</h1> "; } ?> So the user hits ‘Submit’ – what happens now? We must now handle the information passed from the HTML form. Let’s say the following was entered when the form was submitted:

4. Form Validation <script> //Used to Validate a Regular Field function validate_required(field,alerttxt { with (field) { if (value==null||value=="") { alert(alerttxt);return false; } else{ return true;} } } //Used to Validate the Email Field function validate_email(field,alerttxt) { with (field) { apos=value.indexOf("@"); dotpos=value.lastIndexOf("."); if (apos<1||dotpos-apos<2){ alert(alerttxt);return false;} else {return true;} } } //Used to Validate the Whole Form function validate_form(thisform) { with (thisform) { //Validate the 'fullname' is not empty if (validate_required(fullname,"Your Name must be filled out!")==false) {fullname.focus(); return false;} //Validate the 'email' is legit if (validate_email(email,"Not a valid e-mail address!")==false) {email.focus(); return false;} //Validate the 'phone' is not empty if (validate_required(phone,"Your Phone Number must be filled out!")==false) {phone.focus(); return false;} return true; } } </script> HTML Form Validation Example • So you want to validate the form that was just submitted? Well you need to use JavaScript to do this • Here is the sample code to validate the form below is not empty when it is submitted:

5. Create Your Own • Alright, now we have learned how to create an HTML form and then handle it, lets try it ourselves! Create your own HTML based form with whatever inputs you like! • Open up Adobe Dreamweaver and start on your already opened file if you have one, otherwise you can download the Contact Form with Validation at http://www.jandcconsultants.com/schoo/test2.php • Save the file on your desktop in your created folder as ‘contact.php’ • Fill out the beginning information such as title and set your background color and text color • Modify your already Created Form to include Form Validation. • Add more HTML Form inputs to enhance your Form! Try to add objects such as radio buttons, checkboxes, or select boxes. • When you are finished, make sure to Save your page! • Login to your X10hosting.com created hosting account (or other hosting account if available) and goto the cPanel  File Manager  Web Root (public_html/WWW)  Upload and here you can select the ‘Browse’ and locate your ‘contact.php’ file on your desktop in your created folder, the file will automatically upload • Go back to your cPanel Homepage and find your domain and type it into your browser with /contact.php after it. For example: http://jrod336.x10hosting.com/