Display Form Input

1 November 2014

Penned by Lysianthus

Hello! This tutorial will teach you how to retrieve data inputted by a user through a form, and then display it on a webpage. Later, you will learn the many applications of this concept.

Prepare for Action

Before we start this tutorial, make sure you have the following skills:

basic HTML
basic PHP (variable declaration)

Steps

To give you a heads-up, I will give you an outline of the steps to do and files to create throughout the tutorial.

Preparing webpages in PHP format (1 HTML file and 1 PHP file)
Coding the form
Preparing the output
Testing

The How-To

First, of course, we need to write the HTML layouts of our webpages. I will be using the two codes below with their respective filenames and codes. For the sake of simplicity, I will be writing the most basic and skeletal of all HTML layouts (no styling).

form.html – the form

Click to view codes

<!DOCTYPE html>
<html>

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

<body>
    <form action="output.php" method="post">
        <input name="name" type="text" /><br />
        <textarea name="message"></textarea><br />
        <button name="submit" type="submit">Submit</button>
    </form>
</body>

</html>

output.php – the webpage that will display the data

Click to view codes

<!DOCTYPE html>
<html>

<head>
    <title>Output</title>
</head>

<body>
    <?php
        if (isset($_POST[’submit'])) {
            $name = $_POST['name'];
            $message = $_POST['message'];
    ?>
    <p><b>Name:</b> <?php echo $name ?></p>
    <p><b>Message:</b> <?php echo $message ?></p>
    <?php
        }
    ?>
</body>

</html>

form.html Explained

form.html, as its name suggests, contains the form that the user will input data into. Lines 9 to 13 is the form proper.

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

This snippet is very important in coding the form. The values of the attributes determine which file the data will be sent to and processed, and what method to use in passing the data. The action attribute value is output.php. It means that the data submitted by the user will be sent to output.php to be processed. method="post" means that the POST method will be used in passing the data. This will be more useful in the next section.

In lines 10 to 12, each input element (input, textarea, and button) have the name attribute. The value of the name attribute becomes the “name” of the input element. The names will be used to refer to the values the user will be typing on the input elements.

output.php Explained

After the user clicks the 'Submit' button, the data the user inputted will be passed on the output.php through the POST method. This is where all the action happens.

In output.php, we have a conditional statement:

if (isset($_POST[’submit'])) {

Note that in Line 12 of form.html, we have named the button as “submit”. This means that if the user has clicked “submit”, then perform the following task... Therefore, after the user has typed on the input boxes and clicked 'Submit', lines 11 to 16 will be executed.

In lines 11 and 12, we have declared two variables. Look at this example:

$name = $_POST['name'];

This line of code means that the value of the input which has the name “name” (form.html line 10) will become the value of the $name variable. So whatever a user types on the name box, it will become the value of the $name variable. The same applies to $message.

echo $name outputs the value of the $name variable.

Applications

As you have witnessed, this was a simple PHP input-output exercise. Learning this simple technique can actually make you write more complicated codes. The passing of data from one webpage to another in this tutorial is the same as in contact forms. And since you have access to what a user has inputted, you have the ability to communicate with the user. Also, you cannot limit yourself to displaying inputted values alone, you can also manipulate the data and process them, such as putting them in a database. The possibilities are endless!

Writings Tutorials