7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 9Length: 53 minutes

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

1.3 Creating a Simple Form

It's time to create the basic form that we'll work with throughout the course: a simple form for posting information to a website. Let's begin by creating our form and writing some basic code to display the posts on our page.

1.3 Creating a Simple Form

As you can see here, I have started by opening up a web browser. And in this particular course, I'm gonna be using Chrome from Google. But you could be using any other web browser that you might want. And I also have opened my Visual Studio code, and it's in a folder known as PHP-forms. And so now we're ready to kinda get things started a little bit here, so the first thing that I wanna do, is create our basic target form. What that form is going to look like, and ultimately what it's going to do. Now, what we're really looking to do in this course is, talk about some basic reusable concepts that you can use with your forms throughout any different type of application. But in this particular instance, we're gonna be using a very simple concept. And that concept is going to be putting in some sort of comment box or feedback box. That's going to allow your end-user to send you some data, or send you some information like a comment or whatever and have a couple different fields. We're gonna have three fields, we'll have a name and email address and a comment box, so let's go ahead and build that out. So the first thing that I wanna do, is I wanna create a new file, and we're just gonna call this index.php, because that's that first file that's gonna get served up by most web browsers. But, you could really call this just about anything that you want. So now what I wanna do in here is I wanna throw in some very simple HTML5 boiler plates. So really at this point I'm really not too concerned about what's all in here, I just need something simple to get started. So I'm gonna say, My Comment Form, so now that we have that we can start to create our body inside of our HTML. So, what do we want this to be? So we can do a little bit of formatting, I'm not too concerned about what this looks like right now. You can absolutely doctor this up in UCSS and inject this into any part of your application if you already have one that you're working on. I'm just gonna do some very simple formatting here so, I'm gonna have h1, and let's say maybe Comments here. And then below that, we'll do an h2 that's going to be Please leave a comment below. And then we're gonna go ahead and create our form, so let's go ahead and jump in here, let's go ahead and do a form. Now, if you are familiar with at least creating a form, you know that there's a couple of different way that we can do this. So, what we're gonna do is we're going to create a certain type of a form and that form is going to have an action, and it's going to have a method. Now the action is where you wanna send this data when the user clicks the Submit button. So in this case we really want them to pass it back to this particular file, you can send it to another comments.php or whatever. It doesn't really matter where you're sending it, but you need to give it kind of a destination. So what I could do, is I could say index.php, now, as you can see that's the same file that I'm working in, and this will be fine for now. This would definitely work, but something that you will commonly see, or quite often see out on the Internet, is people wanna save themselves that, sort of trouble. And they wanna be able to maybe make this form reuseable on different parts of their application. Maybe they want it to be on the index page and they also want it to be on the comments page, and maybe on the about page or something like that on the website. They don't wanna have to copy and paste this all over the place and have to update this, because if they forget then it could go to the wrong place and things get a little bit messy. So another thing that you can actually do to kinda save yourself that headache, is you could use a little PHP at this point. So what I'm gonna do is I'm going to inject a little bit in here and I'm gonna say action =, and what I wanna do is I wanna go ahead and say, I'm gonna give you some PHP code in here. And I'm going to use a super global $_server, and then I can go on here and say I want to get php_self. So basically what that's going to do, is it's going to give whatever page I'm on right now. So what this is going to do is it's gonna say, okay, I see that you are currently running on index.php, go ahead and dump that thing in here. And actually, what I wanna do is I want to echo that, so we're gonna echo the PHP_SELF from the _SERVER super global. So we'll see how that works in just a minute, but this is going to kinda save you from having to update this if you wanna move this form around to different pages. Then also you're going to need a method, and this method is typically going to be one of two things, it's typically gonna be a GET or it's gonna be a POST. Traditionally when it comes to forms you're really gonna be using POST most often, because that's going to bundle up all the data within this form. And send it in the body of the request instead of through the URL, and that's just a little bit more secure, a little bit better practice. All right, so there is our form, let's go ahead and add in a little bit in here. Now, we're not gonna worry about putting too much in here, and you can definitely doctor this up. But like I said, we're gonna deal with a couple of things here, we gonna ask the user for their name and this is going to be an input type of text. And we're just gonna give this a name of name and ID of name, then let's go ahead and throw in a couple of breaks here just to give us a little space. Then we'll say all right, we want an email now, so let's do an input of type email will be fine, or actually, let's do of type text. You could really do either way for this particular example but that'll be just fine, so lets go ahead and put those in there, a couple more breaks here. And then lets go ahead and do one more, we're going to do Comments, we're going to create a comment box and let's go ahead and do another break. And then down here we're gonna do a text area, and this text area is going to have a name of comments an id of comments. And then columns, 30, rows, 10, I think that should probably be fine, and then after all of that, we're going to need a Submit button. So let's just add a little bit of spacing in here again, a couple of breaks, and then let's go ahead and add an input of type submit, and the value is going to be submit just like that. Okay, so this is our basic form, nothing too crazy here and let's go ahead and save this. So, now if I save that, I wanna be able to display that in my browser, and so, what I'm going to need to do is go in to my terminal. I'm using Iterm 2 but you could absolutely use any terminal application that's built in to your system, it doesn't really matter. Once again, you wanna make sure that you have PHP installed so, I do, I have PHP 7.1.16. And so, what I wanna do now, is I want to go ahead and serve up what's in this directory of PHP forms using whatever sort of server I have. Now, if you have map installed you can fire that up, and you have to make sure that your files actually live within the kinda public folder of MAMP so that you can serve that up. But if you don't want to go through all that hassle, you can simply start up the development server right here in PHP. So, we're gonna say php-s, and then where do I wanna run this app? I wanna run this at local host and we're gonna give it a port, we'll say port 9000, something like that. So then, you're gonna see something that looks like this that PHP is listening on port local host 9000. The document root is where your application resides, as in PHP forms, and then we can go ahead and press Ctrl + C to quit. So once I've done this, I can come over to a browser, and I can say go to local host port 9000. And with any luck, you're gonna see that we got a request over here, for the root and here is our form. So that's a little tight, so you can obviously change these things up a little bit, you can make things a little bit wider, so let's say in this case columns, let's make it 100. So we can save that come over here and refresh and it is going to make things bigger, so obviously you can tweak this to fit whatever your needs are, we'll make it 75, all right there we go. So there is the basic form that we are gonna be dealing with as far as this course is concerned, and one of the thing that I'm more want to do here just so that for illustrative purposes. We're gonna come down here, we'll do a couple breaks again and what I wantna do, is have a spot to show the data that we're actually sending. Because when you're dealing with comments a lot of times you're gonna want to maybe display them on a post site or on a forum type site. You're gonna want to maybe have that be displayable and shown to end users. Or maybe at least to the user that just submitted it and say hey, thank you, whatever your name is, I do have your email address. I'll contact you if we need anything and here's the comment for your records, something like that, right? So I'm just gonna throw an h2 down here at the bottom and I'm gonna say, Information From Form. And we'll go ahead and save that as well, so there we go. So now what we're going to do throughout the rest of the course is we're going to kinda play around with this a little bit. And we're gonna work on processing the requests, handling the data coming over. Kind of tell you about some security concerns that you're gonna need to know about when it comes to cross-site scripting and things like that. As well as being able to just do some basic validation things that just about any sort of form processing is going to need to happen, not just in PHP but in just about any other server-side programming. So let's go ahead and start to dig into these one at a time.

Back to the top