Hi, everybody, welcome back. Today, we're going to talk about some new form fields that you can add to your page. When we were doing name and email and different things like that. The set up was fairly straightforward. You give it an input type of text, email, password, etc. But as far as a page was concerned, these were all very separate part of the page. Each one was it's own part of the dom. However, there are some additional form fields that we're going to want to look at. And these include checkboxes and radio buttons. And how they differ from the earlier input field we were doing is that they need to be related within the code. Because we want to make sure that when we're giving people options. That when we send them off later, the computer know oh, these are related. So let's take a look and let's start with checkboxes. You've all seen these before when you've been online. They're typically shaped as these squares and you have the opportunity to click them for things such as, do you want to be part of the mailing list, if you want to receive additional information etc. It allows the user to select options with just a single click instead of typing in the different options they may want. The important thing to know here is that in your code, each of these options shares a single name. All right, so remember, we're using other input type. We have name equals first name or name equals keyword. Now if you look through your code, you're going to see multiple input types that all have the same name. So let's take a look at the example called Easy Checkbox. In this code, I've put up a few checkboxes that let people indicate which foods they like, and which ones they don't like. So as you can see I have three input type ="checkbox", but the important thing is that for all three of them, they all have the same name. Even though they all have the same name, each one of these has a different value. And so it's going to let the computer let the other software know that, oh, food, their favorite foods are pizza and chips, or just kale, or any combinations of these. Something I want to point out for just a second, because it's so important with accessibility is that I have labels on each one of these input fields. I know that personally, there are many times I've tried to click on something in a form, and my fingers are just too fat and I can't get it just right. And if you have to click only on the box, that can be a real problem turning it on and off. But by adding these labels, it also lets you click on the text next to it. So I can click on the word Kale and it'll activate the button. So, this is just a really simple way for you to add checkboxes into your code. The next thing we want to look at are radio buttons. So, visually, radio buttons are typically shaped like circles. And just like checkboxes, it allows your user to kind of click on it, to say, yes, no, and to have different options. The big difference is with radio buttons, you're only allowed to select one option per group. So well with checkboxes, I could pick kale and pizza and chips. With radio buttons, you can only select one. So let's take a look at how that works. In this example, I've gone in and I've made something for gender and it's simply you can choose male or female. The important thing to notice is that when I click on male, that's fine, but when I click on female, not only does it select female, it unselects the male. And as you may have just noticed, as I fumbled on this a little bit, I was like, why isn't it working when I click on the male? Why do I have to hit the actual button? It's because I forgot to put labels on these. And so the usability is really taken down a notch when you don't remember these simple things. So once again, I have the same exact name for every member of the radio button and a different value. So that's how the computer will know which one somebody selected. However, let's think about this a little deeper. Because it often happens that people go, oop, I've got it. I've got radio buttons down and we're all set, but then, as they try to do more complex things, stuff pops up. So let's look at the Easy Radio Button too. In this example, I have two groups of radio buttons, I have gender and I have favorite food. And while it makes sense that with radio buttons if I click on Pizza, maybe Chips will go away or if I click on Kale It'll go away. Same with male and female. The important thing is that many times, I've seen formed where someone clicks on male and then somehow that unselects the favorite food. You want to make sure that you're being logical in your grouping things together. And how we do that is again with the name attribute. These share the same name and that's gender. These share the same name and that's food. And so this is how you can make sure that your code is clicking or unclicking the way you really want it to. Okay, great, we've got our check boxes and our radio buttons, but this course is about JavaScript. So how do we incorporate with these checkboxes, and radio buttons, and other kind of advanced form fields? Well, now instead of looking at things, such as inner HTML, or if things have been clicked. These different attributes have something called a checked attribute, and so how this works is a radio button or a checkbox can be labeled as checked. And when you do that, by default, JavaScript will know whether it's on or off. In fact, in the code I did earlier, I threw that checked attribute in there. So, let's take a look at that and then, go on for a more advanced example of using JavaScript. So, now that I mentioned checked, I want you to take a look at this again and see if you notice something. When I first loaded the page, chips was pre-selected as one of my favorite food. How did I do that? Well if you check the code you can see that right here inside the input type='radio", value"Chips" I included a boolean attribute called checked="true". This says hey I want you to highlight this one as being pre-selected. And again this is something you see all the time when you're on the web, right? when you go to check out some place, it's been pre-selected that you want to be part of the mailing list or, it's been pre-selected that you would like to auto renew. So this is a kind of tricky way that web developers can kind of guide people down the path they want to go. But now that we know about checked, let's look at a slightly more complex example where we'll use the JavaScript. Now, in this code what we're trying to do is we're trying to give people the option of including a nickname in their form. So there's a lot of code and I'm hoping you'll go back and you'll look at it line by line. But let me give you a quick introduction to what's going on. Once I have my names in, I need to decide if I want to include a nickname or not. So when I click on this check box, boom, a new input field opens up. So let's see how that worked. If you take a look at our code. You can see that right here on the checkbox, I have an onchange, so if someone clicks or doesn't click it, let's call the nickname function. Now this is something where again we need to use logic because just because something changed doesn't mean we just clicked on it. We may have unclicked it as well. So, the first thing we're going to check is that hey, is that checkbox checked? Oh yes it is, so that means it was closed before and we want to change this little part down here from display hidden or display none to display inline. And then, the next thing we want to do and this is something new, you haven't seen before. Is, not only do we want to make it display, but we want to set an attribute on it. Because if someone says they have a nickname, we're going to force them to add that nickname in there. And so I have set attribute, required true. So this right here is he code that's going to be executed when I turn the checkbox on. However when I turn the checkbox off, oops, right down there. This right here is the code that's going to be executed next. We say, oh never mind, it's not required anymore, we're going to remove that attribute and we're going to hide it by setting the display to none. So it's an easy way to let us change the dynamics as a page, but what we're doing is actually very complex. It's few lines with a complex idea behind it. So let's just double check that it works. So I'll go here. I've got Colleen van Lent. If I hit verify, and let us go to a new page. However, if I go back and I click on that I have a nickname but I don't provide it. We get this note, sorry you need to fill that in. Again, when I was coding this myself, I was all gung-ho and I did all the if part correctly and it worked great. It was the else part that I actually had to sit and think about and say oh, that's right now that I have these required attributes and different things like, we really need to think about it. So the important thing for you to take away from this is that the idea that checkboxes and radio buttons are typically using the checked attribute in order to handle any type of interactivity. We've been playing a lot with forms, and forms are really great way to allow a user to interact with your page. Checkboxes and radio buttons, these are very commonly used events on a page that really give the user a lot of power to do things without typing in a lot of code. However, even though we've covered this, I need you to understand that we're doing what's called front-end programming. We're out there making things look good. We're not doing what's called the back-end programming. That's where you have to learn additional programming languages, and that's how you actually get the forms to do something. So, right now, let's go ahead and work on making beautiful forms and adding in that verification and the great styling. But I do want to make sure that you understand that we're only going to make them, we're not going to do anything with the data that sends them. Once you understand that and you can really focus on just learning the JavaScript, I think you can have a really good time adding these cool little tricks and tips to your page. Good luck.
