Hello, in this video, I'm going to show you how to implement form controls for, just say, basic,
for example, in bootstrap five.
So a form is like a submission form or a login form, for example.
And here is what we're actually going to be implementing.
I'll be showing you most of it, but there's a bit more on the Bootstrap API guide.
Plus, this can be updated later on.
So recommend they check this out.
There will be a link to this in the description.
So let's get to it.
So it's very conventional that you put a full tag and in there you put your form.
The form tags would also have like a method of action as well.
But because we're not really dealing with backend technology, the technology's just the Fontan in terms
of the way it looks.
We don't need that.
So first of all, when I have a div and this is going to have a class of ambidexterity, so this is
just adding a margin at the bottom just so it's easy to look at.
Otherwise, all of the form controls are on top of each.
That doesn't look very good.
So this is going to be for entry, an email address, for example, and we're going to put a label first
on the label and this is going to say for e-mail address input, which will be the idea of the input
that will be implemented.
Surely this is going to have a class of formed label and none of our label.
And now but it's going to say email address so the user knows what they need to insert here.
And we're going to turn an input tag.
Now, this is where the user would actually be inputting in something.
And this is going to have a type of email.
This is going to have a class of home control and it's going to have an I.D., which is exactly what
we put here and now and then have a placeholder placeholder name and example dot com for the benefit
of this is to show the user what format, essentially the content should be in here.
We all know where email address format is, but, you know, just in case any such a good thing to have.
Now, let's actually.
Implement the.
Next, control, which is very similar, will have a label and this is going to be a description in
part.
So this is let's say if you was on a website contact page and you have to put your email address in
and maybe the description of your inquiry.
OK, so this is still a form label.
I'm going to put a description here instead.
And so the input is slightly different than the text area, which just allow you to put multi line text
and the information that has its own component, its own element, which is text area.
And we're not going to put anything in between.
We want it to be a class of form control or you do will match this right here and we're going to put
rows equals free.
So this way it has a size of three rows.
You can expand it in the actual website.
So this is what we get.
As you can see, it is nicely responsive.
So this will work great on mobile device.
And you said name an example.
I click on it and I'll start typing this, say, Bob Gmoser Tom, for example, that gets rid of that
placeholder and we can start typing.
We're not restricted to three rows is just the size was three rows.
Anything more than that.
You gets clipped but you can extend it like so.
So that is a basic example.
Now let me show you how to deal with Sois inside of this, so I'm going to duplicate this.
And honestly what I'm going to do is get rid of this and I'll get rid of the label just because this
is not the basic example anymore.
Just about Sol isn't going to get rid of the idea as well.
You would usually have an I.D. We don't need it for essentially what we're trying to demonstrate here.
OK, so put some there, I'm also going to put a break through just because if I don't, they're literally
on top of me, so that doesn't look very nice.
But again, that's the format.
And you cooperate and be free on this class as well.
So if we want the full control to be large, you just put an extra class of foam that's controlled algae.
If you want it to be medium, you just leave it.
You don't actually add any extra class of what you is by default.
And if you want it to be more, perform dust control.
So if we reload, that's what we get.
So this is what we have by default.
But if you want a smaller or larger, you can easily do that.
OK, so the next thing I want to show you is how to make a foam control read only.
So let me duplicate this.
And in here I will get rid of virtually all of it.
I don't really need this size where you can leave it there.
So if I wanted to make this read-only, it's really simple.
All you do is put the read-only time attribute like that, reload, if you will, read on it and type
in it.
So why would you want a read?
Only foam control.
Maybe the user can't input into that foam control until they have, you know, triggered some other
condition and one that gets triggered.
Obviously you will be doing those checks in JavaScript, then this becomes non reloading and you would
do again, all of that in JavaScript.
So that's it.
I want to do it as a example that maybe.
A previous full control needs to be filled in X amount characters do that in JavaScript, the checks
and once that is, this goes to no, we don't anymore and you can put stuff in there and vice versa.
So if you have any questions, feel free to drop me a message.
And as usual, I look forward to seeing you in the next video.