Styling HTML Forms With CSS - Web Design/UX Tutorial

hey guys he dying in this video I'm going to be showing you how to create this custom form right here from scratch using plain HTML CSS and just a tiny bit of JavaScript for the error messages such as this one right here so essentially this is going to be a responsive and also a mobile-friendly custom form and it's going to support five different types of input fields we can see here I've got a plain text field we've got a numeric field something like this and we have a date or date/time field which is going to use the browser's built-in date picker because I prefer simplicity and not every single day picker needs to be custom we've also got here a text area for some multi-line text and finally we've got a drop down menu I'm also going to be showing you how to create this style of button for these submits or the sign up or whatever your form is being used for obviously I'm using sign up as an example but this form can be used for any purpose and not just signups so I'm going to be showing you now a house responsive so if I was to resize this window we can see it is going to shrink down according to the window size and the same goes for the mobile device if I go into mobile view we can see once again it is going to shrink down to support the mobile device okay so and one last thing if you don't like any part of this form you can easily customize it and change it to your liking because the source code for this is going to be really straightforward and easy to understand so let's go inside this tab right here we're going to start from scratch from an empty HTML file and create that form design so let's go inside the text editor right here we can see my directory structure is really straightforward I've got one index.html file inside here it is a basic HTML skeleton with the head and the body so first we can make a new directory to hold all of the form design files so we can make this directory and call it something like for example inside here we can make a new file and call this one form dot CSS which is of course going to hold all of the CSS styling for the custom form we can make another file and call this one format job is to hold the tiny bit of JavaScript to get the error messages working when needed so now we have these two files we can then of course include them inside the HTML so I want to go inside the head here and firstly link the CSS stylesheet so of course form slash form CSS and do the same thing down here for the JavaScript so of course script source and then that's going to go to form slash form jeaious so now we've included both the jeaious and also the CSS file for the custom form design so I'm going to be showing you how to do this essentially component by component so we're going to be building the HTML for a particular section and then we're going to be styling it as we go so firstly here let's go inside the body actually I might just go inside the head here and just add a bit of padding around the borders of the web page just for stylistic purposes so I'm gonna say style and say body and add some padding just so the actual form design were working on doesn't touch right against the edges of the web browser so that's going to make it a bit clearer for us to see what we're actually doing so now let's begin on the actual custom form itself so firstly here we can make a new form HTML element we're going to set the action to be the exact same page as we are currently on so dot 4/4 that one right there and for the method I'm gonna make this a post request but of course you can make these methods whatever you like it is not relevant for this tutorial but what is relevant though is adding a class of form so I'm gonna say class and make this form this is basically going to allow us to only style the forms that have the class of form because honestly you don't want every single form on your webpage to have the same styling or be affected by these styles but only the ones that you specify so a class of form there is definitely important so we can actually style this form so now we can now we can just create two more elements here we're going to specify the format title and also the form description so now I'm gonna make a new div here and call this form underscore underscore title so as usual on my channel I'm using the block elements modifier CSS naming convention but you can of course name these classes whatever you whatever you like so for the form title we can say the title is going to be sign up just like that okay and for the paragraph description we can make a new P tag with a class of form underscore underscore desk for form description inside here we can say something like I might just put some dummy text right there for the form description okay so now I'm gonna save this and refresh refresh the browser and we see we get something like this so now we can apply some CSS styles to of course the form title and also the form description so let's go back inside here and go inside the CSS file and we can begin on the actual form itself so firstly we gonna start on the form element itself so we can target the class of form and give it a font family of sans-serif just for now later on I'm gonna be showing you how to import a custom font but for now we can make its and serve we can also set the font size to be 16px and that's going to be our base font size for the entire form across the board okay so now we can go down here and we can target every single element that is within the form so we can say form and then an asterisk to achieve that police we're going to say box siding and make the box sizing equal to border box this is going to help us create consistent CSS styles without the hassle of worrying about padding and borders and things like that we can also set a line height to be 1.5 personally I believe that line height is pretty crucial in terms of readability and making things look a bit nicer so definitely a live height of 1.5 for every single element inside the form we can now come down and actually style the form of title so I can say form underscore underscore title for the title we're going to say font size and make this 2:00 a.m. so 2:00 a.m. just means 2 times the current font size and the current font size is of course 16px because form title is a child or form so here we're going to have 16 times 2 so 32 pixels for the font size the reason for the e/m relative units is because if I was to change this font size then also the form title is going to change so definitely have a relative unit for your form title also we're gonna set a font weight to be 600 now in terms of the sans-serif font it may or may not most likely not support a font weight of 600 but the custom font will be including later is going to support this 600 font weight so this is more for later on but I'm gonna put it here just for now okay we can then we can leave out the CSS for the form description because things like the line height and also the font size and font family here already cover the essential styles for the form description so I'm gonna save this and then refresh the browser here and we get this result so looking not too bad we can see that of course this is bolded and also we can see that the that the line height is having a positive a positive effects on the readability of that paragraph okay so now now we can move on to each one of these form items themselves so essentially the way it's gonna work is each one of these fields has three main components okay it has got the actual label it has got the input field and it's also got the error message down here so three main components for each one of these form items now case with that being said let's go back inside the index.html and right at the HTML for one form item so down here just below the description we can make a new div with that class of form underscore underscore item okay inside here we can specify our three main components so firstly we can make a new label with a class of form underscore underscore label okay now for the four attribute we can make this something like a given name now this value here given name needs to match the ID of the input field in order for the label to work correctly so firstly let's go inside here and say giving it names as the label title so for the input field I'm going to firstly be showing you the input type of text so we can say input right here with a class of form underscore underscore input we can see also the type of text has been automatically inserted by visual studio code so we have here class form input we can then say name and make the name given name actually it needs to be yeah that's fine so our given name as the name actually now let's go ahead and make this given names to make it plural okay so that's more accurate to the label so name given names for both this and also this one right here and also the body of given names just like that so once is it so once again the label for attribute needs to match the ID of the input field so that when you click on the label this thing will get focused okay and finally here for the input type text we can add a placeholder you can say placeholder equal to enter your given name now during my research of HTML forms I find that the label gives you a brief description of what the actual form is supposed to contain but the placeholder gives you a more gives you a more detailed description of what the user actually needs to do maybe things like maximum characters or our range of characters things like that but for this one we can just say enter your given names cool so now we can do some work on the actual error message so these are going to work in the form of span tags so we can make a new span right here with a class of form underscore underscore error inside here we can say something like a sample error message just for now of course you're going to be changing this to suit your own needs I'm now going to save this and refresh the browser and we can see right here we get this so now we're going to be using a flexbox to make each one of these sweet components on its own row so back inside the CSS we can begin work on the form item class so we can say right here class or full underscore underscore artist I remember this right here is going to be one main container containing the three different types of elements the label the input and also the error message so firstly we can say here display and make this flex and then we can say flex direction and make this column the reason for the Flex box here is because we want to try and avoid the use of break tags so essentially doing our BR just like these to create the three different rows you know might be okay for you you know in your scenario but personally I prefer to you know keep that sort of thing in CSS so definitely going to be using a flexbox to achieve the same thing without the need for this break tag at the end of each element okay so get rid of that and go back inside the CSS and we can also add a form underscore underscore item and then say every single descendant or direct child of the form item so just like that we can say align itself and make this flex start and I'll show you right now what this property is doing so I'm gonna save this here and then refresh the browser we can see that the Flex box has given us our three row layouts okay and if I was to inspect the label for we can see that the width of the label is ninety six point nine three pixels so the width right here is matching the width of the content inside the label that is due to the Alliant self property if I was to remove this property right here okay so down here we can see firstly obviously that the input form has gone all the way to the maximum width but also the label is full width as well as the error message so this Alliance self is going to fix that problem and make them all the width of their content okay so now we can go back and style the form label so back inside here let's target the class of form underscore underscore label for this one we can say once again the font weight and make this 600 of course you can use bold instead if you wish for some padding we're going to say cutting and make this 10px top and bottom and zero for the left and right save this refresh and we get this right here not too bad so far so now for one of the main chunks of this video and that is going to be the form inputs themselves so for these ones and it's going to be quite a few CSS styles and most of most if not all of these properties are going to be used across all the different types of input elements okay so let's go back inside here and target the form underscore underscore key important class for this we're gonna say firstly - WebKit appearance and make this none this right here is going to remove the default CSS styling that gets applied on iOS or Safari web browsers so essentially having this property is going to make your design consistent across all of the web browsers so very important this one right here also a width of 100% and a max width of 425 pixels so essentially these two properties right here means that the input element is going to always try be 100% with a maximum of 425 so basically for 25 pixels in width or less and these two properties also make the form inputs responsive okay so now we can go down here and we can say fix for Safari slash iOS date field so I found out that when I was doing this design and testing it that the actual input type of date fields don't don't have the same height as the other fields on Safari and iOS if you don't choose a value so this right here is a hack or a just little fix for that for that problem so it's going to be min - pipe we can make this calc 0.9 p.m. plus 0.8 cm x 2 plus 0.6 now obviously you may want to grab an iPad or an iOS device and test this yourself and creates a different solution but for me this right here has fixed that problem essentially it's just adding a minimum height for this field so that on page load the date fields don't actually have a small height okay and I've got these numbers right here 0.9 and 0.8 from the padding I'm gonna add right now so we can say padding 0.8 and font size 0.9 okay so here we'll obviously I'm going to be using the font size right here the calculations so I'm setting the minimum height based on the current font size plus the top and bottom padding so x - top and bottom and then plus 0.6 am this just finished it off and it looks quite nice and it's working properly so definitely yeah not the prettiest thing but it definitely fixes things when using date fields on iOS the devices okay cool so now we can set a font family and once again we're gonna make this San serif but we're gonna be changing this later on to the custom font we can then say outline I make the outline of nun this will remove the default blue border that is around input fields on typically mobile devices we can say a border and make this 1px solid and then just stay like three so triple D's down here okay and also a border radius make these 4px looks quite nice like that and we can also say background here and make the backgrounds a really really really light gray so f9f nine and if not okay we can also set a transition and we can make this background at 0.25 seconds border color at 0.25 seconds and also color at 0.25 seconds or essentially this transition property is going to enable a nice smooth transition or animation when these CSS properties change so background border color and also the color and this one here is going to be useful for displaying error messages to create a nice smooth animation for the colors I'm gonna save this here and refresh and we can see we get this right here so not looking too bad even with the defaults and set of font so now we can move on to the focus and also the placeholder for the input fields so back inside here let's say form input and we can target the focus pseudo class or essentially when the user is actually typing inside being put field won't look a bit different so we can say background and make this just a white so different from the very light gray by default so save this and refresh and we can see if I was to focus this field so click on it it changes to a nice white background with that nice smooth transition which we said earlier we can now change the styling on the placeholder text right here so back in the CSS the week we can just say four months once for input and then : : placeholder this will target the placeholder pseudo-element so we can just say right here color and make it a just a just a light gray well though a bit darker and then the actual default background color right here so save this and refresh and now we can see the placeholder text color is slightly lighter and this will create consistency across all of the web browsers so now we can move on to the actual error message and also the error message styling for the input fields themselves so basically this right here and also this right here so firstly for the error messages or error styling on the input fields themselves it's going to be done with a separate CSS class to essentially tag that input field as being in error State okay so back inside the HTML let's add a separate class to this input field we're gonna say form input - - error so now of course the JavaScript code when the response comes back from the server for whatever the form input was submitted for of course that right there that JavaScript or the page submit is going to set these classes okay so when this has a state of error let's go back in the CSS and target that class we're going to say form input - - error for this we can set a text color to be a darkish red I'm gonna say hash d5 and then 0 0 0 0 that's it so D and then 50,000 okay we can set a background have a light red so hash 5 5 5 8 f8 and a border color as the same as the text color so once again hash D 5,000 okay so copy this and paste it right there I'm going to save this and refresh and we can see right here we have of course the error style for the forum input okay and also we need to actually start the placeholder so we can just say for this we can say form input error once again coal and coal on place hold on we can make this just there slightly lighter red than the background color and this would be hash FF b FB f save this refresh now we can see the placeholder text is now a lot red okay so now we can move on to the actual error message itself this one right here so for this let's go back in here and we can say form underscore underscore error we can set a padding top to be 10 pixels add some space between the error message and after the input field we can set the color to be the same color so D 50000 and as these two right here okay a font size of 0.9 am so slightly smaller font size than the actual base font size of 16 px and also a visibility of hidden and by default okay we're going to comment this out just for now so we can see our progress I'm going to save this here and refresh and we get this right here so now we only want this error message to appear visible when this field has an error so for that we're going to be using CSS to achieve that so essentially we want to only display this field when this one is an isn't it is in a state of error okay so back inside the inside the CSS we can go down here and we can say form input - - error okay so targeting first the actual input field itself with that state of error okay we can say plus then form underscore underscore error so this right here is the CSS adjacent sibling Combinator and it's basically saying I want to target the next sibling with this class from this one right here inside here we say visibility and make this visible so I'm gonna explain this further so back inside the index.html we can see here we have of course the input right here with a class of form input error and also of course the form error span tag down here so these two elements have the same parent which means they are siblings okay so this span tag right with this class is the next sibling after this input with a class of form input error so with that being said back inside here we're targeting the next sibling with this class from this one but here and making it visible only when this one actually exists okay so let's set this to visibility hidden by default and see if this one actually applies save this and refresh and now we can see it remains on okay if I was to remove this form input error class from the text input itself okay press Enter we can see both of them go away so it definitely makes it easier for you to add and display those error messages inside the JavaScript okay so now we are essentially all done with the base styling for the input fields so now essentially the rest of these fields are going to inherit the same styling from the one we just did so with that being said let's go back inside the index.html and include the new input type of number so back inside here let's just duplicate these these five lines so make a new form item for the input type of number so for this we can set the four attribute to be something like num uses okay and this is going to apply trusty for the name and also the ID right there okay we can then say for the label we can say number of users alrighty we can set the input type to be number so input type number just like that I might also just remove this form input error class from both of these fields so just backspace with that right there okay so input type number with a Class A forum input the same one used previously for the input type of text as I said all of these inputs are going to use this same class to apply Universal styling and also our code reuse we can also just set a minimum and maximum for the input type number so we can say min and make this one for example and I'll set max and make this five for example add for the place holder we can just say something like you know how many uses and then max five so once again adding more detail compared to the label inside the placeholder text and for the error message we can keep this as is a sample error message I'm going to save this here and refresh and we can see it's working perfectly fine just like that we can see that the maximum value is working perfectly fine I can't go higher than five of course this one here is just client-side validation don't rely on this for actual validation on the server side you may have also noticed that inside the demonstration this food right here is a tiny bit smaller so to achieve that we're going to be using a modifier CSS class so back inside here let's add a new class to this form input we're going to say form underscore underscore input - - small okay so now with this class it's a CSS sorry it's a it's a block element modifier modifier class and inside the CSS we can just copy this and add some styling to that class so that form input small we can say max width and change this to be 250px down from the for 25 px set by this one right here save this and refresh and now we get a smaller width for the numeric field obviously this is completely optional I just think that obviously a number is going to be smaller than a actual text field so maybe you can actually just make that a bit smaller okay so now let's add some HTML for the input type of date so back inside here we can just copy this once again and we can change these values so default and the name and the ID we can make this expiry date for example the label can be once again expiration date okay we're going to make this an input type of date we're gonna keep this form input small for the date field and we are we are going to just remove the min and the max attributes because I don't need those for the date field for the place holder once again just a bit more detail we're gonna say enter and expiration dates save this and then refresh and we get this result right here now if you do have an iPad or an iOS device lying around open up Safari and go inside here and just remove this line of code and see what the date field looks like in my experience the date field just like this with no value is going to be a much smaller height compared to these ones right here and of course as I said earlier this CSS property is supposed to fix that problem okay so now let's move on to adding the text area to the HTML so for this week and once again just copy this line and we can just remove this input field because of course a text area is a text area and not an input field okay for the label we can say message and inside here we can just say message the same thing okay we can then put a text area Rowdy remove these coals and rose and simply name an ID to these same as before attributes of course message but there's a message message and then message let's give a class up once again form input okay and a placeholder so placeholder enter a detailed message about why you wish to sign up and also once again as usual adding a bit more detail so max 500 characters along with this we can also set a max length on this text area you can say max length and make this 512 course suit the placeholder text I'm gonna save this and refresh and we can see it's looking not bad so far however we do need to apply to specific styles just for the text area and that's going to be for the resize so we want to actually disable this resize ability and also a maximum height of course you can you can of course keep this resized ability if you wish to okay so back inside the CSS let's go and target the text area with a class of form input so we can say right here text area dot form underscore underscore input swap course targeting every single text area with this particular class and also just a heads up this is actually I believe it is going against the rules of the block element modifier naming convention so obviously try not to do this but I think in this case right here it is perfectly fine so we're gonna say resize and make this none and set the minimum height to be 200 pixels right there I'm gonna save this now and refresh and now we can see that the resize ability has been removed and also the heart is locked to 200 pixels okay so that is all for the actual input fields themselves we can now move on to the sauna or the actual form submit button and also the tiny bit of JavaScript for the error messages so inside here let's just go in the HTML and add the HTML for the submit button so we can see right here and you did with that cast of form item so reusing the same class as we did previously and inside here we can make a new button with a class of form underscore underscore BTN or form button a type of submits will ensure this right here is going to actually submit the HTML form we can then say sign up or continue as the button message for saving this and refreshing gives us this right here so now let's add some really basic CSS to customize and make it look something like this okay so inside the CSS let's target the form button class we're gonna say firstly a font family of sans-serif once again we're going to be changing this later on to a custom font we can say front once and like this bold you know what let's make it 600 to match the previous styles our font size of 1.1 am so a slightly larger font slice and the rest of the form I've had enough 10px top and bottom and 16px for the left and right a margin of 10px top and bottom and 0 left and right just to add some space between of course the button and also the error message from above a color for a text color of our white okay white against a green background so I'm gonna say background here and make this hash one for the six and then a for a okay a border of 2px solid and I believe there's a darker green so 0f a nine for two so slightly darker than this one right here and finally a border radius of 5px to finish off the borders and colors for this and button we can then say cursor and make it a pointer and also an outline none this is also gonna of course remove the default blue outline on many mobile devices now saving this and refreshing gives us this right here ok so finally we can add the active pseudo class styling when you actually press on this button to change the background color to a slightly darker green we can do this by saying form button the form underscore underscore button and then active we can make this a background and make this zero fa9 four and then two so the same color as the border color for the button saving this and refreshing and then zooming in on the actual button we can see it turns to a slightly darker green when you press on the button okay cool awesome now we can add the custom font so for this we're going to be using as usual google fonts so head to fonts google.com okay inside here you can go ahead and you can pick your phone so keep in mind that in my example I'm using the 600 font weight quite frequently so I'm going to be choosing a font with support for this 600 font weight and also a sans serif font so back inside here you want to go to categories and make this sans serif or of course sans serif fonts and font properties here we can see number of styles to try and get that 600 you want to make sure something like I think 8 plus should in most cases cover these 600 font weights okay maybe something like tend to be extra safe to be honest so 10 plus 4 that 605 weight if you don't care about 600 and you just want null and bold that of course make this something like 8 should be okay but anyway I'm going to choose here the fonts of source sans Pro and just press + right here once I've chosen it then go inside here and then press customize we can see here we can choose the different styles that this font has as I said I'm using 400 so normal and also 600 I'm gonna say regular for hydrant regular 400 italic and then semi bold 600 and then semi bold 600 italic okay so now I'm gonna load these four different fonts inside the web page so back inside the embed I can just say import right here and copy and paste this CSS import line copy this go back inside the CSS okay and I can see right here just paste that up the top and now for all of my sans-serif occurrences so copy this and go inside find and replace I'm gonna replace sans-serif with source sans Pro and then comma sans serif so now I'm gonna be using of course these fonts across the board for my custom form okay and also to get this syntax or this name back inside google fonts it tells you what the actual CSS should be just down here okay cool so now we've loaded the fonts of course choose your own font to your own liking so now refresh this and it works perfectly we get a nice font for the custom form so finally here we're gonna be adding the JavaScript to handle the error messages so let's go back inside here and go inside the format jeaious file so for this one the main focus of this video is going to be how to of course create the custom form inside an HTML CSS so I'm not going to be showing you how to actually perform validation and you know actually display those error messages but I'm going to be showing you how to hide the error message once you have actually started clicking and typing inside the input field so basically let's go back inside the example we can see here with this message if I was to actually change this field here we can see it goes away and that of course gives the user a chance to change their actual values so I'm going to show how to do this in this video but I won't be showing you how to actually include and display those error messages with JavaScript of course it's going to be implementation specific and independent so you know your code is going to look different to mine when it comes to displaying those error messages but if you guys doing a C video on that please let me know so anyway let's go back inside the JavaScript and gonna say this we're gonna say document but add event listener we're gonna say Dom content loaded so once all of the HTML has loaded on the actual web page itself we're gonna run this function right here we're gonna say once again it documents the query selector or we're gonna select all of the class of form underscore underscore input and we're gonna say for each one of those inputs okay we're going to grab the input inside the function so this right here representing a single input with this class okay and we are going to say input the add event listener when the actual input field gets different input so input right there okay we're gonna run this function and we're gonna say essentially this dot class name is equal to this class name dot replace we're gonna say form under underscore input - - Kara and then a space and then a question mark so this right here is of course a regular expression essentially we're going to be replacing the class of form input error with nothing we're going to be removing the form input error class when the input field gets input and of course here this refers to the input in fact I can make this set to input for a bit more clarity okay so essentially removing this class when the import gets input I okay and they can say right here , and then put an empty string so replacing that with nothing okay and this right here this question mark is basically saying that this space is optional so let's go back inside here if I was to have the form input error like this so form other squads for input - that's all right like this we can see we've got a space here okay between this class and this class so essentially this question mark is gonna say this space is optional this is opposed to having the form input error on the end something like this with no space between the actual class name and also the end of the string okay so now I might just save this and then refresh and you can see we have no changes okay but now if I was to if I was to add the input type of error to this particular field so form input - - error then go inside here and make some input something like this we can see it now goes away so that is all for this video on creating a custom form using plain HTML CSS and JavaScript I'm going to be leaving the source code for this in the description so definitely check that out if you wish - thanks for watching guys and I'll see you later

Channel: dcode

Views: 19,824

Rating: 4.9308357 out of 5

Keywords: code, coding, programming, tutorial, introduction, beginner, walkthrough, guide, software, development, simple, easy, english, with, example, examples, developer, lecture, recording, how, to, web, website, html, html5, css, css3, form, forms, input, type, text, number, date, datepicker, textarea, validation, error, handling, header, heading, label, style, styling, stylesheet, theme, bootstrap, beautiful, nice, font, layout, ideas, design, ux, user, experience, ui, application, app, color, colors, theming, cascading, sheets, submit, button, sign, up

Id: GcPi65geFlo

Length: 43min 33sec (2613 seconds)

Published: Mon Sep 30 2019