We can use radio buttons to have multiple options
where only one of them should be chosen.
We use checkboxes if we have an either or choice,
which we want to present to the user.
Something like accepting the terms of use
or anything like that.
So for this, we can add another input
and now set the type to checkbox, here.
Now, I will actually reuse my form control inline div here.
Since I also want to have a label next to this checkbox.
So I'll add a label after input type checkbox,
and maybe say, I agree to terms
and point at, agree-terms as an ID
and add that ID to this checkbox
form control here then.
Agree terms.
Like this.
Now with that, I got this checkbox down there
and we can either check it
or not check it.
That's how this works.
Now, that's not all I want to do, though.
I also need to assign a name,
so that when we submit the form,
we have an identifier, which we can use on the server to
extract the submitted value.
And I'll set name=terms here, for example.
And now with that, if I save this,
if I check this and submit this,
you will see that terms is set to on here.
So, on is the value which is submitted, if this is checked.
If I submit this, when it's not checked,
terms is simply omitted.
So, then we don't even have terms as part of the submitted
key value pairs here.
Then that terms input is entirely omitted in the data that
is sent to the server.
And that's just something which is worth noting here.
Now you can also use checkboxes to have a list of
checkable items.
For example, if a user should check all the ways,
which can be used to contact that user and that's
also something I want to show to you.
For this I'll add another input label combination here.
And then here, I'll say contact me via email
and change the ID to contact-email
and for="contact-email,
and then copy this entire div and repeat it again to also
have contact me via phone, let's say.
And then the ID here could be contact-phone and
contact-phone here as well.
And now here, I then want to use the same name
for these two inputs as well,
just as we did it for the radio buttons.
Here, I'll set the name to contact.
And now the interesting thing is that with the checkbox,
we'll actually be able to select multiple values,
not just one.
That's the difference to the radio buttons,
but these selected values will then be grouped together when
they're sent to the server.
And therefore, here in this case,
where we don't use the checkbox
as a single either or choice,
but instead to choose a selection of values,
we should again add a value here.
We did not need this for the agree to terms checkbox,
because they're just getting this on value
or no value at all, was enough to answer this question,
whether the user agrees or not.
But if multiple values can be selected here,
then we have to give these values identifiers,
which we can extract on the server later.
So here I'll just say email.
And on the second input, I'll add a value of phone.
And if I do that and saved this.
Now, we've got these checkboxes here as well,
and I can check one of them or both of them.
And when this is submitted, you see that contact
is now added multiple times with all
those different values, which we selected.
And we're going to dive into how we can parse and use this
on a server later in the course,
when we dive deeply into backend
and service site development.
But these are the two ways of using checkboxes.
To have a single yes no choice,
or to have a list of choices where more than one
choice can be made.
And that's the difference to the radio buttons where only
one option can be selected at the same time.