[MUSIC] Hi, and welcome to the lesson. In our last lesson, we talked about how to spruce up our HTML tables. In this lesson, we'll begin talking about HTML forms. An HTML form, like the one I have here is how our users provide information and send it to us. In this case, it's a sign up form. Users have put us with their name, their username, their email address and their password. And finally they can submit the form by clicking the sign up button. Forms can contain almost any information, and you can organize the form to be suitable for your purposes. For instance, it doesn't have to have a name, a username and an email. You can add any information you want. It can be a customer service form. It can be a request for additional information. It can be anything you want a user of your site to type in and submit to you. So, let's look at some of the elements of forms here we have a file called formInput1 where I've got a few versions of HTML input. Now here on line 7 we have our basic CSS as we've seen in other lessons. And, like any other HTML page, we have a head and a body. But this time we also have a form. Now, just to show you, our body tag goes from line 12 and closes on line 30 and the bulk of this form in the body or this page in the body is the form. Starting on line 14 and ending on line 28. And notice, within the form tags, we have input elements. Now we've seen a few input elements in previous lessons but never in a context of a form. Here we have First name, Last name and User password. As you can guess, these inputs are for a persons first and last name and their password. And we'll look at how they work in a moment. And then we have some other kinds of input here, on lines 22 through 24, we have radio buttons. I'll come back to how these work. It's best to get a visual on those first. And then finally, a submit button. So let's go look at this in a browser. And here we are. We have First name and Last name, User password and these are the radio buttons. So let's take these one at a time. First name is kind of as we expected, it is first name and a colon. And if we return to our code for a moment, we can see on line 15 we've got a break. And that's giving us this effect of having the First name label on one line and the input on the next. If instead we want them to be on the same line we could omit this break. So for Last name if we return to our browser notice that even though I didn't type anything into this field there is already something here, Smith. And the reason this is the case is because on line 18, near the end, we've given a value and the value="Smith". So, if for instance you wish to provide some default text that's already in the form when the user first arrives at it, you could put in a value. This is not required and if we remove this, it would be empty like First name and in addition, if the user wanted to, they could backspace over this and type in something else. So password is sort of a special input field. And I'm going to type some characters but notice that all you're seeing are the dots. Now, exactly what you see here is a little bit depending on your browser, but password fills are generally unreadable. So that someone can type in a password and someone seeing near them are looking over their shoulder won't be able to see where it is. So when you submit it to the server which is something we won't do in this class, this password will actually reach the server and you can use it to authenticate your user, that is, make sure they have the right username and password before you let them work with the rest of your site or in anyway use the password for its purpose. So, next we come to the radio buttons. I provided three and notice that from lines 22 to 23, all three of them are all type radio and they all have the same name food but they have different values pizza, tacos, and salad. And notice that if we return here, pizza is checked. I can click Tacos but if I do, it unchecks Pizza. Then click salad, it unchecks Tacos and back to Pizza and so forth. Now the reason that Pizza is checked at the start is because on line 22, I have checked in for the Pizza radio button. But with radio buttons, only one item of the group can be checked at anyone time, which is why as I click each one the other one unchecks. So, what connects is is they all have the same name food. If I wanted some different radio buttons but I wanted them to be their own group, I would give them their own name. So, you can have a set of radio buttons any one of which can be checked but only one, by giving them all the same name. So, finally, here, we have the input type submit and what this does is provides a button that says Submit, but so I'm going to keep in mind for this course, we won't actually be submitting our forms. In fact, when you click Submit, the browser tries to send the value in your forms, all of these elements to the server. Now, server is something that we haven't studied yet and you'd probably studied in other courses. But the server is for instance, Amazon.com or Coursera. Wherever your information is going, that's where the form will submit it. So we have a submit button to show that it's an input type. But we won't actually be submitting the form in this way because in this course we're not actually using a server so that's all for this lesson. In our next lesson we'll continue our discussion of HTML forms and the various types of input.
