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