Responding to HTML forms with PHP
From Wikiversity
|
Web Design → Responding to HTML forms with PHP
|
One of the simplest and yet most useful things we can do on a Dynamic site is interact with the information provided through our HTML forms!
Contents |
[edit] A simple response
If you haven't already created a form for selling a product or service as part of the Intro to programming with Javascript, create a form now... be creative! You may want to use HTMLDog or W3Schools as references as you go.
Make sure that your form:
- includes at lease two normal input fields where your users can enter their first and last names (they should have name="firstname" and name="lastname" respectively).
- allows a visitor to select a product to purchase,
- allows a visitor to indicate the quantity of the product ("I'd like to buy 4 T-shirts").
- allows visitors to include their billing information.
- you've uploaded your form onto your website (or if you are using your own computer as a web-server, that you've put it in the right place) and test it out.
[edit] Responding to your form
When your form is submitted, we want to let our user know that we've received their submission. Create a new file with the following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My web site: Thanks for that!</title>
</head>
<body>
<h1>Processing your request</h1>
<?php
// First set some variables from the form...
$firstname = $_POST["firstname"];
$lastname = $_POST["lastname"];
echo "<h2>Thank you $firstname.</h2>";
//echo is faster than print
echo "<p>We've received your order as follows:</p>";
echo "<p>Name: $firstname $lastname. </p>";
?>
</body>
</html>
You might want to read through the code to see if it gives you any hints as to what it will do, but don't worry too much about the details just yet.
Save this file as response.php and upload it to the same folder as your form. Test it out by submitting your form again (but don't be disappointed if nothing happens!)
[edit] Connecting your form to your php file
Nothing happened? That's right! We haven't yet connected our form to our php file! All that's left to do is modify our html form tag so that it includes the following two attributes:
<form action="response.php" method="post" >
Note: you might have other attibutes such as onsubmit="checkForm()" inside your form tag - make sure you leave them there!
This now tells our form that the action it should take when the form is submitted is to send all the info to a file called response.php. There are two ways that this can be done with a web form, one is called "post" the other is called "get". We'll learn more about these later, but for the moment it's enough to know that we're "posting" our form information.
Submit your form again and you should now see a result!
Try the following:
- Continue to add to your response.php file so that all the information submitted on your form is printed out like a receipt. Do this in stages, one at a time, testing every time!
For each (sorry, I'll fill in later!)
Now that you've got all the information for your receipt, you might want to make it look a bit prettier!
- Modify your response.php so that it links to your normal stylesheet (just the normal way, nothing special here!)
- If your response is tabular data, try using an HTML table to layout your data.
Sorry (again). you can add the solution yourself here... I'll try to get around to it!
[edit] Sending an email with the form information
In the past, we have used the action attribute of our form to automatically email our forms, like follows:
<form action="mailto:me@myemail.com" method="post">
but this way of collecting information is pretty limited. (TODO:Add limitations)
Now that we're handling our form from PHP, it's really easy to send an email automatically. Try adding the following bit of code to the PHP code in response.php:
// First set the subject of the email:
$subject = "A new order from website";
// Then set the message text of the email. The \n character is for a new line
// so that our email doesn't appear as one big line.
$message = "A new order has been submitted by $firstname $lastname.\n Please respond ASAP";
// Then send it off using the php mail function! Find out the scary details
// at: http://www.php.net/manual/en/function.mail.php
mail("me@myemail.com", $subject, $message);
Make sure you substitute your own email address instead of "me@myemail.com", and then test it out!
The following activities need to be filled out in more detail TODO: Activity 1: Include more of your form information in your email.
TODO: Activity 2: (advanced), try sending an HTML email.
TODO: Activity 3: Use the "Redirect after Post" protocol to avoid the "double submit" problem.
HTML: What is HTML, Advanced HTML Tutorial, HTML Challenges, Lists and Tables, The Structure of HTML, Pen and Paper HTML activities
CSS: Learning Basic HTML and CSS, CSS challenges, Embedded CSS, Basic HTML and CSS Tutorial, Inline CSS, Develop cascading style sheets
PHP: Simple functions in PHP, Dynamic websites, PHP challenges, Dynamic websites with PHP, Generating a receipt with PHP, Responding to HTML forms with PHP,
Javascript: An Introduction to Programming with Javascript, JavaScript Challenges, Getting to know Javascript events, Getting to know the Document Object Model with Javascript, JavaScript pen-n-paper activities, Web Programming Intro, Produce basic client side script for dynamic web pages
XML: XML challenges
Databases: Creating Database Tables
Projects: A small website project, A step-by-step web design project, Build a basic web page, Build a small website
Challenges: Web design challenges, HTML Challenges, AJAX Challenges, CSS challenges, JavaScript Challenges, PHP challenges, XML challenges, Information Architecture Challenges, Introductory algorithm challenges
Activities: Web design group learning activities, Pen and Paper HTML activities, A Web Design Quiz show, Ordering Tasks for a Web Project, Paired Bio Pages, Scoping a Small Project, Emerging Technologies Research Activities
Project management: An introduction to Project Management, Developing a Client Project
Design: Accessibility, Design Principles for Web Design, Design Suggestions
Testing: Testing Website performance, Website Performance Test Plan
Publishing: Getting Your Site On the Web
Certification and standards: Cert IV Websites Qualification in Australia, Australian Qualifications, Web design qualifications
Professional development: Developing your online portfolio, Contribute to personal skill development and learning, Useful Applications, Useful Books, Emerging Technologies, Using the Internet as a Learning Tool
Course meta-information: Web design, About the web design learning project, New Structure, Sample Timetable
