How to take form inputs and put them into a PHP associative array

PHP is popular for web development. It is widely used in backend scripting. As a saying goes that, “Seeing is believing”. On the same note, a user interacts with interfaces, or more precisely the front end of a website. Since back end stuff is usually behind the scenes, that’s why it is usually difficult for a starter to appreciate the role of PHP in backend development.

If you’re not sure about how PHP fits in the application development world, stay tuned to learn the concepts from the ground up. In this article, we will discuss the front end and back end in the context of an application. An application could be a web or a mobile application but the fundamental concepts remain the same.
Once we’re familiar with these basic concepts and terminologies we will move on to the main subject of how to take form inputs and put them into a PHP associative array.

Front end vs Back end

What is the difference between the front end and back end of an application? Simply put, whatever you see and interact with is the front end. Be it a mobile application or a website, the front end is all you can see and interact with. Right at this moment, you’re reading this article and this is pretty much the front end of this website.

The back end is more complex. It is a script that does all the intricate stuff. For clarity, let’s assume a login page. You’re familiar with login forms, you see them often. Users fill in their username and password and click on a login button. From this point on, the back end script comes into play.

It takes your username and password and connects with storage, a database. This database stores all the users’ login information. The script searches through the database and upon success, it redirects you to the next page. During this entire process, you see the login form and then the subsequent page and don’t even realize the series of events that took place behind the curtains.

To simplify this further, check out the figure below.

That’s the flow of an application. Do you see the term POST? POST is an HTTP method. Now, we do not want to overwhelm you with any more fancy stuff. In simple terms, HTTP is a communication protocol between applications. Just like how we communicate using natural language.
For this article, the brief background given above will suffice for the rest of the article. Now, you know what the front end and back end of an application are and how the two ends communicate. Now, let’s move on to see PHP with forms and understand how to take form inputs and put them into a PHP associative array.

PHP with forms – The Form

HTML and CSS are fundamental blocks of front end development in web applications. Here we will use the barebone HTML form and see the ins and outs.

Here’s the HTML for this.

<form action="/action_page.php" method="post">
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="email">Email:</label><br>
  <input type="text" id="email" name="email"><br><br>
  <input type="submit" value="Submit">
</form>

HTML uses tags. These tags define a page’s structure. Most tags come in pairs, with an opening and a closing tags like <form> </form>. The opening tags get some attributes, just like a function takes arguments.

The <form> tag here takes two attributes.

action – Defines the action to be performed. In this case, it passes the username and the password to action_page.php
method – HTTP method to use for submitting the form data

So, when we submit the form it would redirect to the action_page.php. This is the script that gets the form data. But how? That’s what we see next.

PHP with forms – PHP $_POST associative array

So, the login form will redirect us to action_page.php. But how do we access the form data from the login page? That’s where PHP POST associative array comes to the rescue.

PHP $_POST is a super global variable used to collect form data after submitting an HTML form. Note that the $_POST is synonymous with the POST method we’ve seen in the HTML. So, that’s how PHP takes form input and put them into a PHP associative array.

Let’s see the action_page.php.

<html>
    <body>
    <h1>Welcome <?php echo $_POST["username"] ?>!! </h1>
    <h2> Your email is: <?php echo $_POST["email"]?> </h2>
    </body>
</html>

Before any confusion, let it be clear that PHP can be used within HTML. That’s why we have a <h1> and <h2> HTML elements which are tags for heading and we use PHP expression within. The headings say

Welcome (Username)!!

Your email is: (Email)

Now, the (Username) and (Email) come from the form input. Let’s enter a username and email in the form and submit it to see the output.

Here’s the username and password. Also, observe the path is highlighted in red. It suggests that we are at the php_form.php page.

See, we have used $_POST associative array in PHP to access the form data. Also, observe the path now. As mentioned above, the form redirects to action_page.php and also passes the data to it through the $_POST array.

That’s how PHP takes form inputs and put them into a PHP associative array.

Conclusion

We’ve touched upon a wide array of topics. However, we’ve barely scratched the surface. However, a brief overview of the front end and back end terminology helped us to discuss PHP with forms and understand how to take form inputs and put them into a PHP associative array.