1
00:00:01,380 --> 00:00:08,010
Hello, in this video, I'm going to show you how to implement form controls for, just say, basic,

2
00:00:08,220 --> 00:00:11,010
for example, in bootstrap five.

3
00:00:11,010 --> 00:00:15,510
So a form is like a submission form or a login form, for example.

4
00:00:15,690 --> 00:00:18,520
And here is what we're actually going to be implementing.

5
00:00:18,780 --> 00:00:23,250
I'll be showing you most of it, but there's a bit more on the Bootstrap API guide.

6
00:00:23,250 --> 00:00:24,870
Plus, this can be updated later on.

7
00:00:24,880 --> 00:00:26,840
So recommend they check this out.

8
00:00:27,120 --> 00:00:30,420
There will be a link to this in the description.

9
00:00:30,810 --> 00:00:32,130
So let's get to it.

10
00:00:32,160 --> 00:00:38,610
So it's very conventional that you put a full tag and in there you put your form.

11
00:00:38,880 --> 00:00:43,220
The form tags would also have like a method of action as well.

12
00:00:43,350 --> 00:00:50,520
But because we're not really dealing with backend technology, the technology's just the Fontan in terms

13
00:00:50,520 --> 00:00:51,330
of the way it looks.

14
00:00:51,330 --> 00:00:52,210
We don't need that.

15
00:00:52,620 --> 00:01:00,960
So first of all, when I have a div and this is going to have a class of ambidexterity, so this is

16
00:01:00,960 --> 00:01:05,340
just adding a margin at the bottom just so it's easy to look at.

17
00:01:05,340 --> 00:01:10,240
Otherwise, all of the form controls are on top of each.

18
00:01:10,270 --> 00:01:11,670
That doesn't look very good.

19
00:01:12,120 --> 00:01:19,210
So this is going to be for entry, an email address, for example, and we're going to put a label first

20
00:01:19,260 --> 00:01:30,360
on the label and this is going to say for e-mail address input, which will be the idea of the input

21
00:01:30,360 --> 00:01:31,450
that will be implemented.

22
00:01:31,470 --> 00:01:38,520
Surely this is going to have a class of formed label and none of our label.

23
00:01:39,030 --> 00:01:44,520
And now but it's going to say email address so the user knows what they need to insert here.

24
00:01:45,810 --> 00:01:47,430
And we're going to turn an input tag.

25
00:01:47,460 --> 00:01:50,630
Now, this is where the user would actually be inputting in something.

26
00:01:51,270 --> 00:01:54,860
And this is going to have a type of email.

27
00:01:55,590 --> 00:02:06,450
This is going to have a class of home control and it's going to have an I.D., which is exactly what

28
00:02:06,450 --> 00:02:18,420
we put here and now and then have a placeholder placeholder name and example dot com for the benefit

29
00:02:18,420 --> 00:02:23,710
of this is to show the user what format, essentially the content should be in here.

30
00:02:23,770 --> 00:02:29,550
We all know where email address format is, but, you know, just in case any such a good thing to have.

31
00:02:30,060 --> 00:02:32,580
Now, let's actually.

32
00:02:33,900 --> 00:02:35,940
Implement the.

33
00:02:37,190 --> 00:02:45,170
Next, control, which is very similar, will have a label and this is going to be a description in

34
00:02:45,170 --> 00:02:45,680
part.

35
00:02:45,920 --> 00:02:53,750
So this is let's say if you was on a website contact page and you have to put your email address in

36
00:02:53,750 --> 00:02:57,440
and maybe the description of your inquiry.

37
00:02:57,980 --> 00:03:01,070
OK, so this is still a form label.

38
00:03:01,110 --> 00:03:04,090
I'm going to put a description here instead.

39
00:03:05,510 --> 00:03:13,910
And so the input is slightly different than the text area, which just allow you to put multi line text

40
00:03:14,090 --> 00:03:22,370
and the information that has its own component, its own element, which is text area.

41
00:03:22,910 --> 00:03:24,850
And we're not going to put anything in between.

42
00:03:25,010 --> 00:03:37,100
We want it to be a class of form control or you do will match this right here and we're going to put

43
00:03:37,220 --> 00:03:40,160
rows equals free.

44
00:03:40,170 --> 00:03:44,180
So this way it has a size of three rows.

45
00:03:44,360 --> 00:03:48,140
You can expand it in the actual website.

46
00:03:48,170 --> 00:03:49,880
So this is what we get.

47
00:03:50,300 --> 00:03:52,590
As you can see, it is nicely responsive.

48
00:03:52,590 --> 00:03:55,660
So this will work great on mobile device.

49
00:03:55,910 --> 00:03:57,560
And you said name an example.

50
00:03:57,770 --> 00:04:05,960
I click on it and I'll start typing this, say, Bob Gmoser Tom, for example, that gets rid of that

51
00:04:05,960 --> 00:04:08,490
placeholder and we can start typing.

52
00:04:08,690 --> 00:04:14,480
We're not restricted to three rows is just the size was three rows.

53
00:04:14,480 --> 00:04:15,380
Anything more than that.

54
00:04:15,380 --> 00:04:18,680
You gets clipped but you can extend it like so.

55
00:04:19,040 --> 00:04:21,860
So that is a basic example.

56
00:04:22,070 --> 00:04:28,820
Now let me show you how to deal with Sois inside of this, so I'm going to duplicate this.

57
00:04:31,550 --> 00:04:39,570
And honestly what I'm going to do is get rid of this and I'll get rid of the label just because this

58
00:04:39,700 --> 00:04:42,560
is not the basic example anymore.

59
00:04:42,560 --> 00:04:45,860
Just about Sol isn't going to get rid of the idea as well.

60
00:04:45,870 --> 00:04:50,990
You would usually have an I.D. We don't need it for essentially what we're trying to demonstrate here.

61
00:05:00,470 --> 00:05:08,810
OK, so put some there, I'm also going to put a break through just because if I don't, they're literally

62
00:05:08,810 --> 00:05:10,790
on top of me, so that doesn't look very nice.

63
00:05:11,270 --> 00:05:12,380
But again, that's the format.

64
00:05:12,380 --> 00:05:16,760
And you cooperate and be free on this class as well.

65
00:05:17,030 --> 00:05:24,410
So if we want the full control to be large, you just put an extra class of foam that's controlled algae.

66
00:05:24,860 --> 00:05:27,100
If you want it to be medium, you just leave it.

67
00:05:27,110 --> 00:05:30,770
You don't actually add any extra class of what you is by default.

68
00:05:31,100 --> 00:05:34,760
And if you want it to be more, perform dust control.

69
00:05:36,500 --> 00:05:39,500
So if we reload, that's what we get.

70
00:05:39,530 --> 00:05:41,060
So this is what we have by default.

71
00:05:41,060 --> 00:05:45,500
But if you want a smaller or larger, you can easily do that.

72
00:05:45,890 --> 00:05:51,390
OK, so the next thing I want to show you is how to make a foam control read only.

73
00:05:51,830 --> 00:05:53,920
So let me duplicate this.

74
00:05:55,460 --> 00:05:59,630
And in here I will get rid of virtually all of it.

75
00:05:59,650 --> 00:06:04,130
I don't really need this size where you can leave it there.

76
00:06:04,400 --> 00:06:08,310
So if I wanted to make this read-only, it's really simple.

77
00:06:08,330 --> 00:06:16,640
All you do is put the read-only time attribute like that, reload, if you will, read on it and type

78
00:06:16,640 --> 00:06:16,830
in it.

79
00:06:17,150 --> 00:06:19,220
So why would you want a read?

80
00:06:19,220 --> 00:06:20,330
Only foam control.

81
00:06:20,480 --> 00:06:29,150
Maybe the user can't input into that foam control until they have, you know, triggered some other

82
00:06:29,150 --> 00:06:31,070
condition and one that gets triggered.

83
00:06:31,190 --> 00:06:36,800
Obviously you will be doing those checks in JavaScript, then this becomes non reloading and you would

84
00:06:36,800 --> 00:06:38,480
do again, all of that in JavaScript.

85
00:06:38,850 --> 00:06:39,520
So that's it.

86
00:06:39,560 --> 00:06:42,800
I want to do it as a example that maybe.

87
00:06:44,080 --> 00:06:50,410
A previous full control needs to be filled in X amount characters do that in JavaScript, the checks

88
00:06:50,540 --> 00:06:57,150
and once that is, this goes to no, we don't anymore and you can put stuff in there and vice versa.

89
00:06:57,370 --> 00:07:00,190
So if you have any questions, feel free to drop me a message.

90
00:07:00,400 --> 00:07:04,330
And as usual, I look forward to seeing you in the next video.