Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses 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
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
You need to sign up for Treehouse in order to download course files.
Sign up