Sometimes you might have a group of predefined options, but you want the

user to be able to select multiple options and not just one of them.

That's where checkboxes are useful.

Lets say that we wanted the user to be able

to tell us which major topic areas are interesting to them.

They might be interested in more than one topic, so checkboxes are perfect for this.

I'm going to type out some checkboxes and then explain them.

So if we jump into our work space here.

And I scroll down pass the Select element we created earlier.

We'll type out a Label.

Once again without the for attribute because we're not actually

labelling any specific control here, just a group of controls.

We'll say interests.

And then, we'll use the input element.

And, for the type attribute, we'll say checkbox.

We'll give this one the ID of development and the

value of interest underscore development.

We'll give it a name of user underscore interest.

And then we can close that input element.

Right after it, we wanna add a label.

And once again we'll give it the class light.

And we'll add a for attribute of development because

that matches the ID attribute that we just created.

And then we'll give it a label of development.

And right after we'll put a br element to break down to the next line.

Because just like our radio buttons, we're going to list these out vertically.

So let's copy that because the code we're going to

write will be very similar for each one of these.

For the next one, instead of development, I'll say design.

So I'll just keep the word design in my clipboard.

And we'll change the value from interest development to interest design.

We'll change the for attribute in the label to match the ID.

So, that will be design as well.

And then, we'll change the content of the label element to design.

Finally, for the last input, we'll change the ID to business.

I'll keep the word business in my clipboard so I've just copied that.

I'll paste it to the value, so now it says interest_business.

And then we'll change the for attribute to business so it matches the ID.

And then finally, we'll change the content to business.

And for this last one, we don't need another line break, so we'll remove that.

And if we save that out, switch over to our preview and

refresh the page, you can see that we now have these checkboxes down at the bottom.

And I can click on the labels or

the actual checkboxes to check each one of them.

And unlike radio buttons where I can only select

one at a time, I can select multiple checkboxes.

[SOUND] So, lets jump back to the code and take a closer look at this.

Very similar to radio buttons, I've used a label

for the group and a label for each individual option.

The syntax is almost identical because most of the same rules apply.

The only real difference here is the type

attribute, and it's set to checkbox instead of radio.

This will tell the browser to render checkboxes, and the user can

select multiple checkboxes instead of just one of them like with radio buttons.

That about covers the basics of form elements.

Next up, we'll learn how to take your knowledge a little bit further.