How to style form text boxes & check boxes in a website HTML

Hi there, fun fact; Web Design makes you better looking, totally does. It's not really working for me personally, but it's definitely working for this form; ugly form, good looking form.. So exact same form, just going to change the CSS. There's some fun targeting that we need to do, to attach ourselves to these guys and style them. We'll put some spacing between things, labels with gaps in them. We'll make our button look a little prettier. We'll update the sample text in here. All right, let's get better looking. 

We'll start with the text boxes here, the input text. So what is it called? So, my beginning of my form, so we're going to style all the things inside of this down to-- let's get it quite big, here's the form. And this is my first one, not the label. We're going to talk about the input text. And to do this, in our CSS we need to add some special syntax. So it's input, but then you've got to put it in square brackets, not curly brackets, square brackets, and you decide on what kind of type it is, and in our case it's the type of text. You can kind of see it here, basically we're just typing this at the input of these two. 

The type equals text, so just a kind of different format here in CSS. Then we add our curly braces. And that's how we style it. First of all I'm going to add some Padding around the outside, just to make the text box a bit bigger. I want it to be kind of like 12 on the top and the bottom, and I'll have 20 on, yeah, top and the bottom, left and right. Save it, let's have a little look. And there you go, there's that one. Now you're like, "Why don't we do this one as well?" This one has a slightly different name, this has input of type email. So what we might do is just copy that and put a comma in. So I'll do both of these, just going to make sure this one is email. Might as well do Text Area while we're here. 

So same thing, now it's not quite the same thing, it's structured differently. Remember, these import types, they're different from this weird thing, we did Text Area, was just kind of like it's own tag. So the same that goes over here, so we just do Text Area. Here it is there, that's what we need to do. So I want to style the Text Area. Let's have a little look, it's all looking good, got my Padding, it's going to look nicer, you can give these boxes widths. So all of these guys could have a width of, you can use percentages or pixels, let's say 40%. Here we go, they're all 40% of the available space. 

Now let's move the text that's inside of it, it's quite small, and it's the wrong kind of font. So we can do that as well, so we've targeted them. We're going to say 'Font Family', and we'll use the one we've already used. What are we using? We're using Roboto. I'm going to pre-fill it in, I'm going to steal it, yeah, Roboto, body is Roboto. Thank you, very much. Let's check it out. Now it's Roboto, just needs to be a bit bigger, so Font Size, had it there. Font Size, let's just look at 1 rem, see how it looks. Yeah, it's the same as the rest of them. 

Actually I might make this, the forms-- oh, do I make it a bit smaller? I feel like if I do-- it feels good as a Designer, having this like a little bit of, kind of hierarchy for big text, that's the most important, then this is the next thing, and then these guys kind of step down another font size, but forms we need to, notoriously problematic for people, that are visually impaired, so making it smaller, and it's quite a light gray. We're skirting some accessibility issues. 

So we've got that, that's-- one of the things that might be driving you mad is, this is on the same line as this, that's up to you. There's a couple of ways to fix it, we could-- we're using this wrapper, so I could say, actually the label could be in it's own wrapper. We'll do it together just to show you the different ways, because there's different times you need both of them. So this label can just come out of that wrapper, there he is there, and to have his own. You go up here, I'm going to wrap him in my, what should we call it? It's called input, Input Wrapper. Can't put it there, we've got to wrap with abbreviation first, then put it in. 

So now he's on his own line, that line, that's on the second one. We're starting to get messy in terms of the HTML, so that's our way. What we might do is a slightly-- I'll just show you a different way. What we could do, but it's probably not going to work, is we could attack these labels. We could say, label, I would like you, to be on it's own line. Do you remember-- this is like a pop quiz, pause it after I ask the question, and see if you can work it out. I want to be on its own line. At the moment it's in line with this guy. How would I get him to go on his own line? Give it a go. If you have no idea, remember, our display, by default it's Inline, so we could say Display Block. So all labels are Display Bock. And that's going to work, but you get down here, and you're like, "Actually, I wanted these guys next to it." 

So not quite what I wanted. So what I might do is I might say, I'll leave it there but instead of using the label, I'm going to create my own one. We're going to say, new line. New line. So I'm going to use this, and just apply it as a Class to the labels specifically. So this particular one, just before the little taggings, I'm going to say, class of new line. Let's have a little look, so this guy has got his own line. What it might say is, he's new line, where's margin at the bottom, of 20 pixels. Too much, let's say 10 pixels. Yeah, that works for me. Make sure you close it off. 

The other thing I might do is-- just looks better, I think with, more spacing between them. And I probably need some space after this P-tag, we'll look at that in a second, but let's do this one. So yeah, I get to reuse this one, and because I've kept it reasonably generic, I could use new line throughout my whole website. Doesn't have to be for this particular form. So I could say, you, I want it on email as well. So before this little label closes you're going to have a Class of newline

What next? I could center them all up. There's a few other styling I want to do. 40%, is it big enough? You can make it 100%. So where is it, VS code? We set ours to width, all these fields to have a width of, there you go, now they go across, and it's kind of 100%, plus the Padding. Remember, we've added 20 either side, or 30. So we've added that plus the 100%, so it ends up going too far. 

Another pop quiz, how do we get it-- we could start minusing it, we could minus-- I could take off, we could make it 97% and fake it. Remember, there was a property that magically did it for us. It kind of takes the overall size and minuses off margins and padding. Had a weird name, I'll introduce it again, do you remember? Pause it. Think, give it a test even. It's really hard to remember. I always forget, it is called, what is it called? Box Sizing. Border Box. Hopefully it will do the work for us, there you go. 

Sliced off the Padding, fits in nicely. I need to add a label to this one here, which I haven't done yet, it's okay. One of the things I want to do, all of this looks okay, we'll do some font stuff in a second, but the spacing between these two, I'm happy that they're on their own line. So let's get them pushed apart a little bit. So we could cheat, my instant lazy brain says cheat. And in this course we're like, shouldn't show you how to cheat, but I'll just show you the cheat because you'll come across it. Some other lazy person will do it, and you'll tut at them, you'll say, "Oh, I can't believe they did that." And you put an ampersand, and you put it in a non breaking space. Semicolon. 

That is there, because we know if we put in spaces-- I'll delete this, If I put it in a space like this it gets ignored by the code. Doesn't give your spaces returns, it's still the same, but you can-- let's undo that, undo it even. I could go - not breaking space - I can paste a few of these in, and it will push across. The only problem with that is you're doing in the HTML, and it styles it, it's kind of, it is nasty, but it works. I put it in there because, A, my brain went, let's just put it in, and then I thought I'll show it to you, because you're going to run into websites, that people have done it, lazy people like me. Kind of do it for spacing. So we should do it in code. 

So in this case we're going to create a new Class. I've a few helper classes that I use. So this one's going to be, I'm going to call this one very generic, this is going to be called Margin. What does this one want? I want margin on the, right or left? I'm not even sure. I want margin, I'm going to apply it to the label. So I want margin on the right to push over across. So it's going to be called Margin Right. I'm going to call this one A, because I'll do a few of them. This one here is going to be, you can imagine, Margin Right, of, I'm going to put in 20 pixels, just check out what this one is. So I'm going to use it, and because I don't trust my spelling, I'm typing at least, copy that, and I'm going to go over here, and apply it to this label. 

Just before it closes, I'm going to say you have a Class of this one. When you are copying and pasting be sure not to grab the full stop, because the full stop is not needed over here. If you leave it in, let's have a look. Didn't appear, it's not working. Sometimes it can appear in the HTML, anyway. So there's my little Class there, I've added it to it. If you want to target, say all Radio buttons, say you got lots of Radio buttons, and you want to, say push the spacing away from here, You've got to kind of-- remember the weird input? So remember, input, then it's square brackets, then you work out the type you're trying to target, and we're done with the Radio ones at the moment. Is it Radio, yeah, type radio, that's how you target those fellas, and then I'm going to say I want a little bit of margin to the right as well. 'Mar right'. 

You can see, you can get really lazy with the helpers. Just type in 'ma' to kind of get it close, and then I just started typing R, and then that's all I needed, got me close enough to it. Then I want just maybe 10 pixels to the right of them, just to kind of open them up a little bit, because we're just doing a really simple form. You might have a big giant form. Last thing we'll do is style this Fire Away button, our Submit button. So in here-- actually, I've accidentally renamed my, this should be mail, not mail2, I don't have a mail2. 

So Submit button, now you can start styling the input, and type 'submit' over here, that would work. We're going to, not be lazy, we're going to be resourceful. We're going to add our Class of-- what did I call my button? Oh, a little while ago now, can't remember, there you go. Now you'll notice that it's not quite exactly, like the button we had on our Home Page. It's very similar, so we've kind of got close, but there are some styles we're going to have, to turn off in particular for this button. I think it's close enough. 

So you might make another style, and start applying it, but the Submit button has this kind of weird outline, you're going to have to turn off, and the rounded corners, you're going to have to turn off. So you might create another Class, start with My Button, and then add some border, Border styles of none, rounded corners of 0. I'm just going to leave mine. I do need some space underneath it. So what I might do, the form in general, I need some stuff at the top and at the bottom. So I might just style the form, I'll say, form, please, can you have some margin, so margin, we use our, where are you, Max resolution? We'll type 'margin', and we'll use our shorthand, so top and bottom are going to be, I don't know, 40 pixels. And the left and right are going to be 0. See how that goes, little bit at the top, bit at the bottom. I'm happy enough with it? Are you happy? I'm happy. 

We got a form. We're missing a label, it's okay, we've styled it. We got a sweet drop-down menu, you can style that as well. Again, just input, actually it's different, it's called Select, not an input. So that's going to be it for forms. There are-- we kind of just scratched the surface in terms of forms, and we did a little hack for some PHP to send us an email, but there are lots more, It's a bit of a rabbit warren of forms, but yeah, a good overview, I hope. We'll leave the forms there for now, and I will see you in the next video.