FREELessons: 32Length: 5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.2 An Introduction to Forms

[SOUND]. Today, we're gonna focus on forms, whether that's context form or registration form. What are the necessary HTML elements that we must use, in order to display those types of elements? Let's first look at an example. I'm going to refer back to Net Tuts. And here's an article, if I scroll down to the bottom you can see that we have a contact form, and this allows us to enter our name, an email address, a URL, and our comments so that we can leave some feedback related to this article. So I want you to note these are HTML elements. This is a text box. This is a text area. And down here we have a submit button. So how can we create these? Let's dig in. We will open our code editor. We have a blank skin again. And first, we have to tell the browser, that we do want to display a form. So we're going to wrap it within a form element. Now a form will likely have two attributes minimum. One will be an action attribute and the next will be method. Now method, it's a little higher level than you are right now but it describes how the contents of your form, meaning the values that you type into those inputs and those text areas, are transmitted to your server-side language of choice. By default, this will be set to get, meaning they are transmitted through the URL. However there's also a method called post. And you might do this in situations where you need a little bit more security. For now though, I don't want you to worry about this much because it's beyond the scope of this course. You'll want to take a look at a server-side language like PHP for processing form data. Here, we're only focusing on creating the forms, and the action attribute specifies when you click the Submit button of your form. Where should that data be posted to? By default, it's going to post to the current page. However, if I decide I want to post that data to, maybe, contact.php, we can do that by specifying it right here. For now, I'm going to leave it blank. And I'll leave it open like this so you remember there is an action attribute, but it will post to the current page. Next, we wanna create a text box and we do that by creating an input element. So let's go ahead and self close it for the time being and see what we get when we view this in the browser. And there we are, as you would expect, we get a textbox which I can then click in and type. Now, I see two big problems with this though. One, we can enter all the text we want, but there's no button there so we can't submit the data and it can't be processed. So that's the next step is, we should create a submit button. Now we can do that, believe it or not, by using the exact same element. Input can be used to describe a text box, a button, or even check boxes and radio buttons. So in this case, we're gonna specify that the type of input should be a submit button. Now when I reload the page, there's your button. Good. Notice how it says, Submit by default. But what if you want it to say something different, such as go? You can do that by specifying a value attribute. Value is going to be go. Now, if I reload the page we've updated that accordingly. Now the next problem is, we have our text box right here but the visitor field website is going to have no clue what that text box represents. Are they suppose to enter there name? There email address? A search query? You have to tell them. So we need to provide some kind of label for them. Okay, well let's us a label element and we'll place it right here before. Label, and we'll say, Enter Your Name, like so. Now if I reload the page, there we are. We have a label that corresponds to a text box. Next, its very common when you view a form your natural instinct might be to click on the label, hoping that that will then trigger the text box. So when you click on the label the text box then becomes active. How would we do that? Well, we need to associate the label with the input. In this case we can say label. What is it for? What is it connected to? And we can associate by providing a value. We'll say here, name, and now to connect it, we're gonna provide an id to this input called, name. Now if I save it and I reload the page, when I click on label, you'll notice that the text box instantly becomes active, and this provides just a little bit more usability. Another thing you'll often find is developers will use an id of name, in this case. And they'll set the name attribute, not to be confused, the fact that the value is name, has no effect on the attribute name. If we decided we wanted to change this to, your name, that would work too, so don't let that confuse you. When you're working with a server-side language, they will often want to reference. And inputs value according to its name, or if you're working with JavaScript, sometimes you'll use it this way as well. So, what you'll find is many developers will go ahead and set an id attribute and a name attribute equal to the exact same value. That way, you're all set to go, no harm done. So now, let's provide an option to enter some feedback. So we don't use an input for that because this isn't gonna be long enough. We need a full area to write in. In that case, we use a textarea element. And this is a little different. Notice here, our inputs, we self close. But a textarea is like a label or a div, so we need to close it like so. And the reason we do this is because optionally, you can add a default value. So if I reload the page, you'll see that we've added a text area and it's filled with the value that we placed between the tags. In this case, we're going to leave it blank, so we'll do it like so. Once again though, we have no idea what this text area is looking like. And by the way we're going to make this look a lot nicer, so don't worry if it looks a little crazy right now. I'm going to come back and this time I'm going to add another label and this is going to be for and we'll say, comments. Now in order to connect it I have to remember to add a id of comments as well as a name of comments. And lastly, I will set the labels value to, Your Comments. Reload the page. And now we've provided a label for that one as well, and I can click on it. Now, let's begin styling it to make it look a lot better. One thing that you will often see is developers will use a p tag to separate each set of label and input. Even though I must admit that I've done this myself as well, I don't think it's a good practice. But let's go ahead and see what it provides us. We'll do this one and we'll wrap the input as well. I reload the page, you can see those are now on their own line. So they do this because browsers natively provide a little bit of spacing or margin between each paragraph. So it's an easy way to put your content on their own line, and get a little bit of padding between each input. However you have to think to yourself, p tag references a paragraph. Now does that have anything to do with a label and an input as children? Maybe so, maybe not, my instinct is no. So what you can think of though is, this is simply a list of inputs or a list of information that the user needs to fill out. So once again, there's that keyword, list. Why we don't try using an unordered list to wrap this. And I will repurpose this, indent it to make it look nice and neat. And I'll do the same thing here, like so. And I should make sure I close out my unordered list, as well. Now if I load the page, it's gonna look similar, but a couple differences. One, we certainly don't want those bullets. So let's get rid of that immediately. Form, list item, list-style, get rid of the bullets. Next, we need a little bit of breathing room because we've gotten rid of those paragraph tags that have the margin by default. That's okay. We'll add it in right now, and we'll say margin-bottom, 20 pixels. Reload, and that's looking a lot better now. Next, it's sometimes cleaner to have your label on its own line. So, let's do that. And we can do that by specifying that the label, rather than its default display of inline, it should be set to block. So, it will take up the entire width that's available. Reload, and now you'll see, there we go, looks a lot better. Notice how, this is a little odd, we have this input that's all the way to the left. If we come back, we can see the reason is, we forgot to place this within our list. So let's do it right now, and I will just clean this up and get rid of the p tag. Reload and now that's been pushed over, but that does beg the question, What is this spacing coming from? And if you remember from your previous lesson, browsers will apply some default padding left to all unordered lists unless we override that. You can verify this by clicking on the UL and right here you'll see webkit padding start. And this is for all intents and purposes identical to padding left, it's how the browser does it. A web kit refers to the engine that powers browsers like Chrome and Safari. Now we can override this by explicitly stating that the padding left should be 0. And notice that that pushes all the back. So let's do that now. Form ul, Padding left is 0. Notice I'm prefixing form because maybe within a blog posting for example we do want a little bit of padding for our UL. However, when its in a form we certainly don't. So I'm gonna keep it like so. If I reload that's looking a lot better. So now we have our text area. And that's still not a lot of room to type. You can see very quickly you run out of room. So why don't we set a width and a height. And there's two ways to do this. One is to apply it within your markup, so you could go right here to the text area and you could specify rows and cols. And you can think of these the same way you would think of in a spreadsheet. For example, rows will be the number of horizontal rows, if I set that to a big number like 50, that's a huge number of rows. Why don't we bring that down to 20. If it's easier, think of cols equals width, rows equals height. And I'll change that to 30, and now we've given them a lot more room to enter their comment. Now there's one problem with this, you can do this, but then again, what if you decide down the line that you wanna change the width and height of that text area? We do that big no, no again where you would then have to go back to your markup and adjust it. Another way we can do this is apply a width and height directly to the text area, within our CSS, like so. Let's see how that looks. Refresh. And now we're getting more or less the same effect, but we're doing it all from within our CSS file. Now, I think that height is too much, so I will reduce that and increase the width to 400. And that's looking a lot better. So now we can enter some information. My comments here. And if I click Go, watch what happens, and pay attention to the URL right here. Click Go, and nothing happens, why? And it's because we've overwritten the default method. And when it's post, you're not gonna be able to see it, because the data is not transmitted through the URL. If we change it to get, it will. Reload the page, and once again my name, my comment, and now look at the URL, it's been updated. Notice that we specify it what we call a query string, at the end of the URL, there's a question mark and then the input's name equals the value that was provided. And you separate each input with an ampersand. So name equals Jeff, comments equals my comment. And it's getting the word name and comments directly from the values that we provided right here and right here. So notice that because we set the action to nothing, it submits to the current page. If we instead wanted to set the action to contacts.php, and if we came back and entered this information again, it's then going to try to load contacts.php. And it's gonna take the information that was entered into that form, and send through the URL. And then, presumably with a server side language, you would capture those values. And then maybe email an administrator or perform some kind of action, maybe add that information to a database. This is the essentials of working with a form. Now in this case, again, we're not working with a server-side language, we're gonna leave the action blank. So let's take a look at a couple more things before we finish up for the day. And I hope you're working along because it'll really make it stick if you are. What if we want to give the user, a yes or no type question. In that case, we can use a checkbox. We'll create a label and this will say CSS, and we'll say, Do You Like CSS? Now, once again, we get to use an input element, but we specify the type to be checkbox. Now we have to remember to apply a name of CSS, and more importantly an id. You can usually get away with removing the name, although it is required in some situations. Now if I reload the page, we have a label, and we can click on it. So watch what happens when I add my name, and I check this, and I click Go. You'll see that it is represented by the value on, CSS equals on, and that means it was checked. But watch what happens, if I do it again, and this time I leave it off, notice that we have name equals jeff. Comment equals nothing because nothing was added, but we have no mention of this check box right here. And that's because when it's not checked, it will not be posted or sent through the YRL and that's an important distinction to make. Its not gonna say CSS equals off, there is no off only on. And I also want you to note that in addition to clicking on the check box because the label is associated with it, which we did right here for CSS. We can click on the label and that will trigger that input or check it. So it makes sense that we should also make the label element, and we change the cursor to a pointer and that will change it to that little finger. And that gives a little more feedback that it is clickable. And if you want to do a little bit more, maybe if we make the color blackish. And we'll set the font family to sans-serif. And maybe we set a little padding below so there's some breathing room between the label and the input, and we'll say 8px, just to clean it up a little bit more. And you can say now you're building a good form. And let's do one more before we finish up for the day. What if you want to give the user a list of options. So what is your favorite x? We'll do it right here with a list item, and our label will be Favorite Language. And here we're gonna create, once again, another input and this time the type is gonna be radio. And if I reload this quickly, you'll see, now we have a radio button. But this is different from a checkbox in that you can't click it again to uncheck because it's expected that you have to choose one. So generally you'll have things like CSS. I reload, can you see that show up? And I'll repeat this a couple times. You'll want to make sure that you add, just as before, a name and an id. I'm gonna leave that blank for now cuz you know that you're supposed to do that. JavaScript, and the last one may be Ruby. Reload, and now we have a list of items, so you can click one or more. Now, it's important to note again you cannot uncheck a radio once it's been checked. If you want to give them that ability, maybe you should be giving them a check box instead. Reload. Know that I can click HTML but no matter how many times I click it, I can't remove it. All right, so good job. You've created your first form, and this is how anyone would create a static form. In the next lesson, I'm going to teach you about image replacement.

Back to the top