From the course: Bootstrap 3 Essential Training

Creating a basic form - Bootstrap Tutorial

From the course: Bootstrap 3 Essential Training

Start my 1-month free trial

Creating a basic form

“

- Bootstrap has some fantastic built-in styles for forms. There's a lot of options so it deserves its own chapter. Let's go ahead and get started by using the styles available to a basic form. So you can see here that I've created a form with the traditional input elements. I don't have radio buttons but they're putting much like checkboxes and we'll get into detail on those later. Now before we get started with forms, make sure that you add label to input fields. So for example, right here I have a label for this email field and they are generally matched so when I say label for="inputEmail", that is matched via this ID right here to this input field. And that does a couple of things. Number one, whenever you click on one of these labels, it's going to activate the input field. That's really important for mobile devices because it makes it easier when you're filling out a mobile form to be able to tap on the label and have it activate the element. The other reason you want to do that is for screen readers for the disabled. If you don't add labels to your input fields, a lot of these screen readers are going to have trouble reading your forms. Now there's a special class called the sr-only class that you can use to hide the labels if you don't want to use them but want screen readers to be able to see them. So if I say something like class here, sr-only, then this name will disappear from here, but it will show up on screen readers which is a really nice feature and just something good to do. Now the first step to making your forms look great is to add a form control class to your input fields. And what that will do is make their widths 100% of the container so if we say input class="form-control" here, you can see that the name input field gets a little bit of padding around the element. It also gets a nice color when I highlight it and a good deal of spacing that looks great plus that 100% width so just adding that is going to make those fields look a lot better. Let's go ahead and copy that and paste it here on my email. That's making the Email section look really good. I can also add it to the select field if I want that to be 100% width so that looks really nice now. And I can also put that on my text area, so let's go ahead and add that right here. Save that and now my text area is going to be 100% of the width of the container which is really nice and you can see that it adjusts really nice to the responsive grid. Now if you want to add a little bit of spacing between the groups, you can wrap them with a form group class for a little bit better spacing. So you can see that Name and Email are really close to each other. If we wanted to create a little bit of separation, what we would do is just add a div and call it form-group. Let's go ahead and put these in here, space them out a little better. So now you can see that we get a little bit of spacing between this first Name and the input field and the Email, so we should do that to all of these. Let's go ahead and do form-group here as well. Now checkboxes are a special case, and as I mentioned I have an entire movie just for them but basically they get placed inside a div with a class of checkbox and use a label which wraps the input field. In HTML when you wrap a label around a for element then you don't have to use this for right here so we'll do that to this checkbox. We'll get this label. We'll delete this for right here and then we will wrap the input field inside this label, and we're going to put this inside a div with a class of checkbox. So we'll do this. And you can see that the label on a checkbox and a radio button goes usually to the right of the element whereas in some of these other elements, the label goes before the input field. Now on the input type="submit" that you usually do to submit the form, you can just add a class here. So on input buttons you can use the class of btn and then the contextual class which will determine the button's use as well as the color. So here we'll do class="btn and then btn-default" or you can use one of the other contextual classes. Let's go ahead and save this. You can see that the button looks really nice. This is also a great place to use the pull-right class if you want to align the button with the right side of the screen. So if we just wanted to align that button to the right which I sometimes like to do, you can just put pull-right in here and now the button will be on this side. You can also use controls like input fields and in that case they don't necessarily need to submit so a lot of times you'll have in your pages input fields that are not necessarily wrapped around form elements, usually for like calculators or maybe you're using AngularJS so in that case you probably want to use a button type instead of an input type. If you're using a form element though this is okay. Forms are another one of those styles that I really appreciate since writing all the CSS for them can take a long time so I really like that Bootstrap has a well thought out system for styling form elements.

Contents