Welcome back, my dear students.
Hope you are motivated.
Hope you're having coffee ☕ or Red Bull 🥤 or whatever
keeps you motivated, because we have to keep marching on 🏃‍♂️.
There's a lot to cover.
And to remind you, we are discussing the original input types that have been around for a very long
time, and the next set of input types are known as checkable items.
Well, firstly, what are they?
Very good question.
These are just controls
whose state you can change by clicking on them.
And there are two kinds of checkable items: (1) the checkbox and (2) the radio button.
We're going to be looking at examples shortly as to the differences between these, but importantly,
both use the checked attribute to indicate whether the widget is checked by default or not.
Let me quickly show you an example.
Here we are.
I want to show you a very quick example of checkable items by using both a checkbox and a radio button.
It's going to be super, super quick.
So let's just create a form.
Action can just be blank.
Um, and yeah, let's just deal with sweets.
And let's have an input here of type checkbox.
Checkbox.
There we go.
Its name can be "item".
This default value can be checked.
Okay, so that's the one.
And then we've got veggies here.
Let's just put a radio button.
You know, we're not going to be submitting things to a server, so let's just have type [of] radio.
And then of course, we need a submit button, don't we?
And its value can be Submit. If we open this up with Live Server,
here you go.
You can see that the default is checked for the Sweets - for the checkbox.
If we take it off the checkbox, we can put it on the radio.
Checked.
And there you go.
So you can already see there's a visual difference between a checkbox and a radio button.
And there are a few things worth noting.
One, if we go and submit this form now, nothing is going to be submitted.
Why?
Well, firstly, Sweets is not checked., and although the radio button is checked, we haven't defined
a name or value attribute for the radio button, have we?
If we go name, and we define that as veggies,
and its value can be "boo".
If we now submit it, it gets submitted to a server.
If we toggle Sweets, or we check Sweets, submit that ... then Sweets does get submitted to the server.
But it's a weird thing.
It's submitted to the server as item and its value is 1.
Right.
Because we've named this Sweets item "item" 😨.
But don't panic.
I'm going to be explaining exactly why it's default value is 1, and what these all mean shortly.
I just wanted to give you a quick, quick intro into checkable items.
Let's hop back into the lecture.
So there you go.
We used that checked attribute and you saw very briefly anyway, the differences between a type of radio
and a type of checkbox.
But we're going to be getting into more details shortly.
For now, there are just a few more things I want to say about checkable items in general.
Firstly, it's worth noting that these widgets do not behave exactly like other form widgets.
For most form widgets,
once the form is submitted, all widgets that have a name attribute is sent to the server, even if
no value has been filled out.
But in the case of checkable items, their values are only sent if they are checked.
That's important.
If they are not checked, nothing is sent.
Not even their name.
But when a form is submitted, what sent isn't the checked state,
because that doesn't matter, does it?
But the name:value pair.
But anyways, the bottom line is that the state of the checkable items decides whether the control's
value should be sent with the form data.
So just remember, the control is submitted only if it's checked.
So this is a huge distinguishing feature of checkable items.
Well, let's move on.
So that's checkable items.
And remember how I said the two types?
That's right.
Checkboxes and radio buttons.
So these are the two I want to discuss next.