How to add check mark tick box to a HTML form

Okay, it's time to make a Tick box, Check Mark box, Check box, whatever you want to call it. It's this thing, and the spoiler is, it's input Check box, but there are a few extra things to do for this one, like a value, and I'll show you how to that now in this video. 

We're going to put it underneath this here, which is our Text Area box, we're going to put in our Check box. Now we're wrapping everything up in this one, just so that they break on to their own line. If you're like jumping back into this video in the future, not doing the whole course, this wrapper doesn't really do anything except break up in its own line. 

What you're really looking for is an input called Check box, there he is there. We'll give it a name, so this one's going to be, "Would you like to sign up for my email subscription?" Just the name and ID, like all the rest we've done. Often it's really just the same. One that this needs, that's not pre-filled in there, is the value, because we're going to say-- at the moment this name is the question, right? Because you need to know whether it's being checked or not, and that's the value. 

So the value in this case is going to be, "Yes, sign me up." "Sign me up." So, when I get my email from my PHP, it's going to say, there's a name called 'email sign up', and it's going to have this value, "Yes, sign me up." Cool, let's check it. Let's have a little look, there's my little Check mark. There it goes. 

So a Check mark is one of those things that really needs a label. Some of these other ones, we're going to put in place holders, to help explain it. So we don't need a label, potentially, this one does. Now the label can go before or after. It's a bit strange having the label before it, in this case. So my label, and the big thing with a label, remember, the 'for' and the ID need to match. In my case, the name and ID are the same, sorry, I copied the wrong one, but as long as these two match up they will correspond. The label for this one is "Sign up for email newsletter." Let's have a little look. Now remember, this label doesn't have to be at the beginning. It can be just afterwards, as long as-- cut, afterwards. So as long as this 'for', this is the same as the ID for the actual thing. Tickety tick. 

Last thing you can do is you can pre-tick it. So yes, you're already signed up to my email newsletter. So it is in VS code, where is it? Yes, sign me up, input type, check box. Not the label, separate that out, make it look nice. So after this end, just write 'checked'. By default, it will be checked. Save it, let's have a little look, I'm going to refresh the page. Look at that, it's already checked. I turned it off, there you go. 

All right, that is it for Check marks. There's some design stuff I want to do, like lining things up, and font sizes, but don't worry, we'll do that in a future video coming up really soon. At the moment, on to Radio Buttons. See you in the next video.