7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 Creating the Form

On our index page, we need to have a way to get some input from the user. As you now probably already know, the primary way to get input from users on a web page is through a form. In this lesson, we'll create a simple form that will process two pieces of information from users: their names and their dreams.

2.2 Creating the Form

Now that we have the skeleton or the basic structure of our index page up and running, now we can start to create a form that's going to allow the user to enter in some data or to send us their dreams, so that we can hopefully provide some assistance to help with those dreams. And so what we gonna do now is we gonna drop down past our H2, and we're simply gonna create a form. Now there's a couple of things that we have to enter in here for a form. The first as you can see here is an action which means where do I wanna send this data after the user hits the Submit button. And since we only have one page right now, we're gonna add another one later, we're just gonna post it to ourselves, cuz that's really just is the easiest way to do this. So now we have the actions specify, we also want to specify the method. And the method that we're going to use here is a post. So we wanna post the data to the index.php page, which is the one that we're working on so that we can process this information. So now that we have the basic structure of this form, let's go ahead and add some inputs so we can actually get some information from the user. Now, what do we wanna get? Well, you can really use your imagination. You can have this be anything that you want since this is really just an example. But for this purpose I am going to request that they send their name as well as their dream. So whatever it is they would like to try to accomplish in the future, that's what I want them to send. So let's start with name, and then for the name we are simply going to do an input text box, so the input type is gonna be text, the name here is gonna be name, and the ID is gonna be name. Now it's important to remember what the name is because when we post this data back to our file, back to our index.php file in here. When we go to extract that data from the post body, we need to know the name. So just make sure that you name this something that you can remember, and the reason I'm naming it name is because that's really what it represents. That's what I'm trying to get from the end user. Let's go ahead and add a couple of breaks in here just to spread things out a little bit, and then we'll say, what are your dreams? Let's go ahead and get that from the end user, and so I wanna actually drop this down a line in the view, so the text input box or actually the text area box shows up below the dreams text that I kinda gate things away a little bit there. We're gonna use a text area input for this one. And this time, the name is gonna be dream, the ID is gonna be dream, and this is just a convention, the name and the ID being the same. They don't necessarily have to be the same, but that's just kind of a convention that I've used for many, many years. Columns, how big do we want this to be? We can make that a little bit bigger, let's make it 50, rows 10, yeah, that should be fine. And then there's gonna be no default value in there. We don't really need it. But then after that, we're gonna add a couple more breaks, because at the bottom here, we want to have one final input, and that is gonna be the Submit button. So an input type Submit is gonna generate a button at the bottom of this form. That's gonna allow you to actually submit this data back to, once again, wherever you specify this action to be. And then for the value here you can set it to be anything you want, so you can say send your dream. Well just like that, I think that should be fine, and actually that's just call this dream. One dream at a time please. And since we've got all that set up now, let's go ahead and save this. And if I were to go back to my web browser and refresh, you're gonna see now I have a nice little form here. Now if you wanna play around with this and add some styling, absolutely, go for it, that's completely up to you. I don't think it's necessary for this course, but you can definitely take this and run with it, and make it your own, and do whatever you would like to do with it. So at this point, I would like to be able to enter in some information. I'd like to say Derek, and my dream is teach millions, or something like that, right? I wanna be able to enter in this information, and when I click Send Your Dream, I want that to send. As you can see, it sent here to index.php, but it's not really doing anything. And why isn't it doing anything? Well, the reason it's not doing anything is because we haven't written any code for it to do anything. So in the next lesson we're gonna setup a little bit of post handling on our index.php page, so that we can actually see the data coming through, and then we'll start doing some munging with some files and our data.

Back to the top