Select menus are great if you have lots of options, however, if

you have something like five or less, it's better to use radio buttons.

These show you all the options at once but, like

select menus, the user can only pick from one of them.

Let's say for legal compliance reasons, we need to know if our

users are under the age of 13 or if they're 13 or older.

I'm going to type out some radio buttons and labels, and then explain it.

So, inside of our workspace, let's scroll up

so we're just underneath the password input element.

And here, we're going to type a label, and inside of it, we'll say, Age.

Now for this label, we're not actually going to type

a for attribute, and we'll get to why in a moment.

Next, let's type an input element, and the type is going to be radio.

Then for the id, we'll say, under_13.

For the value, we'll say the same thing, under_13, and then for the name

we'll say, user_age, and then we can close that input element.

Then I'll type a label element, and it will close by itself,

and it's wrapping down to the next line here, because we have word wrap turned on.

Inside of the label, we're going to say Under 13

and we need to add a few attributes to the label.

We'll add a for attribute, and we'll say

under_13 because we want it to be matched to this id.

Then we'll add another attribute, in this case we'll add

the class attribute, and I'm going to add the class Light.

And this is just another class that's inside of the included CSS

file that will just lighten up the font weight on this particular label.

So let's copy this and we'll paste it right there and

we just need to change a couple of ids and values here.

So let's change the ID to over_13.

We'll change the value to over_13.

We want to keep the type as radio, and then we also want to keep the name

as user_age, it will be exactly the same as this other radio button.

Then we just need to change the for attribute in the label to over_13, and

then we'll also change, the text inside of our label here.

We'll say 13 or Older.

So, lets save that out, and we'll switch over to our preview and, when I refresh

the page, you can see that we have two radio buttons here, and these are

in-line elements right now, so let me add a line break element between them.

So, I'll add a br tag there, save that out, and when I

refresh, they'll be on separate lines now and that's a lot more readable.

So, we have Under 13, and then 13 or Older, as our two options, and when I

select one of these options, and then try to select another option, you'll see that

it deselects the previous option, and the way that it knows

to do that is because we have the name attribute exactly the same.

So, it knows that these two radio buttons are part of the same group.

If we were to change this to something else, so let's say, user_job

for example, we could switch back and refresh, and then when I select one

of these, and then select another one, both will be selected, because the

browser thinks that these two radio buttons

are part of different radio button groups.

So let's go back and fix that.

We'll say, user_age, and then we'll save that out.

So all of the other attributes are pretty much self explanatory.

We've used the id attribute and the value attribute previously.

The type attribute is radio instead of text for

this particular input element, and then as we've already explained,

name should be the same if we want radio buttons

to be a part of the same radio button group.

Now you might still be wondering why we

didn't add a for attribute to the age label.

Let's take a look.

So if we jump over to our code here, you can see that this label doesn't have a for

attribute, but we do have a for attribute for under_13, and over_13.

The reason that we don't have a for attribute on the

Age label here is because there's nothing to associate it with.

These particular labels have an associated radio button, but this label is

really just to label this general area and these two form controls.

It's perfectly okay to use a label in place of a header if there's nothing

to really associate it with, but it's

still labeling a few form controls like this.

That about wraps things up for radio buttons.

Next, we'll learn about check boxes.