Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Developer and personalized recommendations.Start Your Free Trial Now
- View Offline
- Understanding forms
- Adding required fields and placeholders
- Accepting multiple entries
- Limiting uploads
- Handling focus changes
- Validating with regular expressions
- Working with older browsers
- Building jQuery validation
- Using server-side validation
- Sanitizing form input
- Uploading files
- Sending form data to a database
Skill Level Intermediate
You'll need to upload your own files to your own server if you want to follow along, but you can grab these from the Exercise files. One more change I've made is change the file extension on the form, from .html to .php. A lot of servers require that the file extension for server-side scripts be set to identify the language, processing the script. In the Form code I've changed the action parameter to call script called procces.php, that script is right now empty. Finally the form is using a Get method to send the form information.
If you want to learn more about installing PHP makes sure you check out installing Apache, MySQL, and PHP with David Gassner. You can install a copy of PHP on your local server and run these files locally. want to learn more about PHP itself, make sure you check out PHP with MySQL Essential Training. Finally, if you want to know about uploading and downloading files to a server, make sure you check out Managing and Hosting Website. Let's go back and to our form. So, I'm going to switch over to the process.php document, and I'll start a script by using the less than sign, and a question mark, and then the keyword PHP.
Then I'll close that off right there. And I'm going to execute a function called Var_Dump that just outputs a variable. And I want to output the super global that starts with a dollar sign and an underscore called Get. Put a semi colon here, and I'll save this, and I'll come to the form and type in my name. I'll hit the Send button. And notice that two things have happened. The Var_Dump is outputting all of the data from the form as a series of associative arrays. You can see that, for example, my name is coming in as a string and it has what I put in there.
Everything else is pretty much blank, but you could see that it's all there. Notice that it is also being transferred via the URL because this is a Get method. And the information in the form is being encoded into a URL variable. You can see that it replaced the space here with a plus sign. Right. So, let's switch to a POST method and output the POST for global instead. I'll save the POST method and over here I'm going to switch the method of the form submission to be POST. I'll save this, I'll refresh, I'll backup to my form, refresh the information on the serve and type in my name again. Now notice that it passed along the same data, but it did not pass it in a URL, it simply passed the associative array.
With just the information we needed. There's a third super global you can use and it's called the Request super global. So, I'm going to use Request right here, save it. I don't have to do anything to my form. I'll just hit the back button, refresh this, type in my name. And then I'll hit the Send button. You can see that I got the same information from the form. It's being sent in a POST method so I'm not really getting very much up here. If I switch the Form method to get the Request method, it's going to receive the data either way.
So, the nice thing about the Request method is that it doesn't matter how you tell the browser to send the form. It's going to output the form variables anyways. Since I have the method as Get, it's sending the information in the URL and it's outputting the associative array with all the data. So, let's go ahead and fill out the form a little more. So, I'm going to refresh, I'll type in all this information here. So, I filled out this form completely, and I'm going to hit the Send button, see what we get. Okay, so this time I got a lot more information. And I'm going to copy this text so we can take a look at it on a text editor, in a little bit better format. So, I'm going to grab this, I'll come over here and right after this, I'll paste this.
And then, I'm going to take each one of these brackets and just make it appear on a separate line. So, you can see what's happening here, the Request superglobal is placing everything in an associative array. And the associative array has a set of keys, each key corresponds to what we called it in the input fields. So, this is called my name here, that's the associative array my name here with a string, and it has this data. So, I typed in "password" as the password, and the password confirmation, so that's what it's outputting there. Notice that for the Checkbox field, I received only one of the elements, even though I had clicked on every single one of them, like this. So, what's happening there is that checkboxes can have the same name. So, if we look at the checkbox area right here, you can see that these check boxes each had the same name, Favorite Music.
If you have a checkbox that has a single value, it's okay to give it a normal name. But since we have a checkbox that can have one or three values, we're going to need to pass this a little bit differently. So, we're going to have to modify this Favorite Music variable to be Favorite Music and then pass it as an array reference. So I'm going to save this, and then just resend the form. Before I resend the form, let me see if I can forward it, so I can show you another thing. Notice that, the, reference item, didn't have a value, that's because I didn't choose anything from this pop-up right here.
So, let's go ahead and choose one thing, we'll choose Facebook. Since I modified this form, I need to refresh it and type this stuff in again. I'll click on all these three and pick something from this pop up and pick one of these items. Type in some long text and hit the Submit button, or Send button. So, now we've got a lot more information, let's grab this info, go back to the processing script and again paste it. Go ahead and look for these brackets and you can see that it's passing along the Favorite Music as an array of three elements this time.
Each one, with the items that we chose. The reference now has a value, because I did pick something from the pop up, so this is a lot better. If you want to access one of these values, and print it out, all we have to do is, use the associative array key. So, let's go ahead and switch this code, so that I can output one of these elements, so I'll do echo. Then I can use whichever superglobal I want, and just pass the key to the superglobal. So, I'm going to hit Save and I'm going to hit the Back button, and hit Send.
Okay, so now I get the name and if I want to get anything else, I just type in the name of that item. So, if I want to get the password, I need to type in my password here, I'll save this. And I'll type in a password, and I'll hit Send, and notice that I get the password don't want to save that password so I'll click that off. Out putting something with multiple options, like this, is just a little bit more challenging. So, what I'm going to do now is create a variable, I'll call it, Fav Music, and pass along the request superglobal.
With the name of the key, which in this case will be Favorite Music. I don't need to use the array notation here, I just need to call it by its normal name. Next, I'm going to use a for each method, and I'll pass along the FavMusic array, and I'll receive a key and a value. And for the code right here I'm just going to echo the Fav Music array, and pass it along the key from the for each statement. And then I can put in something like a break character so we can see these on separate lines. So, I'm going to save this and I'll resubmit the form, and now I can see each value on a separate line.
This is the way you would also do a select field that was using the multiple attribute. Now that you know to access the output and data that's passed from the form.