Radio Buttons

Select menus are great if you have lots of options, however, if 0:00 you have something like five or less, it's better to use radio buttons. 0:03 These show you all the options at once but, like 0:08 select menus, the user can only pick from one of them. 0:12 Let's say for legal compliance reasons, we need to know if our 0:16 users are under the age of 13 or if they're 13 or older. 0:20 I'm going to type out some radio buttons and labels, and then explain it. 0:25 So, inside of our workspace, let's scroll up 0:30 so we're just underneath the password input element. 0:33 And here, we're going to type a label, and inside of it, we'll say, Age. 0:39 Now for this label, we're not actually going to type 0:46 a for attribute, and we'll get to why in a moment. 0:49 Next, let's type an input element, and the type is going to be radio. 0:53 Then for the id, we'll say, under_13. 1:01 For the value, we'll say the same thing, under_13, and then for the name 1:06 we'll say, user_age, and then we can close that input element. 1:13 Then I'll type a label element, and it will close by itself, 1:20 and it's wrapping down to the next line here, because we have word wrap turned on. 1:25 Inside of the label, we're going to say Under 13 1:31 and we need to add a few attributes to the label. 1:35 We'll add a for attribute, and we'll say 1:39 under_13 because we want it to be matched to this id. 1:43 Then we'll add another attribute, in this case we'll add 1:51 the class attribute, and I'm going to add the class Light. 1:56 And this is just another class that's inside of the included CSS 2:00 file that will just lighten up the font weight on this particular label. 2:05 So let's copy this and we'll paste it right there and 2:10 we just need to change a couple of ids and values here. 2:15 So let's change the ID to over_13. 2:19 We'll change the value to over_13. 2:23 We want to keep the type as radio, and then we also want to keep the name 2:27 as user_age, it will be exactly the same as this other radio button. 2:33 Then we just need to change the for attribute in the label to over_13, and 2:39 then we'll also change, the text inside of our label here. 2:45 We'll say 13 or Older. 2:50 So, lets save that out, and we'll switch over to our preview and, when I refresh 2:54 the page, you can see that we have two radio buttons here, and these are 3:00 in-line elements right now, so let me add a line break element between them. 3:05 So, I'll add a br tag there, save that out, and when I 3:11 refresh, they'll be on separate lines now and that's a lot more readable. 3:15 So, we have Under 13, and then 13 or Older, as our two options, and when I 3:20 select one of these options, and then try to select another option, you'll see that 3:24 it deselects the previous option, and the way that it knows 3:30 to do that is because we have the name attribute exactly the same. 3:36 So, it knows that these two radio buttons are part of the same group. 3:42 If we were to change this to something else, so let's say, user_job 3:47 for example, we could switch back and refresh, and then when I select one 3:53 of these, and then select another one, both will be selected, because the 3:59 browser thinks that these two radio buttons 4:03 are part of different radio button groups. 4:06 So let's go back and fix that. 4:09 We'll say, user_age, and then we'll save that out. 4:11 So all of the other attributes are pretty much self explanatory. 4:18 We've used the id attribute and the value attribute previously. 4:23 The type attribute is radio instead of text for 4:28 this particular input element, and then as we've already explained, 4:32 name should be the same if we want radio buttons 4:37 to be a part of the same radio button group. 4:40 Now you might still be wondering why we 4:44 didn't add a for attribute to the age label. 4:46 Let's take a look. 4:50 So if we jump over to our code here, you can see that this label doesn't have a for 4:52 attribute, but we do have a for attribute for under_13, and over_13. 4:57 The reason that we don't have a for attribute on the 5:03 Age label here is because there's nothing to associate it with. 5:08 These particular labels have an associated radio button, but this label is 5:13 really just to label this general area and these two form controls. 5:18 It's perfectly okay to use a label in place of a header if there's nothing 5:24 to really associate it with, but it's 5:28 still labeling a few form controls like this. 5:29 That about wraps things up for radio buttons. 5:33 Next, we'll learn about check boxes. 5:35