Preview
Video Player
00:00
00:00
Radio Buttons
5:38If the user only needs to choose from 5 or fewer options, then it's better to use radio buttons instead of a select menu.
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