Checkboxes

Sometimes you might have a group of predefined options, but you want the 0:00 user to be able to select multiple options and not just one of them. 0:03 That's where checkboxes are useful. 0:09 Lets say that we wanted the user to be able 0:11 to tell us which major topic areas are interesting to them. 0:13 They might be interested in more than one topic, so checkboxes are perfect for this. 0:17 I'm going to type out some checkboxes and then explain them. 0:23 So if we jump into our work space here. 0:27 And I scroll down pass the Select element we created earlier. 0:30 We'll type out a Label. 0:37 Once again without the for attribute because we're not actually 0:40 labelling any specific control here, just a group of controls. 0:43 We'll say interests. 0:46 And then, we'll use the input element. 0:51 And, for the type attribute, we'll say checkbox. 0:56 We'll give this one the ID of development and the 1:01 value of interest underscore development. 1:08 We'll give it a name of user underscore interest. 1:15 And then we can close that input element. 1:23 Right after it, we wanna add a label. 1:26 And once again we'll give it the class light. 1:30 And we'll add a for attribute of development because 1:33 that matches the ID attribute that we just created. 1:38 And then we'll give it a label of development. 1:42 And right after we'll put a br element to break down to the next line. 1:46 Because just like our radio buttons, we're going to list these out vertically. 1:50 So let's copy that because the code we're going to 1:56 write will be very similar for each one of these. 1:59 For the next one, instead of development, I'll say design. 2:03 So I'll just keep the word design in my clipboard. 2:07 And we'll change the value from interest development to interest design. 2:12 We'll change the for attribute in the label to match the ID. 2:18 So, that will be design as well. 2:23 And then, we'll change the content of the label element to design. 2:25 Finally, for the last input, we'll change the ID to business. 2:31 I'll keep the word business in my clipboard so I've just copied that. 2:38 I'll paste it to the value, so now it says interest_business. 2:42 And then we'll change the for attribute to business so it matches the ID. 2:46 And then finally, we'll change the content to business. 2:53 And for this last one, we don't need another line break, so we'll remove that. 2:57 And if we save that out, switch over to our preview and 3:06 refresh the page, you can see that we now have these checkboxes down at the bottom. 3:12 And I can click on the labels or 3:18 the actual checkboxes to check each one of them. 3:21 And unlike radio buttons where I can only select 3:25 one at a time, I can select multiple checkboxes. 3:28 [SOUND] So, lets jump back to the code and take a closer look at this. 3:33 Very similar to radio buttons, I've used a label 3:39 for the group and a label for each individual option. 3:42 The syntax is almost identical because most of the same rules apply. 3:47 The only real difference here is the type 3:52 attribute, and it's set to checkbox instead of radio. 3:55 This will tell the browser to render checkboxes, and the user can 4:00 select multiple checkboxes instead of just one of them like with radio buttons. 4:03 That about covers the basics of form elements. 4:08 Next up, we'll learn how to take your knowledge a little bit further. 4:11