Hi, everybody. One place where you tend to see a lot of JavaScript used is when people are creating forms. Forms are a great way to let you give people the opportunity to send you feedback. Forms also add a new layer to what we call the Request-Response Cycle. So previously, we've had our phone, yeah, no one has an antenna anymore but I'll put one in, all right, and we had a server. And how it would work is from your phone or your laptop, you would send out for request and say, hey, can you send me back that file, index.html. And then the server would send back a whole bunch of information. It would send back the HTML file. It might send back a style sheet or two. It might send back some pictures. And it was really good, we can get things to work nicely that way. But now, one of you also want to send additional information instead of just see index.html, we said, hey, can you return a page, and by the way, here is my name and my user name, oh sorry, and my password. [SOUND] There we go. Forms lets us send that additional information. So forms pass this data, and how they can do that is they can let you put in different type of input elements. Strings, numbers, files, a lot of different things like that. However, in order to really get the full power of forms, they must be associated with a server. So, we aren't hooked up to servers in this class. You're just developing locally on your laptops. So we can create the forms, but we can't really process them yet. The reason for this is that we're doing what's called front end web development. With front end development, you tend to think about what happens on that browser or client side. How we want things to look on your laptop, on your phone, on your tablet. We do this using our HTML and CSS in JavaScript. If you wanna take this further, this idea forms, then you need to jump into what's called back end development. That's where the server's actually handling that data you're gonna send to people. You'll need to learn something like Python, or Ruby, PHP. There's a lot of different things we can do at the back end. But in this class and in this lecture, we're only going to talk about the front end. We're gonna talk about that HTML, CSS, and JavaScript that we use to put together a form. Okay, so how do we make a form? Typically, you want to use at least three different HTML elements, the form, the label, and the input. The form tells a browser, hey we're about to do a form and we're gonna probably be processing some data, get ready. The label is what matches different text on the screen with the actual input that you can put in. So let's start off by putting in the name. Here, I have <label for='name'>, type='text', id='name'. And then I do actually happen to have name='name'. It can get a little overwhelming with all the places I used name, all right. So when we do this, what I've done is I've just created a label called name and I've linked it to that field that somebody can type into. And that label's very important because what it means is if somebody clicks in here, great, I activated the input field. But it also means if somebody clicks even on the name, it'll activate this input field. Why is this important? Well, some people have a hard time navigating through forms, especially on their phone. So by letting it set up, so that you can hit small pieces of text instead of just necessarily the buttons or check boxes, it's going to make their life much easier. So by putting in label for='name', it lets the computer know that these two things are linked together. But we can actually go ahead and link forms and labels in another way. In my second example, I skipped the whole for part and instead, how I made it work, cuz I said, hey, I've got a label tag, everything inside of here is all grouped together. So now, I'm going to have one field for the name, one field for the email, and let's go ahead and add one for the birthdate. So, it's easy to kind of go through and just be very consistent and add new inputs one at a time. The thing that I'm not sure if you've noticed at all is that each one of these has a different type. I have type='text', type='email', and, finally, type='date'. Each one of these will create a different type of input experience for the user. And, speaking of form attributes, the last thing we want to make sure we always have is input type='submit'. If you don't have this part right here, there's no way for anybody to actually send the form. So don't forget to include that. Now that we have this code, let's see what it looks like on the browser. Here's how it would look on Chrome. I have my name, I have my three input fields. And if you notice, I have right here some sort of, month, month, day, day, year, year, year. That's a nice little calendar function. If I look at the exact same page, the exact same code, but I look on it on Firefox, it's going to look a little bit different, that month, day, and year are gone. So let me show you this in real time. So here's my form when I'm looking at it on Chrome. And you can see down here in the corner, I've got my name, and my email, and the birthdate. And when I click here inside birth, or inside here, I can have an entire calendar function pop up for me where I can say, oh, I want to pick February 13th, 2015, all right. And this is a really handy way for someone to be able to input data. But now, let's look at the same code but on Safari. You might notice that this isn't here any more. There's no way for me to generate that calendar to pop up. All right, oops, [LAUGH] I shouldn't have done that, but that's fine. And so, these are the little things that you need to consider when you're coding for multiple different types of browsers. So, you've seen a very simple form. Let's talk about the different attributes these form elements can have. The first one is type. The next one is name. And the next one is id. These are the three attributes we're gonna see the most so I want to cover them in a little bit more depth. For our input types, there's a long list of different things you might see in your field. You might see textfield, email, password, or radiobutton. Those are those circular things where you can only pick one or the other, or one from multiple choices. You can have a checkbox. With a checkbox, you can click yes or no on multiple different elements. And finally, you're used to seeing the submit button. These are kind of the key input types that everyone would expect you to know how to use if you're a web developer. So a few additional input types are number, range, color, date, and URL. Each one of these are very restrictive in what they let the user type in. If you have that something is a number, the form isn't going to submit if you put in some letters. Same thing for date and for URL, it's expecting to see http://. If the user doesn't input that, the browser says, nope, you just can't do it. The other really cool thing about these input types is that if somebody's looking at your page on a mobile phone, some of them will cause a different keyboard to pop up. Have you ever been on your phone, and when you're filling something out, if it's a web address, you'll get the at symbol on your keyboard? Well, if you're filling in a phone number you'll get the number keypad instead of the character keypad. All of these different input types can help make your site act a little bit better to the user. Let's go ahead and take a look at these just briefly on the website. So here are each of those input types on a form and this gonna go in and type in a few of them so you can see. If I type in my name, it's as you expect. But look what happen when I start typing in to the password. I'm gonna go ahead and write in Colleen. And instead, you're getting kind of masked or covered up. With radio buttons, I can only check one of the options, not both. But with check boxes, you can click as many as you want. Now number, when you get the number, you get something, it's called a spinner where you can actually press up and down. You don't see those in text boxes or email addresses. Range let's you pull back and forth. Color, if it's supported by the browser, when I click on it will actually give me a color wheel, the whole list of different things I can pick, all right? And finally, URL was the one where I said it's going to expect you to type HTTP. In addition to the input type, I mentioned there are two other attribute you want to make sure you understand. The first one is name. Almost every input type should have a name attribute associated with it. Because if you don't, when the time does come for you to work on your back end development, if you decide to go work on the servers, is that that information is actually sent to the browser. So for my name example, I would have name = "Colleen" is actually included in the information that's sent to the server. The other attribute is the id attribute. The id attribute is very important for what we're doing for the front end development. First, it's used for those labels that I talked about. It identifies this particular part of the form, as that particular part, so you can make sure that when you click on the label, the right input value is kind of highlighted. The second reason of course is that we've been using id's with JavaScript all along and we want to make sure that we can continue to do that. Just two additional attributes because they're gonna make our life easier, is one is value. When you have a value attribute, it's going to do different things depending upon which input type it's matched with. So if you have a button, that value actually becomes the text inside the button. So it becomes the words Click, along that line. Now for a textfield, it's a little bit different. With the textfield, it lets you actually hard code in the values that are gonna be sent to the server. On a button, this Click here is permanent, you can't change it. But in a text field, it's perfectly okay for you to come in, erase this and put in some new value. The other cool attribute is this idea of a placeholder. It's very similar to value, but instead, it provides a suggestion. It's nothing official, just something you may wanna do. And you'll see this often in telephone numbers or anything where you want people to format things a certain way. So in the telephone field, you wouldn't see in blacking, usually I could grayed out color. Something along the line of (123) 456-7890. It's a suggestion, it's letting the person know what kind of input you're expecting. Now, as soon as somebody clicks in there, it's gone, so it's not permanent. So let's review all the things we've learned about forms in this one short video. First, you need to know the HTML tags for creating forms. Once you create that basic form, then you'll be able to add the extra functions that we're gonna be covering in these next few lectures. So go in, use the basic form, change it so maybe you have a first name and a last name. Play with what happens when you have an email field verse a textfield. And see if you can make something that you'll be able to play with throughout the rest of this week as we learn more about JavaScript. Thanks.
