All right, in this lecture, I want us to go back to our <input> elements.
Remember those 🤔 ?
And specifically, I want us to look at a checkbox.
In my opinion, the checkbox is a lot easier than the radio...
button. Remember the radio button? We had to have the same "name" attributes with each radio button.
We even had to wrap it in a <fieldset> element just to make sure that it's all associated with the same...
group.
The cool thing is ... let me just move this camera 🎥 here ... the cool thing is with checkboxes is that you can select however...
many you want.
That's right...
if there are a whole lot of checkboxes, I might want to select every single one.
And because of that, it makes checkboxes a lot more intuitive and easy, in my opinion.
In fact, we don't even need the <fieldset> element wrapper, and we also don't even need to have the same name...
attributes across every checkbox.
So let's start, um, let me me walk back into the room...
let's jump into the text editor, and let's start coding some checkboxes. See you now.
I just love this stuff.
I'm so, so amped. So, let's try and finish off our form because we are almost almost there.
Well done 🎉.
You've learned an incredible amount.
So what I want to do now, we've got our textbox, and as I mentioned outside...
I want us to do checkboxes now.
And in my opinion, they are easier than radio boxes.
But let's start coding...
so let's go to our text editor. Let me remove myself.
There we go...
then you can see better. And let's now go to our HTML, adding a textarea to our form...
now I want us to...
add a checkbox...
to our form.
Okay, where do we start?
Well, as always, we need to start with a wrapper. We wrap all our widgets in a wrapper, just to make it easier...
to style.
And we've given all our form widgets, a class of form-row...
so why do anything different here?
Let's do a DIV, and we can give it a class of...
form-row.
now what I want to do, is I want to be a bit funky. (music, play that funky music) I want to be a bit daring...
I want us to use the label element, but I want to do so in a very unique way.
What do I mean?
Let me show you.
And I'm just doing this so you can see different ways to code. Here is label...
I want to give it a class of "checkbox-label"...
and its "for" value can be, I don't know, "ishappy" because we are checking whether the user is happy here. And I want to...
now insert our widget within the label itself. I know...
it sounds strange, but it's going to make it very easy for us to style.
I want now an input...
and of course, we're dealing with a checkbox input.
The name we can give is happy.
The ID has to match that "for" value...
remember, it's just good practice to always do that. So we can give it a value of "ishappy".
Now, when it's checked, it's going to be sent to the server and we need to assign a value to that...
to this checkbox.
And the value, if it's checked, is going to be "ishappy", or let's just say "happy", because we know...
when it's checked, the user is going to be happy 😊.
And of course, I just want to ask the user here, "I am generally a happy person".
If we save this...
go to our browser...
we can see there, "I'm generally a happy person". But it looks super ugly 🤢, which is why we need to now spice...
this up with a bit of love ❤️ and care.
So let's go back to our coding editor...
let's go to the styles section. As always, a new heading. We're not doing textarea anymore...
we are doing...
checkbox styling.
Let's scroll down a bit, and I'm going to keep our styling here incredibly simple. All I want to do, is I want...
to target our parent class, which has a class of...
form-row...
and then I want to target that label. And I want to give it some margin to the left.
We define a variable above, called --label-width.
I also want to give it a width of 'auto'. And if we save this, go the browser...
💖 ✔️ 🌟 I mean, come on, you've got to admit - how easy was that?
And it's looking pretty amazing. If we click on the label...
it automatically gets checked.
I don't know about you, but I love this stuff and I think it's really fun.
I hope you're learning a ton.
Don't worry if you are not fully following everything, we're going to get into a lot more detail in...
this course, but...
for now, we're just building a simple form. In the next lecture...
I think we are ready to actually build our submit button.
And then I just want to talk to you a little bit about how it's submitted to a server. Cool, I'm super excited.
See you in the next lecture.