1
00:00:05,320 --> 00:00:10,360
Welcome back and this lecture we're going to talk about forms with bootstrap.

2
00:00:10,520 --> 00:00:14,340
So we're going to quickly review how bootstrap can help make your forms look really good.

3
00:00:14,560 --> 00:00:18,380
And for this lecture we're really just going to walk through the code and discuss the various class

4
00:00:18,380 --> 00:00:23,660
calls instead of manually typing things out because what we've essentially done here is just copy and

5
00:00:23,660 --> 00:00:28,160
paste it different form elements from the documentation into a single file.

6
00:00:28,400 --> 00:00:31,290
So go ahead and open up part 2 underscore forms.

7
00:00:31,450 --> 00:00:33,680
T.M. from the bootstrap folder.

8
00:00:33,800 --> 00:00:34,300
Let's check it out.

9
00:00:34,310 --> 00:00:37,350
In the text editor and also see how it appears in the browser.

10
00:00:37,640 --> 00:00:43,370
OK here we have the actual file open in my HTL text editor and in my browser I have the documentation

11
00:00:43,370 --> 00:00:49,370
page open to the forms component as well as in other times that's actually linked to this ASTM l file.

12
00:00:49,370 --> 00:00:53,180
So as quickly walk through how bootstrap can make your forms look really good.

13
00:00:53,180 --> 00:00:58,670
First off there's basically a fully updated form class system with bootstrap 4 that makes his forms

14
00:00:58,670 --> 00:01:02,630
look really nice and you'll notice that even as you click one of these you'll begin to see like the

15
00:01:02,630 --> 00:01:04,160
highlighting around the box.

16
00:01:04,160 --> 00:01:08,390
You also get information that can pop up like we'll never share email if anyone else and you can edit

17
00:01:08,420 --> 00:01:13,550
those for the message to display whatever you want or we can just remove that message entirely.

18
00:01:13,590 --> 00:01:19,750
You can put in passwords example select and then you can have multiple selects as well an example text

19
00:01:19,750 --> 00:01:21,350
area that you can resize.

20
00:01:21,350 --> 00:01:23,640
Notice how these corners are a little more rounded.

21
00:01:23,720 --> 00:01:26,450
And notice how I can only now resize up and down.

22
00:01:26,450 --> 00:01:32,210
So that way the page isn't go too crazy since a normal text area box by itself with no class adjustments

23
00:01:32,480 --> 00:01:34,530
you can resize it both width and height.

24
00:01:34,700 --> 00:01:38,420
And typically they're just a little nicer to only have it height wise.

25
00:01:38,450 --> 00:01:42,890
You can also upload files so choose a file and there's a message here.

26
00:01:42,950 --> 00:01:47,850
You can also have radio buttons that check out a check out button and then you know submit.

27
00:01:48,110 --> 00:01:51,190
And essentially this will just refresh the form in our case.

28
00:01:51,310 --> 00:01:51,880
And if you want.

29
00:01:51,920 --> 00:01:57,100
You can also check out the forms bootstrap documentation for various examples on all these form controls.

30
00:01:57,110 --> 00:02:01,400
So what we've done is just we created a simple reference document for yourself in case you ever want

31
00:02:01,400 --> 00:02:04,670
to add in any of these classes to your own forms.

32
00:02:04,760 --> 00:02:10,250
And there is going to be stuff that we haven't really put into that actual reference to himself because

33
00:02:10,250 --> 00:02:11,330
they're not as common.

34
00:02:11,570 --> 00:02:13,460
So you can't have a range input if you want.

35
00:02:13,490 --> 00:02:17,270
You can have a read only input plain text and so on.

36
00:02:17,270 --> 00:02:23,780
So basically what we have here inside of our east him file or links to the bootstrap C S and Javascript.

37
00:02:23,810 --> 00:02:27,650
Let's quickly go down and basically explain what we were seeing before.

38
00:02:27,680 --> 00:02:32,210
So for email submissions the main idea that you have to be aware of is you're going to have to specify

39
00:02:32,210 --> 00:02:39,410
type email and then you can say classes such as form text and text muted as well as giving this an ID

40
00:02:39,440 --> 00:02:43,050
of email help and that will adjust was actually displayed.

41
00:02:43,190 --> 00:02:49,640
So that this little small tag that directly links to what was displayed below the e-mail so we'll never

42
00:02:49,640 --> 00:02:51,140
share e-mail for anyone else.

43
00:02:51,140 --> 00:02:52,080
You know we can change this.

44
00:02:52,190 --> 00:02:59,980
The thanks for your e-mail save those changes and we check it out again in the actual forum page upon

45
00:02:59,980 --> 00:03:02,270
a refresh then we see that change of.

46
00:03:02,290 --> 00:03:04,150
Thanks for your e-mail right here.

47
00:03:04,650 --> 00:03:09,340
So again just various buttons and tags and elements you can adjust to your liking.

48
00:03:09,360 --> 00:03:13,320
That's really what you're using bootstrapped for your copy and paste from the documentation and then

49
00:03:13,320 --> 00:03:14,510
adjusting manually.

50
00:03:14,550 --> 00:03:15,930
However you see fit.

51
00:03:16,110 --> 00:03:17,680
You'll set passwords again.

52
00:03:17,700 --> 00:03:24,750
We want to see these classes such as form control an example input password one for the ID dropdown

53
00:03:24,750 --> 00:03:30,210
select again if we come back here we had this dropdown select option the class for that would be form

54
00:03:30,210 --> 00:03:36,110
control and we also have IDs for example select one multiple select options.

55
00:03:36,120 --> 00:03:41,970
We can see here we have another form control class and this option right here just saying multiple that

56
00:03:41,970 --> 00:03:44,080
allows you to select multiple options.

57
00:03:44,160 --> 00:03:49,980
So if I come here and I can hold shift or control to select more or de-select the one that's allowing

58
00:03:49,980 --> 00:03:55,060
me to do that is this multiple call inside that class then we have the text area.

59
00:03:55,170 --> 00:03:59,670
This one again you're gonna want to say form control as your class and you can also give it a div for

60
00:03:59,670 --> 00:04:04,060
forum group Lotus notice these other ones also have their own divs and that's really common.

61
00:04:04,120 --> 00:04:07,200
You give a div for every single form component.

62
00:04:07,480 --> 00:04:11,140
Then we also file upload and inputs as well as radio buttons.

63
00:04:11,160 --> 00:04:13,180
You can check out the various classes.

64
00:04:13,200 --> 00:04:18,600
A lot of these tend to be very similar things like form text and text meated and form check input.

65
00:04:18,600 --> 00:04:22,720
Those are very similar classes you're going to see throughout many form input calls.

66
00:04:22,950 --> 00:04:25,640
And then finally at the bottom we had those radio buttons as well.

67
00:04:25,680 --> 00:04:30,080
Again form check input class and form check input class as well.

68
00:04:30,430 --> 00:04:30,960
OK.

69
00:04:31,110 --> 00:04:34,140
So that's just a very brief showing of what's possible.

70
00:04:34,140 --> 00:04:38,420
Making these forms look really nice they look a lot better than what's available if bootstrap.

71
00:04:38,430 --> 00:04:42,600
In fact we can always check what it would look like without bootstrap by scrolling all the way back

72
00:04:42,600 --> 00:04:43,650
to the top.

73
00:04:43,650 --> 00:04:49,970
We can just delete these save that change and if we refresh our page here this is what it would look

74
00:04:49,970 --> 00:04:54,170
like without any bootstraps and notice all the formatting that Bitstrips actually taking care of for

75
00:04:54,170 --> 00:04:54,580
you.

76
00:04:54,740 --> 00:04:57,410
So it looks way worse then without bootstrap.

77
00:04:57,410 --> 00:05:01,700
So if we undo this again save this refresh the page.

78
00:05:01,700 --> 00:05:06,170
This is what it looks like with bootstrap a huge difference and it's going to save you a ton of time.

79
00:05:06,220 --> 00:05:11,460
It is really important when you want the Web sites to look really good on mobile devices as well.

80
00:05:11,510 --> 00:05:12,970
Again something to notice about bootstrap.

81
00:05:12,980 --> 00:05:17,510
It's constantly going to readjust depending on what the browser size is.

82
00:05:17,510 --> 00:05:22,490
So that means going to look good regardless of your monitor size or regardless of your actual phone

83
00:05:22,490 --> 00:05:23,200
browser.

84
00:05:23,450 --> 00:05:23,940
OK.

85
00:05:24,140 --> 00:05:25,090
I hope you enjoyed that.

86
00:05:25,100 --> 00:05:26,170
I hope you find that useful.

87
00:05:26,180 --> 00:05:30,470
Again the main thing I really want you to take care of here is the fact that you can go to documentation

88
00:05:30,590 --> 00:05:35,750
look at the components you want paste them into your T.M. see the class calls there and adjust as you

89
00:05:35,750 --> 00:05:37,100
see necessary.

90
00:05:37,100 --> 00:05:39,180
Coming up next we're going to learn about nav bars.

91
00:05:39,320 --> 00:05:42,860
We're definitely going to be a little more hands on there because we're going to be using nav bars all

92
00:05:42,860 --> 00:05:45,160
the time with our own Web sites.

93
00:05:45,170 --> 00:05:45,880
We'll see you there.