Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now that we know how to build web pages to use dynamic data. In this chapter we're ready to look at how to build pages that has forms for submitting form data. this represents the second way that we can get data back from a user. They can either click a link, or type a URL, which is basically the same thing. Or they can submit a web form to us. You remember that URL and links are GET requests, and submitting a form is going to be a POST request. With GET request we saw that PHP automatically took all of the query parameters and put them into an associated array assigned to the super global GET. Well guess what, PHP is going to do the exact same thing for us with POST request by using the super global POST.
That's the dollar dign, underscore followed by capitals POST. All the values posted in the form data will be in that associative array, ready for us to access, just like we did with the links. So, if a form has a first name input field, then we'll be able to ask the POST superglobal for the key that matches the input field name. When we submit forms, there's generally going to be two pages, one page which has the web form on it, ready to be filled out. And then, a second page that does the processing of the form. Let's try creating those two pages. So to begin with, let's make our form page, and I'm going to just use basic HTML as a template.
I'll do Save As, and I'm going to call this form.php. Form, and then I'm just going to paste in some HTML here, so you can pause the movie if you need to copy that out, but it's just basic HTML form. So I've got my form with its action, which is form processing.php. That's the page that doesn't exist yet, but it's where we're going to send this data, so this is going to post the data to form processing.php. And the method that it will use is post, and that's common, and we're going to do that with almost all forms, send them as post data.
And then we've got our user name, where I'm going to have an input field. It's going to be a text field, and the name of that is going to be username. Now, this is important because this is the key in the associative array on the processing page that I'm going to look for. So inside post, there'll be a value for username, and it'll be exactly the name that's here. Now, there is no value for it, it's just going to be a blank field. Then on the next line, I've got password. Everything's the same, except that it's of type password, which just means that it doesn't show the text as I've typed it. It puts bullets instead. And then last of all, I've got a submit button down here, that's what this is. And it's going to have the text submit on it, the type is submit. I've also got a name attribute for submit.
We'll talk about in a couple movies why we want to have that. For now, just go ahead and make sure that yours has it too. And then we close the form tag. So that's it, it's just basic HTML. Let's save it and just bring it up in a browser. So for me that's going to be localhost and then kevinskoglund/sandbox/form.php, so there it is. It's not the prettiest form in the world but it gets the job done. So we would type in a name here, username, and then you type in your password, you can see that it puts bullets there instead of showing you the text. And then I click Submit, and there is it. It submitted it to form_processing.php a page that doesn't exist yet because I haven't created it.
But you can see it did switch the URL to be that and in the process of doing that it sent along all those attributes as post parameters. They don't show up here, they're not up in the URL, but they were sent. They were packaged up in the browser and sent along with the request to the web server. So let's take a look at how we can view those. Let's just set this aside, and I'm going to go back to Sites and open up basic.html again. This time, though, I'm going to Save a copy as form_processing.php. I don't really have to have the HTML here.
I could just have a strictly PHP page, but I'm going to go ahead and be displaying some output. So I'm going to leave the HTML. So now if I were to reload the page, the page does exist, but I would get nothing. It would do nothing there. Let's take a look at those values to start with. So inside pre tags, let's do our php tags. And our closing pre tags, so I don't forget. And inside there, we're going to use print_r and take a look at that POST super global, which is an associative array. So let's go back over here, let's go back to this page.
I'll put in another password again and then hit Submit, there we go. You see what came through? Here's an associative array. Username, there's the key, there's the value. There's the key, there's the value and then submit. It went ahead and just gave me that value as well. Now let's just try loading that page on it's own again, just from the URL string. Let's just hit Reload up here. It actually says do you want to reload it with the post data, let's skip that, we don't want to do that. What I want to show you is, let's just hit Return from the URL bar, so it's actually making a get request to form processing.php, do you see that? It's not a post request, it's a get request, because it's coming from the URL, and now my array is empty. We have to come from this page so it's a post request and so that the data is in fact posted with the post request.
See how that works? So now we're able to go back to that page and see those values let's actually just output some values. Let's do br tag here and we'll open up php again. And let's get the values, let's say username equals, well how do we do that? POST, and then the key that we want, username, there you go. We'll do the same thing, I'll just Copy and Paste it, and password, password. So now I've set variables equal to that value. So now I'm ready to work with them, it's a little more convenient I think to work with these variable then it is to always have to type out the super global version.
Plus later we're going to do some checking and some conversion on some of this stuff. So we're probably going to do that when we're bringing it into our variable making it a good safe value. And the let's, let's do echo, so echo and lets do dollar sign username and password. Now obviously you would not be doing this kind of echoing in the real world. We're just doing it for testing purposes. Probably you would want to do something else with these values like store them in the database, use them to look up data. Or in this case to use them to actually log this user in. But for now we're just going to show that we've successfully pulled those values in, assigned to variables, and now we can work with them.
So let's go back, let's have our form, and let's Submit, and there we go. There's my username, my password, and then down here you can see that I've got kevinskoglund and secret. Now unlike GEt request, POST data does not need to be encoded or decoded. So all that stuff that we worried about before with the query string, you aren't going to need to worry about with post data. That post data is packaged up separately, so that it doesn't interfere with what's going on in the query string at all. So the only time you'll need to worry about that is here for the action. Because that is going to be in the query string if you were doing some dynamic processing there.
Then you would need to do those normal things that we saw for working with get requests. But the data itself, what's inside here inside the form, does not need any kind of encoding whatsoever. So the very last thing is, let's just come back over here now and let's reload this page again, just like we just did before and let's hit Return. But this time I'm not just casually showing the output of the array. I'm actually trying to assign some values. And I did that by asking for an actual key, user name. And it says oops, notice that key doesn't exist.
So I'm getting a notice now when I try and do this because that form value wasn't sent. In the next movie let's talk about how you detect form submission to know whether you can expect that value to be there or not.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101167 Viewers
61 Video lessons · 87925 Viewers
71 Video lessons · 71806 Viewers
56 Video lessons · 103670 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.