Learn to Style Forms with CSS

this video I want to show you a basic example of a form and I'll show you how to style the form things like that but this video will not cover elements like form submission to like a server or database or form processing this is mainly just for the front end portion how to just create a form style ID you may be using a CMS such as WordPress that can I plugins that can create the forms on the fly for you and all you need to do is target labels and inputs and text area tags things like that and style so this is what this who this video is for so let's go ahead and start with just creating the HTML tags that we're going to need for our form so we will need a JavaScript panel and also minimize that and okay so I'm going to create a form tag closed form tag and first people I do is create a label for let's call this one first name and make sure to capitalize that cool and let's create an input with the type of text and an ID of first name so what's with the idea what's with the four attributes here so the reason for that is that this label needs to be connected to this input tag so when I click on this first name label it selects the input corresponding input so very important to do that for each element in your form so let's create another label for last name cool and let's create an input as well and put type of text ID equals last name x1 and the next thing we want to create is label for let's say email for example close this okay input type of email so that's important that you'll get a content aware keyboard for instance on your smart phone it'll have the add symbol things like that and I believe it also check to see if the person enter the email address correct so very important to change the type to email so we'll give this an ID of email as well and let's create a label for phone telephone close label give this an input type of Cal or telephone also you get a content of our keyboard so the keyboard should look differently in a smartphone excellent let's give us an idea phone okay so we should be able to click on each of these labels and get the corresponding ids select it just like that excellent and you notice that everything's on the same lines because each of these elements are in line level elements so we'll address that once you get to the CSS portion and the last item ona create as a label for it we'll just create message here instead of input this is going to be a text area ID message and we just need to close this text area this is not a self closing text and make sure to do that as well and there's our message and the last input of type submit' and this will be our value send excellent okay now we can jump into style in this form so there's many different ways to style we have this form tag which can act as our container so let's go ahead and target that form tags probably should add a class to it actually class which call it a submission form excellent oops target that let's go ahead and give this a max width and I'll just give a 500 pixels and let's go ahead and Center this as well to Rams auto there it is going to give this a border to pixels solid and it's going to pick out a color from our pallet here let's go with this orange reddish color here cool put that in place so we should get a nice border around there so this add a padding to this as while excellence of the one easiest way to do this because we want to get these labels just maybe appear above each of the tags so it's going to target that as well I'm actually going to switch this to SAS you can follow along it's not that much different from traditional CSS as well so and I'll have a link to a SAS introduction so if you're interested in that as well so inside of here I want to target each of the labels and we do some nesting give this a display of block can put everything there you go and we also want to target the input and text area and I also want to give that a display of block as well so I'll give us this nice uniform look what I want to do is each of these inputs and text areas I want to give this a width of 100% okay there you go and what I want to do is now target this last one here with the ID of all we think it's an ID give this an ID ID of send BTN I'll do a camel case for the ID there you go some button so let's go ahead and target that send button okay so these buttons we can actually give it a border of zero give it a background color let's look in here I think this purple one looks pretty good let's go with that one here perfect we can also give this a padding I'll give it a point five R M so there you go you give it a color we hit return another color of give this white excellent let's also give this a margin so it offsets it just a little bit one ramp from the top there we go and really it don't want this to be 100% per se so let's give this a width of auto so there you go instead text transform uppercase there you go and let's give this a hover effect as well okay so if somebody hovers over this the colors will change and that button so in this case let's go would seize this brighter blue here copy that so I want to change the background color to that blue color so if we look at this now we'll see a nice blue color here one thing you may notice this button doesn't have that cursor so you can actually do that as well cursor:pointer so now you get this little pointer here make sure to save this as well so form fields with styles so if you do if you follow along code then don't forget to save I know it doesn't autosave after your initial save but don't forget to save cool so let's start with the other fonts as well I'm going to target the body tag font family sans serif I really don't like serif fonts personal preference give this a padding up and down 25 left and right zero so natural spacing out made from the top we could add additional right will be zero and we can actually erase this little shorthand here perfect again maybe we can change this to text transform uppercase and font size maybe a little bit smaller there you go I'm thinking we should be just a little bit closer so there you go excellent so now we want to target these input tags as well in the textures to make that uniform as well we have a selection input text right over here we can give this a border of two pixel solid and let's look back to our color palette here let's maybe put this darker blue here copy that paste that in as well see what that looks like okay cool and let's give this a padding of 0.25 remm all right maybe a little bit more padding and that's going to be that padding inside these elements so when you type in here you can have a nice patting as well we can also change the font size maybe six 1816 pixels let's see what that looks like oh yeah that's nice and legible excellent okay and you can actually even select these both of the texture in the input tags and give it a border radius five pixels there you go and now you have a nice clean or uniform input and tags and I also maybe want to include that border radius around the actual form tag phone tag as well and that's it you can go so far as to create some transitions maybe for the color change on the button so as you can see that although this is a form with inputs and labels and things like that they're just like any other HTML tag they can be styled any way you wish just by targeting them so transition 0.3 seconds will do background color change to a background element and give it some ease so if we mouse over that you see a nice little transition that's it

Channel: Richard Barkinskiy

Views: 60,992

Rating: 4.6949153 out of 5

Keywords: HTML5, CSS3, Sass, SCSS, education, learn, tutorial, website design, website development, front-end developer, codepen.io, codepen, html, css

Id: 2ACrHs5o9LM

Length: 9min 44sec (584 seconds)

Published: Tue Feb 21 2017