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!
A simple response
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.
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!)
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 attributes 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!
Which method is better to use for your form: Get or Post?
While using HTML forms you can set form methods: "GET" (default) or "POST". Which one to use?
When using the GET method you can access all form variables with the $_GET array in PHP and when using POST you can access all the variables with the help of $_POST. You can also access all variables with the help of the $_REQUEST array. When using the GET method all the submitted data is displayed in the address bar. You will notice that information which is displayed after “?”, will be something like this:
According to PHP Form Tutorials it can be useful, where you want to bookmark a page with some specific query string values. However, the GET method is limited by the URL length (2083 characters in Internet Explorer according to Microsoft) and each of the input values must not override 100 chars. Maybe you also don't want to use the GET method because when submitting important data like passwords, etc, it will be displayed in the address bar.
The POST method has the possibility of much more volume in data sending (usually only limited by the server settings) and it may be used unless it represents benefits in comparing GET method. Some browsers can not correctly bookmark pages which are displayed after HTTP POST method, because the submitted data is displayed in the address bar. When you need the query string, which is retrieved by using the GET method (ineffective by it’s limits), try to use POST method for your forms. You can use the POST method to submit the important information which shouldn’t be displayed in the address bar.
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:firstname.lastname@example.org" 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("email@example.com", $subject, $message);
Make sure you substitute your own email address instead of "firstname.lastname@example.org", 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,
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
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 Website Qualifications 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