And firstly, I want to look at checkboxes. And to remind you, we're looking at the input element,
we're setting its type attribute to checkbox.
And what does a checkbox do?
Well, very simply, it allows you to select single values for submission in a form.
And because of the on/off nature of a checkbox, it's either on or off,
the checkbox is considered a toggle button.
This just means many developers, including myself and designers, expand on the default checkbox styling
to create buttons that look like toggle switches.
And in fact, we're going to have a challenge coming up where I want to design our own toggle button.
It's going to be really, really epic! And we've already seen that, including the checked attribute
makes it checked automatically when the page loads.
Another thing to note, is that any checkboxes and radio buttons in fact with the checked attribute on
load, will match the :default pseudo class even if they are later unchecked.
And when an item gets checked, that item is going to match the :checked pseudo class.
And this is what's really cool with these type of widgets.
We've got this :checked class that toggles on and off every time a user selects it.
Let me hop over to Visual Studio Code and show you. I want to show you a very quick example of checked
and how we can use this checked kind of attribute.
It's really, really useful.
This is going to be a very, very simple example.
I'm not even going to put it in HTML tags.
I know, I know.
Very bad practice, but it's going to be super, super quick.
Okay.
We want to create an input, but this time with type of checkbox. Name can just be "name", ID can be "name".
And I want this to be checked by default.
If we save this, and open it up in Live Server, this is what it looks like, right?
And what I want to show you is I actually want to look at this in the console.
Let's grab it, and console log its properties out to the console.
So let's include <script> tags because we're going to be writing JavaScript. We're going to define a
variable and I want to grab that checkbox. And all we're going to do is we're going to grab the document
object. On there,
we can use the method querySelector() and what I want, well, I want the inputs and I want an input with
type attribute is set to
checkbox.
That's all I want to do.
It's really, really this simple.
And then I'm going to console.dir(), which is different to console.log().
I'm wanting to "dir" it out because that gives us kind of a JSON tree visual representation of the actual
element.
And let's console.dir() out the checkbox.
So let's go back to our browser, let's refresh the page and there we go.
We've literally got this in the console.
And what's interesting here, okay, is we've got a whole lot of properties and methods. And the first
thing I want to show you, is that when it's checked, remember I said the :default pseudo class is selected?
Well, there it is.
defaultChecked is true.
So that's the first thing I wanted to show you.
The second thing I want to show you is this checked state and that it toggles on and off.
So how can I show you that?
Well, let me write a comment here.
Let's see the checked state being toggled.
Oh, the other thing I want to show you quickly, if I just go here.
And we search for a checked.
There, if we scroll further down, we can see that the :checked state is also true. And that checked state
is going to be toggling off and on.
And that's what I want to show you
now - I want to show you that in action.
Okay.
So let's go back to our code.
In order to do this, I'm going to be using an event listener, and I've discussed this at length in
my DOM courses, so please check it out if you're interested.
But you don't have to.
And if you know it, that's great.
So all I want to do is grab our checkbox, add an event listener to it. And what is the event listener
I want to listen to?
Well, every time a user toggles a checkbox, the "change" event is fired by the browser - by the DOM.
And when that happens, I want to execute a function.
All I want to do right now is I want to console.log out to the screen,
the checkbox checked state, And this is all I want to do.
I want to listen for a change event.
When the change event is fired, I want us to see its checked state.
So if we go to the browser and we start toggling this ... why is it not working 🙈?
Why is this not working?
It should work.
Let me refresh the page.
Oh, there we go.
I don't know why.
I just needed to refresh, but every time we toggle this checkbox, we can see the checked state.
So the checked state is true when it's on, false when it's off.
All I did was I grabbed this checkbox and I went to its checked state.
That's all I did.
Where is the checked box?
Checked.
There we go.
It's all I did. I grabbed that checked property and I'm console logging that to the screen.
How awesome.
How awesome is that?
So that's all I wanted to show you about the :default pseudo class and that :checked [pseudo] class.
And it's really cool because we can target these things and then style them in certain ways.
But let's hop back to the lecture before I start babbling on for too long.
How cool was that?
So there we go.
We're looking at input of type checkbox. And now I want to talk about submitting a checkbox.
What happens when you submit a checkbox?
Well, we know that form data is always sent to the server as name:value pairs.
Makes sense.
So with a checkbox, if we have a name and a value, those will be sent to the server.
This example here has a name of "accept" and its value is "T&Cs".
And what about the value?
Well, the value is not so important and in fact it's optional because it's never seen client side and
it's default value when the checkbox is checked, is on.
All that we care about is that it's on, not necessarily what the value is.
For instance, let's say the user submits this form. We know it's name attribute is accept.
So the server is going to get a name:value pair.
Let's say value is defined as "T&Cs".
It's going to be sent to the server like this, as a "name=value" pair.
If we don't define value, it's going to be sent as "accept=on".
And in both of these instances, what's important to us is that it's been checked and the user has accepted.
Whether we've got "T&Cs" or "on" doesn't really matter.
And that's why the value attribute is optional and often ignored.
Have you got it?
I hope so.
You might be thinking, well, what happens if nothing is actually checked?
Well, if a checkbox is unchecked and the form is submitted, no value is going to be submitted to the
server.
If it was, it would kind of be like this: "name=unchecked". And the server can't put a value to unchecked.
And so the value is not even submitted to the server at all.
"Well then Clyde,
how do I submit a default value to a server if I want to?"
Well, if you want to do that, then you can always revert back to the hidden input type.
Remember that, we discussed that a while back?
But anyway, enough blubber blabber.
Let me hop over to Visual Studio Code and let's just look at this checkbox in more detail.
Let's just code up a very simple checkbox.
Oh man, I love this coffee 😍☕.
It is so, so delicious.
I wish I could be having some with you.
Oh, it's good.
Anyway.
Yes.
Checkboxes.
Let me show you a quick example of building up some checkboxes.
So here we are in Visual Studio Code. A blank file,
as usual. We can set up HTML. Within here,
we can set up, call it a body. Within the body
you guessed it,
we want to wrap everything within our form.
And we're going to do a very, very quick example here.
Okay.
All I want to do is I want to create an input, and this time, you guessed it, with type checkbox.
Let's save this.
Let's just open Live Server.
And let's put it side by side
so you can see what's going on.
So you can see already in the browser it's visually displayed that square box.
And visually we know that that is a checkbox versus a radio button.
Let me just zoom in a bit more.
There you go.
You can [now] see that better.
And the browser automatically applies these default stylings to it when it's checked or unchecked.
Pretty straightforward.
Pretty intuitive.
Now, normally with checkboxes, you have more than one, right?
So I don't know.
Let's just have a paragraph saying choose your favorite food.
Save that.
There we go.
Now with checkboxes,
as I mentioned, we don't need a value attribute, but the name attribute is extremely important.
So let's have a food here of meat.
Don't need an ID, we're not styling anything now.
We can do a few checkboxes. One is meat, one is sweets & one is veggies.
And then of course, we can have a button with type submit.
So if we look at this, there we go.
We've got three checkboxes, right.
And what's different to a radio button is we can select all three at once.
Let's just put a break here with the submit button.
And of course, we usually want, you know, text.
So this will be meat.
Let's break it up.
This can be sweets 🍬.
Sweeeeeets.
And we can implement a break.
And you guessed it, veggies.
How does it look?
Let's have another break there.
There we go.
Capital S, Sweets.
One more thing.
Just to make it consistent.
There you go.
You can see how quick and easy it is to create checkboxes,
right?
And if we just select Meat and Sweets, and we click submit,
look at the browser.
This is what I wanted to prove to you - that we don't need a value attribute.
We know that Meat and Sweets were selected, and the mere fact that we've checked that checkbox tells
us it's on, tells us that it's selected.
And you can see what's appended in the URL - that Meat is assigned the value of "on" and Sweets is assigned
the value of "on".
That's enough.
I mean, we could put a value attribute in here, but it really doesn't do much.
We could say the value is,
favFood.
How's that as an example?
And we could put this everywhere.
I'm just going to show you it really is meaningless. If we now refresh the page, and we just select veggies
and we click submit
we've got veggies and it's assigned the value of favFood. But it doesn't really matter.
We could just exclude it all together.
And of course here, if we click actually on the text itself, it does nothing.
And that's because we haven't wrapped these in a .... ??? .... that's right,
a label.
So what we could do, if you wanted to be sneaky, and we could do it inline,
we could just take that entire input
and put it here.
There we go.
And I've just done it with Meat.
And now if we click Meat, obviously the checkbox toggles on and off.
How cool.
Anyway, very, very quick example to show you how easy it is to create a checkbox, how intuitive
it is.
Let's hop back into the lecture.
Whew.
This is so, so cool.
Now there's one final comment I want to make, and that is checkboxes are similar to radio buttons,
but they're not the same.
Don't get confused, okay?
We just been focusing on checkboxes, not radio buttons.
Which brings me to our next topic.
And that is ... radio buttons. (music starts playing)