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
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.
Reminder
Remember that in order to group radio buttons together, they must all share the same value for the name attribute.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up