PHP HTML Form Example
Use this
example as a form walkthrough. We will briefly build an HTML form, and call the
form data using PHP. PHP offers several methods for achieving this goal, so
feel free to substitute alternative methods as you follow along. Our example
will show you a method using a single .php file, combining both PHP and HTML in
one simple text file, to retrieve the data and display the results. Below is a
quick review of bullets, check boxes, text fields, and input fields and using
them to build a form to retrieve some personal information about our user.
Building the HTML Form
Step 1 is
to build the form document to retrieve user date. If you already experienced
using HTML forms, this should be review, however, if not we recommend a brief
visit through the MYSITE HTML Forms Tutorial. The
code below shows a simple html form document set up to retrieve some personal
knowledge about our user.
Input Fields
Input
fields are the simplest forms to grasp. As mentioned in the Forms Tutorial,
just be sure to place the name attribute within the tags and specify a name for
the field. Also be aware that for our form's action we have placed the
$PHP_SELF super global to send our form to itself. We will be integrating more
PHP code into our form as we continue on so be sure to save the file with a
.php extension.
Code:
<html>
<head>
<title>Personal INFO</title>
</head>
<body>
<form method="post" action="<?php echo $PHP_SELF;?>">
First Name:<input type="text" size="12" maxlength="12" name="Fname">:<br />
Last Name:<input type="text" size="12" maxlength="36" name="Lname">:<br />
<head>
<title>Personal INFO</title>
</head>
<body>
<form method="post" action="<?php echo $PHP_SELF;?>">
First Name:<input type="text" size="12" maxlength="12" name="Fname">:<br />
Last Name:<input type="text" size="12" maxlength="36" name="Lname">:<br />
Radios and Checkboxes
The catch
with radio buttons lies with the value attribute. The text you place
under the value attribute will be displayed by the browser when the variable is
called with PHP.
Check
boxes require the use of an array. PHP will automatically place the checked
boxes into an array if you place [] brackets at the end of each name.
Code:
...
Gender::<br />
Male:<input type="radio" value="Male" name="gender">:<br />
Female:<input type="radio" value="Female" name="gender">:<br />
Please choose type of residence::<br />
Steak:<input type="checkbox" value="Steak" name="food[]">:<br />
Pizza:<input type="checkbox" value="Pizza" name="food[]">:<br />
Chicken:<input type="checkbox" value="Chicken" name="food[]">:<br />
Gender::<br />
Male:<input type="radio" value="Male" name="gender">:<br />
Female:<input type="radio" value="Female" name="gender">:<br />
Please choose type of residence::<br />
Steak:<input type="checkbox" value="Steak" name="food[]">:<br />
Pizza:<input type="checkbox" value="Pizza" name="food[]">:<br />
Chicken:<input type="checkbox" value="Chicken" name="food[]">:<br />
Textareas
In
reality, textareas are oversized input fields. Treat them the same way, just be
aware of the wrap attribute and how each type of wrap will turn out. PHP
relys on this attribute to display the textarea.
Code:
...
<textarea rows="5" cols="20" name="quote" wrap="physical">Enter your favorite quote!</textarea>:<br />
<textarea rows="5" cols="20" name="quote" wrap="physical">Enter your favorite quote!</textarea>:<br />
Drop Down Lists &
Selection Lists
These two
forms act very similar to the already discussed radio and checkbox selections.
To name a selection form, place the name attribute within the select
tags at the beginning of the form, and then place the appropriate value to fit
each option.
Code:
...
Select a Level of Education:<br />
<select name="education">
<option value="Jr.High">Jr.High</option>
<option value="HighSchool">HighSchool</option>
<option value="College">College</option></select>:<br />
Select your favorite time of day::<br />
<select name="TofD" size="3">
<option value="Morning">Morning</option>
<option value="Day">Day</option>
<option value="Night">Night</option></select>:<br />
Select a Level of Education:<br />
<select name="education">
<option value="Jr.High">Jr.High</option>
<option value="HighSchool">HighSchool</option>
<option value="College">College</option></select>:<br />
Select your favorite time of day::<br />
<select name="TofD" size="3">
<option value="Morning">Morning</option>
<option value="Day">Day</option>
<option value="Night">Night</option></select>:<br />
Be sure
to check through your code to double check for bugs or errors especially look
at each name attribute to be sure your names are all correct. As far as
names go, you can copy the ones shown or simply make up your own, just be sure
you remember what they are. Your form should be similar to the one shown here.
Display:
First Name:
Last Name:
Gender:
Male:
Female:
Favorite Food:
Steak:
Pizza:
Chicken:
Select a Level of Education:
Select your favorite time of day:
Submission Button
We
mentioned that the submission button was missing. Now's the time to throw it
into the existing code. The button is the same as any submission button, the
only thing we need to be sure to add is a name to it so we can call it later
using PHP.
Code:
...
<input type="submit" value="submit" name="submit"><br />
</form><br />
<input type="submit" value="submit" name="submit"><br />
</form><br />
Retrieving Form Data -
Setting up Variables
In PHP
there lies an array used to call data from our form. It's a superglobal of PHP
and it's one that is great to have memorized. $_POST retrieves our form
data and output's it directly to our browser. The best way to do this, is to
make variables for each element in our form, so we can output this data at
will, using our own variable names. Place the following lines of code at the
top of your form file using the correct PHP syntax.
Code:
<?php
$Fname = $_POST["Fname"];
$Lname = $_POST["Lname"];
$gender = $_POST["gender"];
$food = $_POST["food"];
$quote = $_POST["quote"];
$education = $_POST["education"];
$TofD = $_POST["TofD"];
?>
$Fname = $_POST["Fname"];
$Lname = $_POST["Lname"];
$gender = $_POST["gender"];
$food = $_POST["food"];
$quote = $_POST["quote"];
$education = $_POST["education"];
$TofD = $_POST["TofD"];
?>
All we
are doing here is making easier variable names for our form output. With the
above statements, we can call our data with ease! Any capital letters under the
name attribute must match up with your statements above, avoid overly
complicated names to simplify your debugging process and it can save you some
frustration as well.
$PHP_SELF; - Submission
For the
form action, we will call PHP's $PHP_SELF; array. This array is set up to call
itself when submitted. Basically, we are setting up the form to call
"formexample.php", itself. Here's a glimpse of how to do just that.
Code:
...
$quote = $_POST["quote"];
$education = $_POST["education"];
$TofD = $_POST["TofD"];
?>
<html>
<head>
<title>Personal INFO</title>
</head>
<body>
<form method="post" action="<?php echo $PHP_SELF;?>">
...
$quote = $_POST["quote"];
$education = $_POST["education"];
$TofD = $_POST["TofD"];
?>
<html>
<head>
<title>Personal INFO</title>
</head>
<body>
<form method="post" action="<?php echo $PHP_SELF;?>">
...
We now
have a completed form ready to recieve data and display results. However, we
need to adjust things so that once the data has been submitted we are directed
to the results. Typically, we have a completely new .php file that recieves our
HTML form data. In this scenerio, we will use an if statement to display
first our form, and then our form results upon submission. This is a practical
method when entering information into databases as you learn more.
For now
here's a look at our complted form document thus far.
Code:
<?php
$Fname = $_POST["Fname"];
$Lname = $_POST["Lname"];
$gender = $_POST["gender"];
$food = $_POST["food"];
$quote = $_POST["quote"];
$education = $_POST["education"];
$TofD = $_POST["TofD"];
?>
<html>
<head>
<title>Personal INFO</title>
</head>
<body>
<form method="post" action="<?php echo $PHP_SELF;?>">
First Name:<input type="text" size="12" maxlength="12" name="Fname"><br />
Last Name:<input type="text" size="12" maxlength="36" name="Lname"><br />
Gender:<br />
Male:<input type="radio" value="Male" name="gender"><br />
Female:<input type="radio" value="Female" name="gender"><br />
Please choose type of residence:<br />
Steak:<input type="checkbox" value="Steak" name="food[]"><br />
Pizza:<input type="checkbox" value="Pizza" name="food[]"><br />
Chicken:<input type="checkbox" value="Chicken" name="food[]"><br />
<textarea rows="5" cols="20" name="quote" wrap="physical">Enter your favorite quote!</textarea><br />
Select a Level of Education:<br />
<select name="education">
<option value="Jr.High">Jr.High</option>
<option value="HighSchool">HighSchool</option>
<option value="College">College</option></select><br />
Select your favorite time of day:<br />
<select name="TofD" size="3">
<option value="Morning">Morning</option>
<option value="Day">Day</option>
<option value="Night">Night</option></select><br />
<input type="submit" value="submit" name="submit">
</form>
$Fname = $_POST["Fname"];
$Lname = $_POST["Lname"];
$gender = $_POST["gender"];
$food = $_POST["food"];
$quote = $_POST["quote"];
$education = $_POST["education"];
$TofD = $_POST["TofD"];
?>
<html>
<head>
<title>Personal INFO</title>
</head>
<body>
<form method="post" action="<?php echo $PHP_SELF;?>">
First Name:<input type="text" size="12" maxlength="12" name="Fname"><br />
Last Name:<input type="text" size="12" maxlength="36" name="Lname"><br />
Gender:<br />
Male:<input type="radio" value="Male" name="gender"><br />
Female:<input type="radio" value="Female" name="gender"><br />
Please choose type of residence:<br />
Steak:<input type="checkbox" value="Steak" name="food[]"><br />
Pizza:<input type="checkbox" value="Pizza" name="food[]"><br />
Chicken:<input type="checkbox" value="Chicken" name="food[]"><br />
<textarea rows="5" cols="20" name="quote" wrap="physical">Enter your favorite quote!</textarea><br />
Select a Level of Education:<br />
<select name="education">
<option value="Jr.High">Jr.High</option>
<option value="HighSchool">HighSchool</option>
<option value="College">College</option></select><br />
Select your favorite time of day:<br />
<select name="TofD" size="3">
<option value="Morning">Morning</option>
<option value="Day">Day</option>
<option value="Night">Night</option></select><br />
<input type="submit" value="submit" name="submit">
</form>
Page Display
At this
point we have a completed form with correct action and submission. We now need
to do a little programming to achieve what we want displayed before and after a
certain event. Before the user submits any information. We need to first direct
them to our form (obviously) and second, we will display their results using
our variable names.
PHP
offers an excellent way to create this effect using an if statement.
Place the following lines near the top of your formexample.php file.
Code:
<?php
$Fname = $_POST["Fname"];
$Lname = $_POST["Lname"];
$gender = $_POST["gender"];
$food = $_POST["food"];
$quote = $_POST["quote"];
$education = $_POST["education"];
$TofD = $_POST["TofD"];
if (!isset($_POST['submit'])) { // if page is not submitted to itself echo the form
?>
$Fname = $_POST["Fname"];
$Lname = $_POST["Lname"];
$gender = $_POST["gender"];
$food = $_POST["food"];
$quote = $_POST["quote"];
$education = $_POST["education"];
$TofD = $_POST["TofD"];
if (!isset($_POST['submit'])) { // if page is not submitted to itself echo the form
?>
Echo Back the Results
Here, we
echo back the results in a boring, line by line method, just to show some basic
syntax.(feel free to be creative here) We use the else clause of our if
statement to direct the users to our results section.
Code:
...
<option value="Night">Night</option></select>
<input type="submit" value="submit" name="submit">
</form>
<?
} else {
echo "Hello, ".$Fname." ".$Lname.".<br />";
echo "You are ".$gender.", and you like ";
foreach ($food as $f) {
echo $f."<br />";
}
echo "<i>".$quote."</i><br />";
echo "You're favorite time is ".$TofD.", and you passed ".$education."!<br />";
}
?>
<option value="Night">Night</option></select>
<input type="submit" value="submit" name="submit">
</form>
<?
} else {
echo "Hello, ".$Fname." ".$Lname.".<br />";
echo "You are ".$gender.", and you like ";
foreach ($food as $f) {
echo $f."<br />";
}
echo "<i>".$quote."</i><br />";
echo "You're favorite time is ".$TofD.", and you passed ".$education."!<br />";
}
?>
Code:
<?php
$Fname = $_POST["Fname"];
$Lname = $_POST["Lname"];
$gender = $_POST["gender"];
$food = $_POST["food"];
$quote = $_POST["quote"];
$education = $_POST["education"];
$TofD = $_POST["TofD"];
if (!isset($_POST['submit'])) { // if page is not submitted to itself echo the form
?>
<html>
<head>
<title>Personal INFO</title>
</head>
<body>
<form method="post" action="<?php echo $PHP_SELF;?>">
First Name:<input type="text" size="12" maxlength="12" name="Fname"><br />
Last Name:<input type="text" size="12" maxlength="36" name="Lname"><br />
Gender:<br />
Male:<input type="radio" value="Male" name="gender"><br />
Female:<input type="radio" value="Female" name="gender"><br />
Please choose type of residence:<br />
Steak:<input type="checkbox" value="Steak" name="food[]"><br />
Pizza:<input type="checkbox" value="Pizza" name="food[]"><br />
Chicken:<input type="checkbox" value="Chicken" name="food[]"><br />
<textarea rows="5" cols="20" name="quote" wrap="physical">Enter your favorite quote!</textarea><br />
Select a Level of Education:<br />
<select name="education">
<option value="Jr.High">Jr.High</option>
<option value="HighSchool">HighSchool</option>
<option value="College">College</option></select><br />
Select your favorite time of day:<br />
<select name="TofD" size="3">
<option value="Morning">Morning</option>
<option value="Day">Day</option>
<option value="Night">Night</option></select><br />
<input type="submit" value="submit" name="submit">
</form>
<?
} else {
echo "Hello, ".$Fname." ".$Lname.".<br />";
echo "You are ".$gender.", and you like ";
foreach ($food as $f) {
echo $f."<br />";
}
echo "<i>".$quote."</i><br />";
echo "You're favorite time is ".$TofD.", and you passed ".$education."!<br />";
}
?>
$Fname = $_POST["Fname"];
$Lname = $_POST["Lname"];
$gender = $_POST["gender"];
$food = $_POST["food"];
$quote = $_POST["quote"];
$education = $_POST["education"];
$TofD = $_POST["TofD"];
if (!isset($_POST['submit'])) { // if page is not submitted to itself echo the form
?>
<html>
<head>
<title>Personal INFO</title>
</head>
<body>
<form method="post" action="<?php echo $PHP_SELF;?>">
First Name:<input type="text" size="12" maxlength="12" name="Fname"><br />
Last Name:<input type="text" size="12" maxlength="36" name="Lname"><br />
Gender:<br />
Male:<input type="radio" value="Male" name="gender"><br />
Female:<input type="radio" value="Female" name="gender"><br />
Please choose type of residence:<br />
Steak:<input type="checkbox" value="Steak" name="food[]"><br />
Pizza:<input type="checkbox" value="Pizza" name="food[]"><br />
Chicken:<input type="checkbox" value="Chicken" name="food[]"><br />
<textarea rows="5" cols="20" name="quote" wrap="physical">Enter your favorite quote!</textarea><br />
Select a Level of Education:<br />
<select name="education">
<option value="Jr.High">Jr.High</option>
<option value="HighSchool">HighSchool</option>
<option value="College">College</option></select><br />
Select your favorite time of day:<br />
<select name="TofD" size="3">
<option value="Morning">Morning</option>
<option value="Day">Day</option>
<option value="Night">Night</option></select><br />
<input type="submit" value="submit" name="submit">
</form>
<?
} else {
echo "Hello, ".$Fname." ".$Lname.".<br />";
echo "You are ".$gender.", and you like ";
foreach ($food as $f) {
echo $f."<br />";
}
echo "<i>".$quote."</i><br />";
echo "You're favorite time is ".$TofD.", and you passed ".$education."!<br />";
}
?>
0 comments:
Post a Comment