1 00:00:00,250 --> 00:00:03,970 Select menus are great if you have lots of options, however, if 2 00:00:03,970 --> 00:00:08,720 you have something like five or less, it's better to use radio buttons. 3 00:00:08,720 --> 00:00:12,080 These show you all the options at once but, like 4 00:00:12,080 --> 00:00:16,510 select menus, the user can only pick from one of them. 5 00:00:16,510 --> 00:00:20,730 Let's say for legal compliance reasons, we need to know if our 6 00:00:20,730 --> 00:00:25,670 users are under the age of 13 or if they're 13 or older. 7 00:00:25,670 --> 00:00:29,780 I'm going to type out some radio buttons and labels, and then explain it. 8 00:00:30,800 --> 00:00:33,620 So, inside of our workspace, let's scroll up 9 00:00:33,620 --> 00:00:37,220 so we're just underneath the password input element. 10 00:00:39,440 --> 00:00:46,730 And here, we're going to type a label, and inside of it, we'll say, Age. 11 00:00:46,730 --> 00:00:49,360 Now for this label, we're not actually going to type 12 00:00:49,360 --> 00:00:52,400 a for attribute, and we'll get to why in a moment. 13 00:00:53,720 --> 00:01:00,070 Next, let's type an input element, and the type is going to be radio. 14 00:01:01,180 --> 00:01:05,214 Then for the id, we'll say, under_13. 15 00:01:06,250 --> 00:01:13,090 For the value, we'll say the same thing, under_13, and then for the name 16 00:01:13,090 --> 00:01:20,220 we'll say, user_age, and then we can close that input element. 17 00:01:20,220 --> 00:01:25,790 Then I'll type a label element, and it will close by itself, 18 00:01:25,790 --> 00:01:31,090 and it's wrapping down to the next line here, because we have word wrap turned on. 19 00:01:31,090 --> 00:01:35,220 Inside of the label, we're going to say Under 13 20 00:01:35,220 --> 00:01:39,630 and we need to add a few attributes to the label. 21 00:01:39,630 --> 00:01:43,975 We'll add a for attribute, and we'll say 22 00:01:43,975 --> 00:01:50,210 under_13 because we want it to be matched to this id. 23 00:01:51,540 --> 00:01:56,190 Then we'll add another attribute, in this case we'll add 24 00:01:56,190 --> 00:02:00,810 the class attribute, and I'm going to add the class Light. 25 00:02:00,810 --> 00:02:05,010 And this is just another class that's inside of the included CSS 26 00:02:05,010 --> 00:02:10,210 file that will just lighten up the font weight on this particular label. 27 00:02:10,210 --> 00:02:15,850 So let's copy this and we'll paste it right there and 28 00:02:15,850 --> 00:02:19,640 we just need to change a couple of ids and values here. 29 00:02:19,640 --> 00:02:23,345 So let's change the ID to over_13. 30 00:02:23,345 --> 00:02:27,350 We'll change the value to over_13. 31 00:02:27,350 --> 00:02:33,560 We want to keep the type as radio, and then we also want to keep the name 32 00:02:33,560 --> 00:02:39,580 as user_age, it will be exactly the same as this other radio button. 33 00:02:39,580 --> 00:02:45,380 Then we just need to change the for attribute in the label to over_13, and 34 00:02:45,380 --> 00:02:50,910 then we'll also change, the text inside of our label here. 35 00:02:50,910 --> 00:02:53,700 We'll say 13 or Older. 36 00:02:54,930 --> 00:03:00,570 So, lets save that out, and we'll switch over to our preview and, when I refresh 37 00:03:00,570 --> 00:03:05,755 the page, you can see that we have two radio buttons here, and these are 38 00:03:05,755 --> 00:03:10,740 in-line elements right now, so let me add a line break element between them. 39 00:03:11,880 --> 00:03:15,170 So, I'll add a br tag there, save that out, and when I 40 00:03:15,170 --> 00:03:20,000 refresh, they'll be on separate lines now and that's a lot more readable. 41 00:03:20,000 --> 00:03:24,960 So, we have Under 13, and then 13 or Older, as our two options, and when I 42 00:03:24,960 --> 00:03:30,750 select one of these options, and then try to select another option, you'll see that 43 00:03:30,750 --> 00:03:36,590 it deselects the previous option, and the way that it knows 44 00:03:36,590 --> 00:03:42,560 to do that is because we have the name attribute exactly the same. 45 00:03:42,560 --> 00:03:47,470 So, it knows that these two radio buttons are part of the same group. 46 00:03:47,470 --> 00:03:53,478 If we were to change this to something else, so let's say, user_job 47 00:03:53,478 --> 00:03:59,600 for example, we could switch back and refresh, and then when I select one 48 00:03:59,600 --> 00:04:03,960 of these, and then select another one, both will be selected, because the 49 00:04:03,960 --> 00:04:06,580 browser thinks that these two radio buttons 50 00:04:06,580 --> 00:04:09,960 are part of different radio button groups. 51 00:04:09,960 --> 00:04:11,998 So let's go back and fix that. 52 00:04:11,998 --> 00:04:18,790 We'll say, user_age, and then we'll save that out. 53 00:04:18,790 --> 00:04:23,170 So all of the other attributes are pretty much self explanatory. 54 00:04:23,170 --> 00:04:28,580 We've used the id attribute and the value attribute previously. 55 00:04:28,580 --> 00:04:32,460 The type attribute is radio instead of text for 56 00:04:32,460 --> 00:04:37,300 this particular input element, and then as we've already explained, 57 00:04:37,300 --> 00:04:40,450 name should be the same if we want radio buttons 58 00:04:40,450 --> 00:04:44,200 to be a part of the same radio button group. 59 00:04:44,200 --> 00:04:46,260 Now you might still be wondering why we 60 00:04:46,260 --> 00:04:50,450 didn't add a for attribute to the age label. 61 00:04:50,450 --> 00:04:52,080 Let's take a look. 62 00:04:52,080 --> 00:04:57,480 So if we jump over to our code here, you can see that this label doesn't have a for 63 00:04:57,480 --> 00:05:03,720 attribute, but we do have a for attribute for under_13, and over_13. 64 00:05:03,720 --> 00:05:08,550 The reason that we don't have a for attribute on the 65 00:05:08,550 --> 00:05:12,289 Age label here is because there's nothing to associate it with. 66 00:05:13,620 --> 00:05:18,590 These particular labels have an associated radio button, but this label is 67 00:05:18,590 --> 00:05:24,140 really just to label this general area and these two form controls. 68 00:05:24,140 --> 00:05:28,100 It's perfectly okay to use a label in place of a header if there's nothing 69 00:05:28,100 --> 00:05:29,820 to really associate it with, but it's 70 00:05:29,820 --> 00:05:33,630 still labeling a few form controls like this. 71 00:05:33,630 --> 00:05:35,900 That about wraps things up for radio buttons. 72 00:05:35,900 --> 00:05:38,120 Next, we'll learn about check boxes.