Adding placeholder text and labels to website form text fields in HTML

All right, we'll start with placeholder, and we'll do labels in a sec, because placeholder is super easy. So if I want this field here to have placeholder text, just write, 'placeholder=', and you put in your quotation marks, and then just put in whatever you want. 

Now this can be anything in here. Hit 'Save', and because we are opening and closing files, just make sure you close and then reopen your testing page. Make sure you're not working on the live one, because that's not going to adjust, or change, unless you right-click it in your Explorer, and send it online. I'm just going to close it down to make it clear, so I don't get confused. You can see there, placeholder text. When you click on it, it goes over the top, but yeah, just fills in there. So you can do it on any of these, so placeholder, I'll put in, maybe, [email protected] 'Save', and you can see there; cool, eh! 

Now a label is different, it is text that goes above it. So what we'll do is-- let's do it for the name here, so let's remove placeholder, you can have both, let's have both. Putting some spaces between it, just to make it clear, for me, mainly. 

So the label can go anywhere on the page. It can be just in front of it, sometimes just after it's more appropriate, and all it is, is label, and 'for', this is where, because these are totally separate things, the fact they were over top of each other, because we could just write a P-tag and say, actually this is a P-tag of your name. That would work, there he is there, and he kind of describes that thing, but we want this label because this has labeled this other thing. 

So, label for, and make sure you use the ID. So the label for name, because it's associated with this now, linked, and this is where you put the text for it, so this is first name. We're going to do styling a little bit later on, but you say, first name is for this. Why is this different? It's because, mainly for screen readers and accessibility. Because I can click on the first name now, and it actually, can you see, it highlighted the first name box. So it's actually connected to it, so I could have it anywhere I like. 

So I'm going to cut it and put it after my Submit button. So it's still there, but watch, when I click it, it lights up. You can never have it back here but I just wanted to show you the connection. As long as the ID matches for, then that is associated with it. We want some good practice for forms, because those can be, probably one of the hardest things for somebody that is visually impaired, that's using a screen reader, needs help with. 

Again we could do one for this, you, there, but this one just needs to make sure that-- two things, the ‘for’ is going to the ID of email, and this one's going to be email. So that's placeholders and labels. Before we go, they're all on one line, I've been ignoring. So at the moment, by default these form inputs are a type of display. What kind of display are they? They're not Block because they're all on the same line. They're Inline elements. So we want to change that.
 
Basically what we're going to do, instead of saying label, label an input or all kind of separate things, what we're going to do is create a wrapper Div tag. Div tags by default are block level. So what we're going to do is, what should we do? I'm going to wrap it around both of these, and use 'Command-Shift-P', or 'Ctrl-Shift-P'. I'll use the Wrap, and I'm going to wrap it around, I'm going to create a new Class called Input Wrapper, and because it's a Block level and it's inside of it, watch, save it. It ends up on its own line, so we don't have to do anything, and I'm going to do this because I want to style it Inline. I plan to style this later on to style the things inside of it. I could say, make all the text inside of here smaller or bigger. 

So I'm just going to reuse that a few times. So these two guys are going to go together in their own little-- 'Command-Shift-P', 'Ctrl-Shift-P', wrap. We're going to call this one, what was it called? Man, taking way too long, I'm going to copy and paste it. Same with the Submit button. Actually, because he's at the end here he doesn't need to be in his own Div, because this Div here pushes him away. All right, it's going to make it a little nicer. Actually, let's separate them out because, just because. They're too close together. We're going to do styling properly a little bit later on, but just for the moment, just for my sanity, as a Designer, I'm going to open in my CCS, not Reset, I'm going to look for styles.css. 

Move it over here, and I'm going to style, the input, wrapper, and I'm going to say, let's just have some margin. We'll do margin at the top, Margin Top. I start doing this, I get real lazy, you can see, I just put in 'ma top', and it got it. Don't know how, it's magic. I'll put in maybe 20 pixels, just. I want 'ma bottom' even, as well, not 'ma top'. Margin bottom; syntax is wrong, I guess it's right, it's all right, no, it's got a squiggly line, There you go. But, umm, so bad. All right, here we go. 

So I've got some margins underneath them, just to make it a little easier for the rest of the next videos, where we look at some of the other input ones. So we've got Text ones done, all the Submit buttons done. Let's look at the other common ones, but we'll do it in another video, I'll see you there in a sec.