Bootstrap 4 Forms & Buttons | BOOTSTRAP 4 TUTORIAL

welcome back to this series we already learned a lot about bootstrap over the last videos off the series in this video we'll have a look at bootstrap forms we'll have a look at not just how we style forms in a beautiful way like this but also how we validate them and make sure that we provide good user feedback to ensure our users can really work with our forms in the way we want them to work with them so let's dive right into that and let's start adding some forms to our bootstrap project so back in the project let's add some forbs now for that I'll go back to where we already did some work and here we have that alert and that modal button from the last video of the series now I'm going to get rid of all of that I'm even going to get rid of my grid here so of that entire death and yeah as I just said I'll also get rid of my modal so that's the code with which I want to start just in navigation and D Script imports and now let's add a form with bootstrap now how do we add forms it's actually pretty straightforward first of all we add the form element not strictly required for bootstrap but semantically it makes sense to create a HTML form I guess and in there a typical form obviously has some inputs let's say we add an input element type text and we could give that some name like maybe user name whatever you want to fetch eventually with that input and we could have another input maybe off type password and we could well fetch the user password so this would be like a typical standard form now we probably also want to have some labels to give the user an idea of what we actually want to get so we could add a label here for an element with the ID user name so let's add that ID here too and this is not required by bootstrap this just semantically makes sense whoops here and let's add another label in front of the password for an element with the ID password so let's add this ID here to this four attribute here simply ensures that screen readers can understand - which input this label relates now we should put some content between the label opening and closing tags so here we want to fetch the user name and here we want to get the password let's say if we save all of that and we go back to our page and reload it this is what we end up with not super pretty in my opinion we most of time one a stylist a bit differently and bootstrap actually makes styling this differently really simple the easiest way of giving our elements a more foreign like look or a nicer look is by adding a class to our inputs the form control class so for my username input I'll add class equal form whoops form control like this and I'll add the exact same class to the password field only to these I didn't add anything to the labels at this point of time now if we reload we already see a drastic change now our inputs look nicer they got this nice animated or yeah this nice outline here we click into him we got some padding inside of there they got rounded corners and a slight gray border and the most obvious change of course is that they now take the full width of the screen that is super important this clearly is not entirely the style we want to have here but it allows us to create a nice style in conjunction with the grid for example or with some other code that restricts the size of the surrounding container for example if we would give the surrounding form here an inline cell which of course is bad but just for demonstration purposes off let's say free or let's say 500 pixels and a margin of auto if we assign this to the form element and we reload then we have a nicely centered form like this and obviously instead of using that on inline Styles we could simply create a helper class and assign that to our surrounding form so this is a quick and easy way of getting a nice input styling and this already looks quite nice in my opinion now we can also assign our form control class to select inputs so if we add another label here where we want to find out which gender our user has and we then add a select drop down here gender ID gender let's say then we typically populate this with a couple of options so this is all just a regular HTML code there we could have mail and we also have female so let's stick to the two traditional ones here and with that we got a nice drop down if we reload this is our drop down now this clearly doesn't fit the style of the other inputs though we can as I just said also add our class here this form control class to death select element and that's important to the Select element not to the options if we added like this and we now reload now we also have that select element in that style now what about checkboxes and radio buttons well we can style these too so let's quickly go back to the HTML code and in there let's add an hour input which is of type checkbox where we also of course want to add a label which shows the text after the checkbox here and there we could maybe say except - terms and give that here an ID off except terms like this and then we could simply say accept terms and conditions with an ampersand ampersand here reload and then we got our checkbox here with the default in my case Mac style now again this might not entirely be the style you want to have and you can't add a class to ensure that its child is styled properly let's add a class to the checkbox input and here the class is 4 and - check - input if we add this class to teach checkbox input and we reload still doesn't look perfect it's it's been moved a bit to the left and it looks even worse than before we also need to add a class to the label for checkbox elements we add a class form check label to the label if we do that and we reload doesn't look that much better because we need one additional class which actually has to be added to a wrap element most of the time simply add if so let's add a div and let's give that div a class of form - check so for a checkbox and the same for radio buttons we should group the label and the checkbox or the radio button which belong together in a wrapping div which has that form check clasp and then we add the different classes for the input and for the label now with that in place if we now reload the page now this looks better now one thing that's important I'm zoomed in here so that you can see everything nice and clean if i zoom out to 100% then I actually have the default bootstrap stats that get applied assume then this is not really the case which is why there it looks like that before if I view it in the real size that your users would see it and in the end then we got this nice bootstrap style so with that we got a checkbox at it and four radio buttons it's essentially the same the same approach the same way you add styles and classes all with the form check CSS classes you at hatch this is the simple way of creating a form or styling of form in 24min puts now sometimes you need a bit more control or you wanna well control the layout a bit more and for dad you can group labels and inputs let me show you how this works you can add a div and that div can receive a class of form group now you would take your label and input that you which belong together and put them inside of such a form group if you do that and you then save that so here I only wrapped the first pair into a div if you save that and reload now you see the thing that happened basically is a little bit more margin was added at the bottom of that group to separate it a bit more from the following element which often is what you want so if I repeat this again div with a class of form group and then I take my second pair of label and input and I put it in there and I do it one last time for that if your or for that select drop-down I should say and put dad and your tube then we got a little bit of a cleaner form with more distance between the elements which often well leads to a battery user experience leads turn eyesore stall which you want so grouping elements with form group is not required but something you can do if you want to separate the different well groups of form inputs a bit more from each other so this is a nice basic way of styling forms now before we move on to validation styles so to show errors and so on or buttons let me also show you a different way of styling this right now we get everything structured beneath each other and often that is the look you want but let's say we now also add two new groups here at the top of the form maybe a group for our first name and a group for our last name so I simply changed everything to first and last name if we go back we got two new fields nothing wrong with these but maybe you want to position them next to each other and how would you do that well you can achieve this with the help of the bootstrap grid you already learn about what you can of course do you can go into your phone and now I will remove that inline style you can go into your form and in there let's add a normal row you can also add in a container but as I said in the grid video the container class is actually not required so we can just add a row here and in that row we could add a column and in that column we could add our first form group and then we add another column next to it where we add our second form group now with that if we just quickly restructure this code if we now reload we got full screen with again because I removed that inline style that restricted the width but you also see that the first two elements are now in a next to each other and we still have that nice margin to the bottom so to the other element because that still is in its form group as our elements in the row here art and with that we're now taking advantage of the grid for more advanced form layouts and that is something you absolutely have to keep in mind the grid is perfectly fine and intended to be used in conjunction with forms if you got any form which should be more than just element after element after element use the grid as you see it here create columns and position them next to each other and of course we can now again restrict it a bit so let's add another inline style to the form or attach a CSS class in general and in there or since we have a CSS file we right why don't we use that so let's maybe create a main foreign class here and let's give this a width of let's say 450 pixels and a margin of auto to Center it and let's then use this main form CSS class on our form element here so that's a custom form class now and now if we reload that page its centered again but now we got the first two elements still sitting next to each other due to our grid and of course you can use all the great features here you can use the responsive grid classes to only put elements next to each other on bigger screens and put them beneath each other on smaller screens all the fun stuff you learned in the grid video and in the official grid Docs you can use it here so using the grid in conjunction with forms definitely something you have to be aware of and as you see you can even mix it here I'm using a grid row for the first two elements and thereafter for the our elements I'm not using a grid we could do that we could use rows and columns stairs hue but we can also not do it because we don't really need a grid down there so you're really flexible when it comes to this and that is something you should keep in mind so that's the grid used in a form let's fast forward to validation now so let's assume we can submit our form and of course our form then can be valid or invalid and bootstrap offers us a couple of ways of signaling this to the user so how does it work first of all boot strip offers a couple of helper classes which we can manually add to our elements to our form elements to change the appearance off the inputs for example let me show you what I mean what we can do is we can go to an input let's say - the first name let's say we validated it on the server so the form was submitted and on the server we found out that it's invalid that the first name is invalid now what we typically do is we send back the page from the server and we add CSS classes to the inputs which were incorrect to signal well that they were incorrect and to give the user some UI help in filling the form out correctly so what we do is we go to that input which we want to mark is invalid where we have the form control class and we can add D is - in valid class to it by the way there also is a valid class in case you want to mark it as such to give a clear feedback that this input was valid and doesn't need to be changed so we added is invalid here if we now reload you see it has a red border this is added by bootstrap automatically and it has a red outline - if we click on it so this is added by bootstrap and this well makes it clearer that this is invalid well maybe we also want to add some help text and we can add a div here below the element where we say looks good now if we save this and we go back we reload we got this black text here nice and we would render this conditionally on the server to make sure it's only there when the form is actually invalid but to also give this a red text color we all set a class to that and that would be invalid - feedback if we do this and we reload now it has a slightly different style and looks nicer as some additional info added to the input by the way you can always add a little help text let's say below the last name by adding a div or a small element actually below an input with your help text like this should be your last name in case it wasn't clear by the label already and on that element you add a class which is foreign - text and if you saved ed now you've got this tiny text below the element - now unlike the error text this has to be a small element here the error text can be a div that's important you can also add text - muted to our help text here and if I now reload watch this text here closely it got grey it's a lit it's not black right now it's a little bit more grayish to kind of put it a little bit more in the background you could say so that the user can still see it but it doesn't immediately draw attention still error text or the invalid feedback is something different this should only be displayed if your input is invalid and you also get valid feedback in case you want to show something like this now here it won't show up across T and what is not valid but if we add is valid here then we actually got the green style and the green background and that all shows you something else which is important the invalid text and the same is true for the valid text only shows up if the input element prior to it has D is valid for develop text or D is invalid for the invalid feedback class so only if we have is valid here the valid feedback shows up and only if we got is invalid here the invalid feedback will show up otherwise this won't be displayed so you still should render it on the server side only when needed but bootstrap also only will display it if it's really there so that was a lot to digest but in the end you got these classes and features so you can really provide the best possible user feedback by adjusting the right classes and by taking advantage of boots trip only showing the text which makes sense for the given input so this is how you can add your own validation classes bootstrap also is capable of taking advantage of automatic validation on the front-end now what do I mean with that here we're assigning classes manually and we would do this either through JavaScript or on the server-side by ID or wire the help of a templating engine probably now you can also take advantage of JavaScript to use the validation API modern browsers offered where the validity of the form is handled in the background by the browser and bootstrap can check that validity and automatically add the right classes so to say or the right styles not even the classes the right styles based on the valid or invalid pseudo selectors which are offered by CSS now this is a feature which might not be supported in all browsers and you can read more about it in the official validation Docs but here is how it would work to take advantage of this we go to our overall forum and there we need to add the needs validation class this signals to bootstrap that this is a form which should be validated and styled appropriately automatically so to say we can still set up our invalid feedback and our valid feedback and here I will actually leave my custom lis added classes but let's go to username and there below that input let's quickly add our or a death here where I say invalid feedback please enter a valid user name and maybe you want to be more precise and that in reality but here let's go with that please enter a valid user name if I save this and reload we don't see the text below the user name because it's not treated as invalid now we could show it by adding that is invalid class you learn about if we now reload you see both the style changed and the text appeared but we want to do that with automatic validation now for that we first of all need some event that triggers the browser built-in validation and for that we need a button so let's add a button to our forum below the last if I'll add a button where I say submit and we shall set to type equals submit we'll work on the styling of the button soon for now let's make sure we have one if I click Submit it just sends the page to the server and nothing else happens and what I wanted you here is I want to validate the user input on the client as you do it with many JavaScript solutions like angular react and so on and then send the request behind the scenes if it is valid now we won't send a request here but I want to do the validation and you could take advantage of any built-in validation methods the framework of your choice offers you but you can also do it manually now for dad we need to add some JavaScript code so at the very bottom here I'll add some script code and you could outsource this into a separate file of course I'll write it in line and there I will get access to my form here by using the document query selector method and access my form element by its tag or maybe a better way is to select by the needs validation class and you could use query selector all in case you've got multiple elements with that class you need to loop through them thereafter though here we don't need to loop through them because we're only selecting one the first element that has this class and now in there we can add an event listener so add event listener for the submit event and then provide a function that should be executed when this event occurs will receive the event object that's passed in automatically by the browser and in there we can now check if our form is valid we do this by calling check validity a built-in method to offer by the browser and that is false then we know that the form is invalid and here we can then prevent a default so that no request is sent and we can stop the propagation so this would even work with approaches where you're not sending the form data with an ajax request but you want to have a normal form submission but only if it's valid so here we're stopping this normal form submission if it's invalid and we'll also set a form by a class by accessing the class list of the form and adding the voss validated class but that's an additional class you need to add so this would be added next to needs validation and this will then make sure that bootstrap assigns the right styles to the elements to the inputs inside of the form that are invalid now how is bootstrap we're not boots up the browser determining whether something is invalid or not you need to use some built-in attributes so for our user name for example which is a text input we can add the required attribute to tell the browser that this input is only valid if it's not empty because it's required and there are other browser defaults like max length and so on but here I'll just go with required now if I reload got the same look as before please note that our default or manually added classes are still doing their job but if I hit submit with the username being empty we actually get that default hint by the browser now that's not bootstrap doing its job that's the browser and I don't want that so we first of all need to disable this to make sure that our JavaScript code can kick in because this will actually prevent the submission anyways to disable the browser default here we need to go to the form element again and add the no validate attribute this will disable the browser default check so that our JavaScript code runs and we can do our manual check and then let bootstrap assign the classes to reload the page again and now if you submit you see you to us adding needs validation to the form bootstrap automatically sets some styles for the username which it identifies as invalid correctly and D valid starts to all the other inputs including the checkbox and if we inspect the invalid element or also develop ones actually if we inspect them we can see on the right that the style getting applied is using the invalid pseudo selector which is available because of the browser built-in validation we're taking advantage of so that is an alternative to manually adding or not adding D is invalid or is valid classes as I showed you as a first possible erm approach when doing this manually you don't need to add needs validation if you wanna take advantage of the browser built-in validation mechanism triggered via JavaScript here then you need to add was validated once you're done and prior to that you need to add needs validation in this case bootstrap will then take the results of the browser built-in validation and style your elements as needed so this is how you can validate bootstrap forms and as always check out the official Docs to learn more about that now let's finish this video but also styling our button styling buttons is super easy and as always link to the official Docs can be found below the video you style a button like our submit button here by adding a class and the class is the button class but then also an additional class which doesn't just define some defaults like border-radius but also a specific background color and there you got a couple of available things like primary which takes your primary theme if I save this and reload then we see the button s this look because the primary theme color is blue here secondary would be a grey and would also be available we got success danger warning info basically the classes you already know from the alert video success for example would turn this green these are the default classes we can add now sometimes you also want to have kind of an inverted button where you only have a border but a transparent background for this you can simply add an outline between the button and a success part or the info or whatever color you use so button outline success added to just puttan will lead to distil still a button which has this nice hover effect but which by default only has a green text and border and of course that's available for danger and so on to last but not least it can be interesting to also disable a button for this all switched us back to just priming primary button now if we add two disabled attribute to the button which of course could also add programmatically through JavaScript then you would also get a nice disabled style by default which clearly indicates that this button can't be clicked and only if disabled is removed it'll look like a clickable button again so this is the last thing you should know this is another way of styling the buttons or taking advantage of in directly applied styling and with that you got all the knowledge you need to build beautiful and flexible forms with the help of bootstrap you know how to add form elements and stall them correctly how to structure them with form groups how to structure them even more and create more advanced layouts with the form or the normal grid inside the forum how to validate forms either manually or automatically and how to style buttons I hope you liked the video and I'll see you again in the next videos bye

Channel: Academind

Views: 118,412

Rating: 4.955318 out of 5

Keywords: bootstrap4, bootstrap 4, bootstrap, getbootstrap, tutorial, video, course, forms, buttons, btn, form, input, bootstrap tutorial, bootstrap course

Id: K-ccGZYRWzs

Length: 29min 21sec (1761 seconds)

Published: Mon Mar 12 2018