Check out a free preview of the full HTML Forms course
The "Checkbox" Lesson is part of the full, HTML Forms course featured in this preview video. Here's what you'd learn in this lesson:
Jen codes a checkbox field into the form.
Transcript from the "Checkbox" Lesson
[00:00:00]
>> Jen Kramer: We have one last type of field to add here to our form all the way down on the bottom. [COUGH]
Add me to your email list, everybody's favorite. So we're gonna go ahead and add something here. Anybody have any suggestion? How are email, when it says add me to your email list, how is that usually handled on a form?
[00:00:20]
Yeah
>> Speaker 2: A checkbox.
>> Jen Kramer: Usually it's a checkbox right? So we can make a checkbox for this. So input type=checkbox
>> Jen Kramer: And we'll go ahead and give it a value of subscribe, and a name of subscribe, and an ID of subscribe. Add me to your email list.
>> Jen Kramer: Anybody want that check by default?
[00:01:11]
Don't you love it when you're filling out a form and you miss the little check box to uncheck it so that you're automatically subscribed? We totally wanna do that, right? We want everyone to subscribe by default, they have to uncheck it, okay? What might I add here to my input type to make the people subscribe by default?
[00:01:32]
>> Speaker 2: Checks.
>> Jen Kramer: How about checked? Exactly the same as the radio button. The checked property will make it checked by default. Silly, unsuspecting people, they're going to have to uncheck it.
>> Jen Kramer: Okay, now, in terms of the text that goes with this particular checkbox, usually the checkbox comes first right and the text comes after which is what we have here.
[00:01:59]
So this paragraph where it says add me to your email list, we don't need that, that can go away. But what do we need when we have an input like this and the text right next to it? What do we still need to have? A label tag around the whole thing.
[00:02:13]
Label and slash label.
>> Jen Kramer: [COUGH] And if you go ahead and save that, refresh your web page.
>> Jen Kramer: There it is, add me to your email list. I have to uncheck it,
>> Jen Kramer: In order to not be subscribed. Yes.
>> Speaker 2: Why is there an ID in that last input when there's not a for in the label?
[00:02:52]
>> Jen Kramer: Probably because I just added it. You should just take it out. You can take it out, you don't actually have to have that. You have to have the ID if you're going to have to put it in the label. When the label tag goes around the whole unit like this, you don't have to have that for thing going on.
[00:03:10]
But up in these where we have, sorry, up in these where we have the actual label separated from the actual widget, you need that connection of ID and for but down here where we've got our thing together as a unit, you can just use the plain old label tag.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops