Welcome back, everyone, to this lecture where we're going to be discussing the basics of forms with
bootstrap forms actually have their own section in the documentation.
So we're just going to briefly explore some important class ideas about forms and how to best utilize
what Bootstrap provides for us.
Let's head over to Visual Studio Code Editor as well as the bootstrap documentation.
All right.
Here I am inside a Visual Studio Code Editor.
You'll notice that I have already loaded up the CSS and JavaScript, as well as our own CSV file.
We actually won't be messing around for our own CIUSSS file.
You can notice that it's blank.
What I'm going to do is I'm going to check out the bootstrap documentation for forms to find it.
Just go to get this Trip.com on docs in the top navigation bar.
And you'll notice on the left hand side you should see forms.
Forms actually has its own section.
The main way this works inside the documentation is there's a general overview of forms like overview
on how it works and how you set up the divisions.
And then beyond that, it's basically just the different types of inputs you can have within a form
like select.
So this is a select menu one two, three four, etc. You can notice there's just a specific class.
So the main thing I want to point across here or get across in this lecture is the fact that you just
set up your form.
And then depending on the different types of inputs you want, there may be specific class calls to
actually look up.
So again, this particular class is called input group text, for instance, and form control.
There are some basic classes that are going to be used across multiple different types of inputs, but
just want you to be aware of that.
OK.
So have check boxes and radios, multiple inputs, etc. Multiple add ons.
Some of these you may use a lot, some of these you probably won't use at all.
But where there's just start off with just the very basics of form control and how bootstrap actually
styles these.
So it's going to look slightly different than what we're already familiar with.
We can see here we have a very basic form for email address and password.
We also have this little checkbox and then a submit button.
Let's explore how Bootstrap thinks about these forms and what are the key classes we need to learn.
It's going to copy this to my clipboard again.
This is the code that goes along with this, for example.
So I'm going to copy this, going to come back here and then let's paste that into the body.
And there's a couple of things I want to point out.
The first one is right off the bat, you'll notice that we have a form tag, but then each individual
section of the form is actually a phone div tag.
So that's kind of interesting.
We haven't seen that really before.
And you'll notice there's a class here called M.B. That's three.
This actually has to do with the grid system with bootstrap.
We're going to learn that in a future lecture.
So kind of just ignore that for right now.
But keep in mind that the way this is organized is a single div per like label input combo within the
form itself.
That's a little different than what we've done before, but it's an important distinction to make.
Then the other thing to note here is typically you're going to have three main elements.
You won't use all of them, but they may be there.
When it comes to a form, you have an email address.
This is the label of the form.
Then you have the actual input of the form and then you have maybe some additional text.
So what are the actual classes that bootstrap uses for that?
We are already familiar with a label which is what goes or is connected to right before the input.
And remember, we can use a label to give some sort of text assignment for the user to read.
So here we're saying email address that you kind of get the idea this could be put your email colon,
but it's just a label.
The class for that within bootstrap is form that label.
So when we're dealing with labels and HTML forms and we're also dealing with bootstrap, we're going
to want to attach a form that's label class to the label.
Then there comes the actual input.
Remember, this could be something like type, email or type password or type text, et cetera.
For that, the basic class for that is called form bash control.
So you should be considering formed control as your class call when you have some sort of input tag.
So it's formed a label for label form, bash control for input, and then you notice there's yet another
division here.
This is if you want to add extra information below the actual input box, and this is known as form
text.
So this says here we'll never share your email, if anyone else, and they put it within its own little
div.
Let's go ahead and explore this just a little bit.
I'm going to copy this code, and then I'm actually going to put it inside the div for the password
and see what that looks like.
So I'm going to put it here, and you'll notice it basically creates this little text here, and this
part doesn't make sense for the password.
So maybe you want to say something like what is typical for text below a password box, which would
be password must contain?
Ten letters or something like that.
You can see there's this formed Ash text class and what his form this text class do.
Well, you can see it kind of makes it a little lighter of a gray, and it's just for saying, OK,
this has to do with the kind of restrictions or constraints for what it has to do with the actual input.
Then you can see there's the check me out button.
This is going to be the most different from the email in the password.
There's going to be many different types of inputs we can use of forms, and in that case, you will
probably have to look up the actual class that is most relevant for the input.
So here I have input.
The type is a checkbox input.
Remember, we have many types of inputs that we're familiar with.
There's also, for instance, like a radio button input.
You can see that already changed this to be a radio button.
But the main idea being is for these kind of more esoteric inputs, you probably have to look up the
actual forms.
This specific class was made for class form that check input.
But if you're using something like a specific radio, there's probably be a better class for it.
So let's imagine I did want to use a radio button how to actually figure out the bootstrap class that
should go with it.
It's probably not form check input because that's really for a checkbox.
I would just come to the documentation, check out the forms and then essentially scroll here until
I find it.
I can see there's a section for checks and radios, so I click down to check and radios tells me a little
bit about their approach structurally with inputs.
The fact that they can actually have disabled or checked a comeback.
Here, you'll notice that there's a checked checkbox.
That means kind of by default, when that person visits the page, there's already a check here.
Remember, I was looking for things that had to do with radios, so I would just keep scrolling down
here.
I notice there's ability to disable things in case the user is not allowed to interact with it.
Then I come here and I would say, OK, it looks like there's radios and what is the actual class four
radios?
And then I realized, Oh, it actually is formed that check the input for these specific radios.
So I realize, OK, I'm actually OK for that particular class call.
Then I could say, Well, maybe if I wanted to disable a radio button, how would I do that?
You could just come over here and realize that they're adding in a disabled tag.
So just come.
Copy that and then put it in the input if I wanted to disable it.
So it could say disabled and you'll notice it's actually disabled, they can't check it.
Later on, we'll realize of Django.
I can add in some logic of when to disable it.
But again, the main idea here is just you look up in the documentation.
What are the class calls that are relative or related to what I'm trying to achieve or accomplish in
the forms?
All right.
That's really it.
Again, it's figure out what's the correct class and also discover that device are utilized a lot within
a bootstrap form.
Coming up next, we're going discuss more about Bootstrap by talking about the navigation bar.
I'll see you there.