Lesson 4 : Forms

Objective
This lesson will teach you how to get information from the user, and then how to
output that information to the screen. For this lesson we will need to create two
separate files. The first file will contain an HTML form which will be used to
collect information from the user. The second file will be used to output the data
to the screen.

Step 1
Open a new window in your Text Editing Program.

Step 2
Type in the lines just as they appear in the text below:

form action="”form1output.php”" method="”POST”"
Enter Your Name:
input type="”text”" size="”10”" name="”username”"
input type="”submit”"
/form

Note: This code is strictly HTML. Do not include the line at the end of this file. Type only what appears in the box above, and
do not copy-and-paste the code.

Step 3
Name this file form1input.php and save it in your Project Folder.

Step 4
Open a new window in your Text Editing Program. This will be used to create the
second file for this lesson.

Step 5
In the second file, type in the code just as it appears in the text below:

Step 6
Name this file form1output.php and save it in your Project Folder.

Step 7
Upload form1input.php and form1output.php to your server.

Step 8
View the first file (www.YourWebDomain.com/form1input.php) in your Web
Browser. You should see a text field that asks for your name.

Step 9
Enter your name into the text field and press the Submit Button.

Step 10
You should see a new page that prints your name to the screen with a message
“Hello, YourName”.

We just created two files. The first file is a form that allows you to input your
name. After you click the Submit Button, you are directed to the second file. The
second file displays a message that uses the name that entered on the first
screen.

First File (form1input.php)
Line 1

form action="”form1output.php”" method="”POST”"

This line of code is the beginning of the form.
The portion that says method=”POST” tells the form how to process the data.
The portion that says action=”form1output.php” tells the form to display the file
that is named “form1output.php” after the user clicks the Submit Button.

First File (form1input.php)
Line 2

Enter Your Name:

This line of code is a simple text output to the screen.

First File (form1input.php)
Line 3

input type="”text”" size="”10”" name="”username”"

This line of code creates the text field. When you view this page in your Web
Browser, this line creates the area where you type your name.
The portion that says type=”text” tells the Form that this is a text input field.
The portion that says size=”10” tells the Form that the text field should be 10
characters in length.

The portion that says name=”username” creates a variable and associates it with
this text input field. In this case, the variable is named username. When you call
this variable in a PHP file, you will need to add a dollar sign to the beginning of
the name, so it will be named $username.

First File (form1input.php)
Line 4

input type="”submit”"

This line of code creates the Submit Button. When this button is clicked, it will tell the form to process the data that has been entered.

First File (form1input.php)
Line 5

/form

This line of code is the end of the form.

Note: We have examined all the code from form1input.php . We will now examine
the code from form1output.php .


Second File (form1output.php)

Line 2

$username = $_POST[“username”];

This line of code defines the $username variable for this second file. Since we
used action=”POST” to send the form from the first page, we will use the
$_POST function to retrieve the variable on this page. We must define the
$username variable in this fashion, before we can use it within this page of code.

Line 3

echo “Hello, “, $username;

This line of code takes the variable and outputs it along with some text.

You can use a form to send more than one variable at a time. Here we will create
two files that will be used to send and receive multiple variables.
Name this file “form2input.php”

form action="”form2output.php”" method="”POST”"
Enter Your Name:
input type="”text”" size="”10”" name="”username”"

Enter Your Age:
input type="”text”" size="”3”" name="“userage”"
input type="”submit”"
/form

Name this file “form2output.php”

You can use a form to send more than one variable, and then use the display
screen to process those variables. Here we will create two files that will send and
receive two numeric variables and then add them together before displaying the
result on your screen.
Name this file “form3input.php”

form action="”form3output.php”" method="”POST”"
First Number:
input type="”text”" size="”10”" name="”variable1”"

Second Number:
input type="”text”" size="”3”" name="“variable2”"
input type="”submit”"
/form

Name this file “form3output.php”


In Lesson 4 we learned how to use forms to collect information from the user and
to output that information to the screen. Forms require 2 files. The first file
displays the form and collects the data from the user. The second file defines the
variables with $_POST, processes the data and displays the processed data on
the screen.

In Lesson 5 we will explore how to use If / Else Statements to help us process
data more effectively.