Radio Buttons5:38 with Nick Pettit
If the user only needs to choose from 5 or fewer options, then it's better to use radio buttons instead of a select menu.
Remember that in order to group radio buttons together, they must all share the same value for the name attribute.
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
You need to sign up for Treehouse in order to download course files.Sign up