0
1
00:00:00,200 --> 00:00:07,470
All right here comes the answer to challenge 9. In order to add a multi-line input, the HTML element that
1

2
00:00:07,470 --> 00:00:12,540
we need is not another input but in fact something called a textarea.
2

3
00:00:12,840 --> 00:00:20,580
And if you simply googled for multi-line text input or something along those lines, then you will have
3

4
00:00:20,580 --> 00:00:26,650
reached some piece of documentation on this HTML element. And you can see that if we go ahead and try
4

5
00:00:26,650 --> 00:00:33,330
it out ourselves it creates this text box and in the right corner you can drag this text box to make
5

6
00:00:33,330 --> 00:00:38,070
it as large or small as you want but we usually define a starting point,
6

7
00:00:38,070 --> 00:00:40,380
the number of rows and the number of columns.
7

8
00:00:40,410 --> 00:00:45,550
Let's go ahead and add that into our form. Right above the submit button
8

9
00:00:45,690 --> 00:00:52,200
I'm going to add this textarea element and let's give it a descriptive name for what's going to go
9

10
00:00:52,260 --> 00:00:53,370
inside there
10

11
00:00:53,370 --> 00:00:56,660
and that's probably going to be the post body right?
11

12
00:00:57,090 --> 00:00:59,360
That's going to be where the user is going to type
12

13
00:00:59,520 --> 00:01:04,210
a lot of the content for that post to complement the post title.
13

14
00:01:04,260 --> 00:01:13,150
Now I'm going to change the rows and columns to a bit smaller so maybe just 5 rows and 30 columns.
14

15
00:01:13,290 --> 00:01:18,790
Now it doesn't really matter how big you set your initial text area to be.
15

16
00:01:18,840 --> 00:01:20,710
It's just a matter of preference.
16

17
00:01:20,730 --> 00:01:21,680
That's it.
17

18
00:01:22,200 --> 00:01:30,500
OK so now that we've got our textarea, let's hit save. And you can see that we've got the bare bones
18

19
00:01:30,590 --> 00:01:36,510
of all the inputs that we need for our form. But we just need some labels for it right?
19

20
00:01:36,830 --> 00:01:41,270
We need to tell the user which one is for which because at the moment we just have lots of rectangles
20

21
00:01:41,270 --> 00:01:42,250
on screen.
21

22
00:01:42,500 --> 00:01:49,550
If you remember from our lessons on HTML, the element that we need is a label. The label doesn't really
22

23
00:01:49,550 --> 00:01:56,450
need to have a for attribute but it does need to have some text. So we'll call this title and we'll add
23

24
00:01:56,450 --> 00:02:04,870
another label that's going to go just in front of the text area and we'll call this one the post. And
24

25
00:02:04,880 --> 00:02:12,270
now we have this text that is right next to the input so that the user knows what they should put into
25

26
00:02:12,290 --> 00:02:14,140
each of these places.
26

27
00:02:14,150 --> 00:02:16,480
Now this formatting looks horrible
27

28
00:02:16,520 --> 00:02:19,930
and that's because it's just plain old HTML.
28

29
00:02:20,000 --> 00:02:26,630
So in order for us to bootstrap it and make it look nice we have to go over to the Bootstrap docs.
29

30
00:02:26,690 --> 00:02:34,280
And if you search for forms then you'll come across this document. So you can see that they've got this
30

31
00:02:34,280 --> 00:02:40,790
nice Bootstrap formatting around each of the inputs and they formatted the button exactly the way that
31

32
00:02:40,790 --> 00:02:41,830
we wanted to.
32

33
00:02:42,050 --> 00:02:46,410
So let's see what classes they needed to apply in order to achieve this.
33

34
00:02:46,430 --> 00:02:53,720
Firstly they've got this thing called a form-group which is a div that goes around the inputs and it
34

35
00:02:53,720 --> 00:03:00,890
Groups them into individual parts right? The email address part and the password part for example.
35

36
00:03:00,890 --> 00:03:08,380
And then for all of the inputs they applied a class of form-control to give it that appearance.
36

37
00:03:08,390 --> 00:03:15,860
And finally we've got a button that has a class of btn btn-primary to give it this nice blue color.
37

38
00:03:16,040 --> 00:03:19,340
So let's apply that to our form as well.
38

39
00:03:19,340 --> 00:03:23,640
So we're going to group our label and our inputs together.
39

40
00:03:23,720 --> 00:03:25,860
So I'm going to add a div here.
40

41
00:03:26,300 --> 00:03:32,270
And the class is going to be that form-group class that we saw earlier on. And inside the div
41

42
00:03:32,300 --> 00:03:39,350
I'm going to put everything that is related to my form into the same group. Now
42

43
00:03:39,360 --> 00:03:47,760
the input is going to need a class of form control, form-control. And we need to add the same class
43

44
00:03:48,090 --> 00:03:49,930
to our text area as well.
44

45
00:03:52,280 --> 00:04:00,310
So now if we go ahead and refresh you can see that we've got those nice bootstrappy styled inputs
45

46
00:04:00,410 --> 00:04:02,070
and they're all grouped together.
46

47
00:04:02,480 --> 00:04:06,950
Next let's go ahead and apply those Bootstrap classes to our button.
47

48
00:04:06,950 --> 00:04:15,560
So inside our button let's add a class and it's going to be btn btn-primary to make
48

49
00:04:15,560 --> 00:04:19,200
it look exactly the same as what we saw over here.
49

50
00:04:19,670 --> 00:04:25,010
One thing you might have noticed is that our button's stuck right next to our text area.
50

51
00:04:25,250 --> 00:04:28,980
And the reason for this is if you look at the documentation here
51

52
00:04:29,330 --> 00:04:37,820
the button is actually outside of the div that is a form group. And this is because the form groups will
52

53
00:04:37,820 --> 00:04:44,770
group everything together tightly, and so to separate it out any to put it outside of the group.
53

54
00:04:44,820 --> 00:04:51,560
In that case we're simply going to take our button out of the former group div which is this one,
54

55
00:04:52,320 --> 00:04:54,190
and we're going to put it right at the end
55

56
00:04:54,240 --> 00:04:57,720
but just before the end of the form.
56

57
00:04:57,810 --> 00:05:05,070
So let's hit save and let's refresh and you can see that we've achieved the exact same appearance as I showed
57

58
00:05:05,070 --> 00:05:07,400
you in the beginning of the challenge.
58

59
00:05:07,410 --> 00:05:13,230
Now some of you might have been wondering why it is that our form namely especially our button doesn't
59

60
00:05:13,230 --> 00:05:16,450
look identical to this one.
60

61
00:05:16,620 --> 00:05:23,940
And the reason is because inside our website if you take a look at the header, I'm using the CDN for
61

62
00:05:23,970 --> 00:05:27,210
Bootstrap version 3.3.7.
62

63
00:05:27,660 --> 00:05:32,400
And this is a very popular version of Bootstrap that people still work with.
63

64
00:05:32,460 --> 00:05:38,880
Now it works exactly the same way to the newer version of Bootstrap that I taught you in the Bootstrap
64

65
00:05:38,910 --> 00:05:39,820
module.
65

66
00:05:40,200 --> 00:05:47,370
But the biggest advantage of this is that the nav bar code is a lot more succinct and I wanted this header
66

67
00:05:47,370 --> 00:05:53,250
file to be really easily understood when you're looking at it and you're learning about EJS.
67

68
00:05:53,310 --> 00:05:56,130
So this is why I'm using this particular version.
68

69
00:05:56,280 --> 00:06:02,040
So that means that if you head to 3.3.7 and you look at the documentation here
69

70
00:06:02,580 --> 00:06:05,930
then these are the types of things that you will have access to.
70

71
00:06:06,090 --> 00:06:08,590
And this is what the forms look like
71

72
00:06:08,610 --> 00:06:15,550
in our case as well. But as you can see there's a massive amount of overlap between this bootstrap 3.3
72

73
00:06:15,590 --> 00:06:18,390
.7 and four point zero4.0.
73

74
00:06:18,600 --> 00:06:23,450
And we're able to use exactly the same classes to achieve the goals that we want.
74

75
00:06:23,670 --> 00:06:27,560
It's just that the appearances look a little bit different.
75

76
00:06:27,630 --> 00:06:31,420
Now once you're ready it's time for yet another challenge.
76

77
00:06:31,560 --> 00:06:32,940
It's time for challenge
77

78
00:06:32,940 --> 00:06:33,250
10.