WEBVTT 0 00:00.200 --> 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 00:07.470 --> 00:12.540 we need is not another input but in fact something called a textarea. 2 00:12.840 --> 00:20.580 And if you simply googled for multi-line text input or something along those lines, then you will have 3 00:20.580 --> 00:26.650 reached some piece of documentation on this HTML element. And you can see that if we go ahead and try 4 00:26.650 --> 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 00:33.330 --> 00:38.070 it as large or small as you want but we usually define a starting point, 6 00:38.070 --> 00:40.380 the number of rows and the number of columns. 7 00:40.410 --> 00:45.550 Let's go ahead and add that into our form. Right above the submit button 8 00:45.690 --> 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 00:52.260 --> 00:53.370 inside there 10 00:53.370 --> 00:56.660 and that's probably going to be the post body right? 11 00:57.090 --> 00:59.360 That's going to be where the user is going to type 12 00:59.520 --> 01:04.210 a lot of the content for that post to complement the post title. 13 01:04.260 --> 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 01:13.290 --> 01:18.790 Now it doesn't really matter how big you set your initial text area to be. 15 01:18.840 --> 01:20.710 It's just a matter of preference. 16 01:20.730 --> 01:21.680 That's it. 17 01:22.200 --> 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 01:30.590 --> 01:36.510 of all the inputs that we need for our form. But we just need some labels for it right? 19 01:36.830 --> 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 01:41.270 --> 01:42.250 on screen. 21 01:42.500 --> 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 01:49.550 --> 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 01:56.450 --> 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 02:04.880 --> 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 02:12.290 --> 02:14.140 each of these places. 26 02:14.150 --> 02:16.480 Now this formatting looks horrible 27 02:16.520 --> 02:19.930 and that's because it's just plain old HTML. 28 02:20.000 --> 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 02:26.690 --> 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 02:34.280 --> 02:40.790 nice Bootstrap formatting around each of the inputs and they formatted the button exactly the way that 31 02:40.790 --> 02:41.830 we wanted to. 32 02:42.050 --> 02:46.410 So let's see what classes they needed to apply in order to achieve this. 33 02:46.430 --> 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 02:53.720 --> 03:00.890 Groups them into individual parts right? The email address part and the password part for example. 35 03:00.890 --> 03:08.380 And then for all of the inputs they applied a class of form-control to give it that appearance. 36 03:08.390 --> 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 03:16.040 --> 03:19.340 So let's apply that to our form as well. 38 03:19.340 --> 03:23.640 So we're going to group our label and our inputs together. 39 03:23.720 --> 03:25.860 So I'm going to add a div here. 40 03:26.300 --> 03:32.270 And the class is going to be that form-group class that we saw earlier on. And inside the div 41 03:32.300 --> 03:39.350 I'm going to put everything that is related to my form into the same group. Now 42 03:39.360 --> 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 03:48.090 --> 03:49.930 to our text area as well. 44 03:52.280 --> 04:00.310 So now if we go ahead and refresh you can see that we've got those nice bootstrappy styled inputs 45 04:00.410 --> 04:02.070 and they're all grouped together. 46 04:02.480 --> 04:06.950 Next let's go ahead and apply those Bootstrap classes to our button. 47 04:06.950 --> 04:15.560 So inside our button let's add a class and it's going to be btn btn-primary to make 48 04:15.560 --> 04:19.200 it look exactly the same as what we saw over here. 49 04:19.670 --> 04:25.010 One thing you might have noticed is that our button's stuck right next to our text area. 50 04:25.250 --> 04:28.980 And the reason for this is if you look at the documentation here 51 04:29.330 --> 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 04:37.820 --> 04:44.770 group everything together tightly, and so to separate it out any to put it outside of the group. 53 04:44.820 --> 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 04:52.320 --> 04:54.190 and we're going to put it right at the end 55 04:54.240 --> 04:57.720 but just before the end of the form. 56 04:57.810 --> 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 05:05.070 --> 05:07.400 you in the beginning of the challenge. 58 05:07.410 --> 05:13.230 Now some of you might have been wondering why it is that our form namely especially our button doesn't 59 05:13.230 --> 05:16.450 look identical to this one. 60 05:16.620 --> 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 05:23.970 --> 05:27.210 Bootstrap version 3.3.7. 62 05:27.660 --> 05:32.400 And this is a very popular version of Bootstrap that people still work with. 63 05:32.460 --> 05:38.880 Now it works exactly the same way to the newer version of Bootstrap that I taught you in the Bootstrap 64 05:38.910 --> 05:39.820 module. 65 05:40.200 --> 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 05:47.370 --> 05:53.250 file to be really easily understood when you're looking at it and you're learning about EJS. 67 05:53.310 --> 05:56.130 So this is why I'm using this particular version. 68 05:56.280 --> 06:02.040 So that means that if you head to 3.3.7 and you look at the documentation here 69 06:02.580 --> 06:05.930 then these are the types of things that you will have access to. 70 06:06.090 --> 06:08.590 And this is what the forms look like 71 06:08.610 --> 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 06:15.590 --> 06:18.390 .7 and four point zero4.0. 73 06:18.600 --> 06:23.450 And we're able to use exactly the same classes to achieve the goals that we want. 74 06:23.670 --> 06:27.560 It's just that the appearances look a little bit different. 75 06:27.630 --> 06:31.420 Now once you're ready it's time for yet another challenge. 76 06:31.560 --> 06:32.940 It's time for challenge 77 06:32.940 --> 06:33.250 10.