3.3 Form Controls

Welcome back. In this lesson, I'll give you a quick tour of the four components inside Bootstrap. So you start with a simple component, form. And make sure you add roll equals form. And this is for helping with accessibility. Next every form element, along with its label, must be included in a div with a class of form group, and this will ensure proper spacing between these elements. So I'm gonna have a form group, and inside, well, simple label plus input. So the label is gonna be for form element one. Let's say this is a label. And then input type text. We're gonna give it an ID of form-elem-1 and we're gonna give it a class of form-control. Okay? Let's see it, and there it is. Now by default, every element with the class of form-control has a width of 100%. Of course, you can alter this later on. So let's copy this and paste it. Of course, change the label on the form elements. And there it is. And that's, this is the spacing I'm talking about. If I were to remove the form-group class. See. There is no bottom margin on, on these elements. So let's keep it. Now whenever you're building a form, you might need various snippets of text for help. So for example, if you have a password, you might have a text under that saying hey your password needs to be at least eight characters. So, for that, in Bootstrap, you can use a class called help block. I'm gonna use a paragraph help-block. This is an example help text. Refresh. And there it is. Now by using this class you make sure you have the different style than a normal paragraph. So if I would have a normal paragraph here, now, I wouldn't have the proper distance from the element above it. And I would have the default text color. Alright, now, this is, like, a default form. You can also have an inline form which means your elements will be sitting on the same line. And instead of labels, which show up all the time, you would have screen reader only labels. So let me show you how, you do that. [BLANK_AUDIO] I'm going to create a new form, role is going to be again four. But, this time I will add a class of form inLine. So, again I would start with a div class form group. And now we'll do a label plus an input, and actually I'm just gonna copy the label and input from the example above because they have almost the same styling. Change the id here. The only difference is on the label, I'm gonna add the class of sr-only, which means screen reader only. So this text will only be shown on screen readers. So let's duplicate this and let's add some placeholders here because, since we no longer have labels, these are needs to know what he needs to add in there. So I'm gonna say, Enter email. And then on this one, I'm gonna say Password. Now let's change this input type to password. Refresh. And there it is. And you can also add a button. I'm gonna type, let's see, of submit class is gonna be btn, and let's do btn default. Let's say sign in. And notice. Oops. BTN here. And notice, this button is on the same line. And we don't need to put the actual button in a form group. That's only for grouping different elements. You can also add checkboxes here. So, for example. To add a checkbox, you would need to create a div with a class of checkbox. And inside you would have a label and inside that label you'd have an input type checkbox. And after the input, you would say the text like Remember me. All right, so this is actually how you create check boxes in, in Bootstrap. All right now there is another type of form which is the horizontal form. But I'm not gonna go over that right here because. It would just be repeating what we're doing in the exercise part. So you'll see it in a couple of lessons ahead. But for now, I want to talk to you about the validation states. And Bootstrap includes validation styles for error, warning, and success. To use them, you need to add the following classes to the parent elements. So, I'm just going to use this first form here. So on the form group, I'm going to add the class of has-warning. For example on the second one I'm gonna add the class of has-error. And I'm just gonna duplicate this. And I'm gonna say has-success. So refresh. And notice the border of the elements, as well as the help text, have changed color. If you want to do the same for the labels you need to add the class of. So I'll do it here. Class equals control label. Right, so that will change color as well. So let's add that to the other labels. So there it is. Warning, error, and success. If you want, you can also add some optional icons using the glyph icons I showed you in the previous lesson. So you would do something like this. On the form group you need to add the class of has feedback. So I'm gonna add it to all of these. Has-warning and has-feedback. Now, after the input, you would do the span with a class of glyphicon and glyphicon-warning-sign, for example, and then, with a class of form control-feedback. Let's see. And there it is. On the other elements, you would do the same but you wouldn't need to change the class of the glyphicon. So, for example, on error. It would say glyphicon remove because that's the code name for the remove icon. And then glyph icon okay for success. And there it is. Now if you want to control the size of a particular input. You can use the LG and SM classes that are actually quite familiar by now. So for example, on this, in line form let's say I want this first input to be large. So I'm gonna say input LG. All right. So now its bigger than a traditional input. And on the second one input SM just so you can see the difference. Okay and this is a small input. If you want to affect how wide a column control is, you need to use the grid columns. So I'll just give you a quick example. Let's see form. I'm gonna do another form here real quick. And I'm gonna start with a div class row. And then a div class col-lg-2 plus a col-lg-3. And inside this one I'm gonna say an input with a class of form-control. Input type text. And I'm just gonna do a placeholder here so you can see the class. So it's col-lg-2. I'm gonna copy this. I'm gonna put it right here. Where it says col-lg-3. So, refresh, and there it is. Now you can see this dark background because. I'm still using the demo classes to show you the grid system. But without it, and let me just remove my demo area class here. Without it, this is how it looks like. And you can go even further and add as many elements as you want. So in my case, it's co-lg-7. [BLANK_AUDIO] Right, this is how a three column form would look like. So that's how you use forms, pretty straightforward, and, although you gotta learn some new class names and HTML structure these components are very easy to use. In the next lesson, I'll show you a more advanced component, the drop-down, so I'll see you there.