All right here comes the answer to challenge 9. In order to add a multi-line input, the HTML element that 1
we need is not another input but in fact something called a textarea. 2
And if you simply googled for multi-line text input or something along those lines, then you will have 3
reached some piece of documentation on this HTML element. And you can see that if we go ahead and try 4
it out ourselves it creates this text box and in the right corner you can drag this text box to make 5
it as large or small as you want but we usually define a starting point, 6
the number of rows and the number of columns. 7
Let's go ahead and add that into our form. Right above the submit button 8
I'm going to add this textarea element and let's give it a descriptive name for what's going to go 9
inside there 10
and that's probably going to be the post body right? 11
That's going to be where the user is going to type 12
a lot of the content for that post to complement the post title. 13
Now I'm going to change the rows and columns to a bit smaller so maybe just 5 rows and 30 columns. 14
Now it doesn't really matter how big you set your initial text area to be. 15
It's just a matter of preference. 16
That's it. 17
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
of all the inputs that we need for our form. But we just need some labels for it right? 19
We need to tell the user which one is for which because at the moment we just have lots of rectangles 20
on screen. 21
If you remember from our lessons on HTML, the element that we need is a label. The label doesn't really 22
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
another label that's going to go just in front of the text area and we'll call this one the post. And 24
now we have this text that is right next to the input so that the user knows what they should put into 25
each of these places. 26
Now this formatting looks horrible 27
and that's because it's just plain old HTML. 28
So in order for us to bootstrap it and make it look nice we have to go over to the Bootstrap docs. 29
And if you search for forms then you'll come across this document. So you can see that they've got this 30
nice Bootstrap formatting around each of the inputs and they formatted the button exactly the way that 31
we wanted to. 32
So let's see what classes they needed to apply in order to achieve this. 33
Firstly they've got this thing called a form-group which is a div that goes around the inputs and it 34
Groups them into individual parts right? The email address part and the password part for example. 35
And then for all of the inputs they applied a class of form-control to give it that appearance. 36
And finally we've got a button that has a class of btn btn-primary to give it this nice blue color. 37
So let's apply that to our form as well. 38
So we're going to group our label and our inputs together. 39
So I'm going to add a div here. 40
And the class is going to be that form-group class that we saw earlier on. And inside the div 41
I'm going to put everything that is related to my form into the same group. Now 42
the input is going to need a class of form control, form-control. And we need to add the same class 43
to our text area as well. 44
So now if we go ahead and refresh you can see that we've got those nice bootstrappy styled inputs 45
and they're all grouped together. 46
Next let's go ahead and apply those Bootstrap classes to our button. 47
So inside our button let's add a class and it's going to be btn btn-primary to make 48
it look exactly the same as what we saw over here. 49
One thing you might have noticed is that our button's stuck right next to our text area. 50
And the reason for this is if you look at the documentation here 51
the button is actually outside of the div that is a form group. And this is because the form groups will 52
group everything together tightly, and so to separate it out any to put it outside of the group. 53
In that case we're simply going to take our button out of the former group div which is this one, 54
and we're going to put it right at the end 55
but just before the end of the form. 56
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
you in the beginning of the challenge. 58
Now some of you might have been wondering why it is that our form namely especially our button doesn't 59
look identical to this one. 60
And the reason is because inside our website if you take a look at the header, I'm using the CDN for 61
Bootstrap version 3.3.7. 62
And this is a very popular version of Bootstrap that people still work with. 63
Now it works exactly the same way to the newer version of Bootstrap that I taught you in the Bootstrap 64
module. 65
But the biggest advantage of this is that the nav bar code is a lot more succinct and I wanted this header 66
file to be really easily understood when you're looking at it and you're learning about EJS. 67
So this is why I'm using this particular version. 68
So that means that if you head to 3.3.7 and you look at the documentation here 69
then these are the types of things that you will have access to. 70
And this is what the forms look like 71
in our case as well. But as you can see there's a massive amount of overlap between this bootstrap 3.3 72
.7 and four point zero4.0. 73
And we're able to use exactly the same classes to achieve the goals that we want. 74
It's just that the appearances look a little bit different. 75
Now once you're ready it's time for yet another challenge. 76
It's time for challenge 77
10.