Forms capture data, connecting users and systems.
We made it. We’ve gone through enough syntax that we’re ready to start looking at some actual concrete examples, like form processing. We’re going to introduce databases and data-persistence in a later article. All we want to know is how do we send data from a form on the client end to a server, wherever that server may live.
Once a user submits a form, the form data is sent to a target page using the
post method. We can also use the
get method, but that’s out of scope for this article. We’ll cover the
get method when we look at URLs.
The Form (Client Side)
We’re going to generate a form that’s displayed on the front-end. Forms are surrounded with a
form tag. We’ll add an
input field and name it
full_name. This is going to be the name that’s sent to our server. The type of data that we’ll expect inside of our
text. The form will also have a
submit button that will trigger the submission to occur. Where is the data going to? That’s going to be defined with our form
action. What method will we use to send this data? We will specify that the
method should be a
<form action="form_processor.php" method="post"> <div> Full Name: <input type="text" name="full_name"> </div> <div> <input type="submit" value="Submit"> </div> </form>
If you click on the
Submit button, you’ll see that a new page loads. Checking your url, you’ll notice
form_processor.php. We can create our
form_processor.php page to accept our
post request. Let’s do that next.
Form Processor (Server Side)
Once the user clicks on the
Submit button, the data is bundled into a
$_POST array. Each of the field names, like
full_name will be accessible as keys of the
$_POST array. We just want to
var_dump the data and see what that looks like.
Let’s enter a name into our form now and click
Submit. We get the following response:
/app/73 Forms/form_processor.php:3: array (size=1) 'full_name' => string 'Dino Cajic' (length=10)
To get the full name and display it on the screen, we could use the array key
echo $_POST['full_name'] . " submitted this form"
If we submit the form again, we get the following response:
Dino Cajic submitted this form
If you type in
0.0.0.0/form_processor.php directly into the address bar, you’ll get nothing. This is because we’re accessing that page via a
get request, and not a
post request. The only way to access that page via a
post request is by clicking on the
Submit button on our form.
/app/73 Forms/form_processor.php:3: array (size=0) empty submitted this form
We’ll go further into forms and the differences between
post requests in our next article.