Passing variables with forms

Lesson 11: Passing variables with forms

Interactive websites require input from users. One of the most common ways to get input is with forms.

In this lesson, we will look at how to build forms and process inputs on the server.

<form>

When you code a form, there are two particular important attributes: action and method.

action: Is used to enter the URL where the form is submitted. It would be the PHP file that you want to handle the input.
method: Can either have the value "post" or "get", which are two different methods to pass data. At this point, you don't need to know much about the difference, but with "get", the data is sent through the URL, and with "post", the data is sent as a block of data through standard input service (STDIN). In the last lesson, we looked at how data is retrieved through the URL using $_GET. In this lesson, we look at how data submitted through a form using the method "post" is retrieved.

An HTML page with a form

The page that contains the form doesn't need to be a PHP file (but it can be). It need not even be on the same site as the file that will receive the data.

In our first example, we will look at a very simple form with one text field:

	<html>
	<head>
	<title>Form</title>
	</head>
	<body>

	<h1>Enter your name</h1>

	<form method="post" action="handler.php">
	<input type="text" name="username">
	<input type="submit">
	</form>

	</body>
	</html>

The result in the browser is a form:

Now we come to the fun part: receiving and handling the data with PHP.

Requesting form data with PHP

When you need to request data submitted through a form (post method), you use $_POST:

	
	$_POST["fieldname"];

Which returns the value of a field in the form. Let us try to use it in an example.

First create a page with a form as above. Then make a PHP page named "handler.php" (notice that this is the name of the page we wrote in the action attribute in our <form>).

The file "handler.php" shall have the following content:

	<html>
	<head>
	<title>Form</title>
	</head>

	<body>

	<?php

	echo "<h1>Hello " . $_POST["username"] . "</h1>";

	?>

	</body>
	</html>

Show example

User input and conditions

In the next example, we will try to use user input to create conditions. First, we need a form:

	<html>
	<head>
	<title>Form</title>
	</head>
	<body>

	<form method="post" action="handler.php">

	<p>What is your name:</p>
	<input type="text" name="username"></p>

	<p>What is your favorite color:
	<input type="radio" name="favoritecolor" value="r" /> Red 
	<input type="radio" name="favoritecolor" value="g" /> Green 
	<input type="radio" name="favoritecolor" value="b" /> Blue </p>

	<input type="submit" value="Submit" />

	</form>

	</body>
	</html>

Which will look like this in the browser:

Now we will use these inputs to create a page that automatically changes background color according to what the user's favorite color is. We can do this by creating a condition (see lesson 6) that uses the data the user has filled out in the form.

	<?php

	$strHeading = "<h1>Hello " . $_POST["username"] . "</h1>";

	switch ($_POST["favoritecolor"]) {
	case "r":
		$strBackgroundColor = "rgb(255,0,0)";
		break;
	case "g";
		$strBackgroundColor = "rgb(0,255,0)";
		break;
	case "b":
		$strBackgroundColor = "rgb(0,0,255)";
		break;
	default:
		$strBackgroundColor = "rgb(255,255,255)";
		break;
	}

	?>

	<html>
	<head>
	<title>Form</title>

	</head>
	<body style="background: <? echo $strBackgroundColor; ?>;">

	<? echo $strHeading; ?>

	</body>
	</html>

The background color will be white if the user has not chosen any favorite color in the form. This is done by using default to specify what should happen if none of the above conditions are met.

But what if the user does not fill out his name? Then it only says "Hello" in the title. We will use an extra condition to change that.

	<?php

	$strUsername = $_POST["username"];
	 
	if ($strUsername != "") {
	    $strHeading = "<h1>Hello " . $_POST["username"] . "</h1>";
	}
	else {
	    $strHeading = "<h1>Hello stranger!</h1> ";
	}

	switch ($_POST["favoritecolor"]) {
	case "r":
		$strBackgroundColor = "rgb(255,0,0)";
		break;
	case "g";
		$strBackgroundColor = "rgb(0,255,0)";
		break;
	case "b":
		$strBackgroundColor = "rgb(0,0,255)";
		break;
	default:
		$strBackgroundColor = "rgb(255,255,255)";
		break;
	}

	?>

	<html>

	<head>

	<title>Form</title>
	</head>
	<body style="background: <? echo $strBackgroundColor; ?>;">

	<? echo $strHeading; ?>

	</body>
	</html>

Show example.

In the example above, we use a condition to validate the information from the user. In this case, it might not be so important if the user did not write his name. But as you code more and more advanced stuff, it's vital that you take into account that the user may not always fill out forms the way you had imagined.

Example: contact form

With your new knowledge of PHP and forms, you are able to create a contact form using the function mail, which has the following syntax:

	
	mail(to, subject, message);

First, we need a simple HTML form:

	<html>
	<head>
	<title>Contact form</title>
	</head>
	<body>

	<h1>Contact form</h1>

	<form method="post" action="handler.php">
	<p>Subject:<br /><input type="text" name="subject" /></p>
	<p>Message:<br /><textarea name="message"></textarea></p>
	<input type="submit">
	</form>

	</body>
	</html>

Next we need a PHP script to send the users input:

	<html>
	<head>
	<title>Functions</title>
	</head>
	<body>

	<?php

	// Recipient (change to your e-mail address)
	$strEmail = "name@mydomain.com";

	// Get user inputs
	$strSubject = $_POST["subject"];
	$strMessage = $_POST["message"];

	mail($strEmail,$strSubject,$strMessage);
	echo "Mail Sent.";
	 
	
	?>

	</body>
	</html>

Please note that the example will only work if you have access to a mail server. By default, this is not the case in XAMPP and most free hosts. Also, some hosts may require that you include a from header, which is done with an extra parameter:

	
	mail("you@yourdomain.com", "Test", "This is a test mail", "From: me@mydomain.com");

Username:
Password: