WEBVTT 0 00:00.390 --> 00:02.770 This form is really starting to take shape. 1 00:03.390 --> 00:07.490 We've used input elements, we've used the select element. 2 00:07.860 --> 00:11.220 I want us to now use another type of element called <textarea>... 3 00:11.400 --> 00:13.530 and intuitively, you probably know what that is already. 4 00:13.740 --> 00:19.590 It just allows a user to write a lot of text, you know, with the input text above, with the text 5 00:19.590 --> 00:20.220 input fields... 6 00:20.560 --> 00:27.210 the user only really has one line. But with a <textarea>, of course, they can write a lot more information. 7 00:27.720 --> 00:30.870 So let's build that quickly, and then let's style it up. First 8 00:30.880 --> 00:33.960 step always, is we have to code our HTML. 9 00:35.080 --> 00:36.370 And again, let's start... 10 00:37.470 --> 00:39.660 adding labels to our form. It is always good practice. 11 00:40.700 --> 00:43.430 Adding a textarea to our form. 12 00:44.760 --> 00:51.240 And how do we create a textarea? Remember, each widget should have a wrapper, it's just good practice 13 00:51.240 --> 00:52.300 when it comes to styling... 14 00:52.320 --> 00:53.340 it's a lot, lot easier. 15 00:53.820 --> 00:59.760 So let's wrap it in a DIV, with the class of form-row, just to keep it consistent with everything else. 16 01:00.180 --> 01:01.570 That's the first step. 17 01:01.590 --> 01:04.380 After that, I want us to add a label. 18 01:04.610 --> 01:06.540 It's always good to label each widget. 19 01:06.960 --> 01:13.000 And then, of course, I want to use this textarea element, and then we can even include kind of a 20 01:13.060 --> 01:16.410 short description, another short description of what we want the user to do. 21 01:16.680 --> 01:18.420 And that we can just wrap within anything... 22 01:18.570 --> 01:19.470 let's just wrap it in a DIV. 23 01:20.010 --> 01:20.760 So let's get coding 👩‍💻. 24 01:21.760 --> 01:26.760 As I mentioned, the first thing I want to do is create a DIV with form-row as its class, just to keep 25 01:26.760 --> 01:28.450 it consistent with everything else. 26 01:29.190 --> 01:34.710 Then, as I mentioned, let's give it a label and this is just going to be a "description" of the user... 27 01:35.310 --> 01:36.780 Your profile... 28 01:38.550 --> 01:39.150 description. 29 01:40.680 --> 01:48.840 Then, I want to add this textarea HTML element. I want to give it a name of "description". (swoosh) And i just... 30 01:48.840 --> 01:55.560 want to remind you again, don't get lost in all the detail. This "name" attributes is necessary when we 31 01:55.560 --> 02:02.220 submit the information to a server, because remember, everything sent to the server needs to be associated 32 02:02.220 --> 02:04.110 with a variable, a name. 33 02:04.110 --> 02:07.430 And that's why we're giving these names, names, descriptions. 34 02:07.530 --> 02:11.020 So when we send the information to the server, we can extract values from the form. 35 02:11.220 --> 02:13.230 That's all we doing with this "name" attribute. 36 02:15.100 --> 02:15.640 Makes sense. 37 02:16.810 --> 02:22.020 Um, the ID we can give anything we want. In fact, let's just give it an ID of description. 38 02:23.390 --> 02:25.580 We don't have to worry about columns and rows for now. 39 02:26.620 --> 02:32.260 You can just define how big you want your textarea to be. And then remember, I wanted another short... 40 02:32.260 --> 02:34.640 description about this whole textbox. 41 02:34.750 --> 02:38.800 So let's wrap that in a DIV, and let's just give it a class of... 42 02:39.750 --> 02:43.760 "description". And I'm just going to put here, describe yourself... 43 02:44.840 --> 02:49.460 here - your hobbies and interests. 44 02:50.530 --> 02:52.420 And if we save this and we go to our browser... 45 02:53.890 --> 02:54.410 there we go. 46 02:54.520 --> 02:55.370 It looks pretty ugly 🤢... 47 02:55.390 --> 02:59.990 I know. The cool thing with textboxes is that its got this little thing at the bottom right... 48 03:00.030 --> 03:00.220 here. 49 03:00.550 --> 03:06.190 And of course, the user can drag and make that bigger or smaller. If you refresh, it just defaults to the 50 03:06.190 --> 03:07.040 standard size. 51 03:08.170 --> 03:09.840 So now I want us to style this. 52 03:10.120 --> 03:11.560 How should we do that? 53 03:12.430 --> 03:15.130 Firstly, let's go to our IDE here... 54 03:15.160 --> 03:16.480 let's go to the stylesheet. 55 03:17.210 --> 03:18.790 Let's copy/paste this heading. 56 03:20.710 --> 03:24.280 We don't to style radio buttons, it's not dropdown menu styling... 57 03:25.470 --> 03:26.780 now, I want to go text... 58 03:29.320 --> 03:31.780 textarea styling. 59 03:33.680 --> 03:39.320 In order to style this textbox, we obviously have to target it in some way. And that's super, super... 60 03:39.320 --> 03:39.570 easy. 61 03:39.590 --> 03:44.590 We start with the parent again, which is "form-row". Remember, if we go to our HTML... 62 03:44.600 --> 03:46.540 it's that DIV with class of "form-row'. 63 03:46.970 --> 03:55.330 And then within that, we have a descendant element called textarea. It really, really is that simple. 64 03:55.730 --> 03:57.860 The first thing we can change is say, the font-family. 65 03:59.260 --> 04:04.690 And we can have that as, um, Helvitica ... Helvetica. 66 04:05.770 --> 04:11.450 And if that is not on the browser, we can get Arial, and then sans-serif as a default option. 67 04:12.280 --> 04:12.840 So there we go... 68 04:12.860 --> 04:14.170 we've just changed font-family. 69 04:14.530 --> 04:20.110 The next thing we can do, is we can change the font-size. Let's change that to 14px... 70 04:21.370 --> 04:25.600 and what I want to do, is I want to put the text editor to the left and the screen to the right... 71 04:25.600 --> 04:29.230 and then you can see as we go on what the changes are that we make. 72 04:30.120 --> 04:37.950 So the next thing we can do, is let's add a border. Um, so border, we can give it a 1px solid... 73 04:38.640 --> 04:38.970 border... 74 04:40.390 --> 04:42.730 #D6D9DC... 75 04:44.480 --> 04:45.100 #D6D9DC... 76 04:45.380 --> 04:47.690 how does that look? Very very subtle. 77 04:48.790 --> 04:51.400 But it's all these subtle things that make your site really stand out. 78 04:51.430 --> 04:55.360 The other thing I want to do is I don't want those square borders on the textarea... 79 04:55.360 --> 04:57.490 so let's just change the border-radius. 80 04:58.530 --> 05:03.000 And remember, we defined border-radius as a CSS variable. 81 05:03.180 --> 05:04.980 There we go, so it's slightly curved now. 82 05:05.760 --> 05:10.620 Let me just zoom in a little bit so you can kind of see what we're doing. Um, and then, let's change the minimum 83 05:10.620 --> 05:11.000 height... 84 05:11.390 --> 05:13.980 it's just a bit too narrow at the moment. 85 05:15.770 --> 05:16.790 Yep, that's better. 86 05:18.010 --> 05:20.740 Um, let's affect the margin-bottom... 87 05:22.430 --> 05:27.080 and again, we defined that in a variable. This is exactly why we have variables, by the way. It just... 88 05:27.080 --> 05:30.170 makes our life so, so much easier. Padding... 89 05:30.280 --> 05:31.760 let's give it 10px of padding. 90 05:33.640 --> 05:34.870 Um, and then the width. 91 05:36.890 --> 05:40.370 You know it, we've already defined the width... 92 05:42.900 --> 05:45.840 in a variable called --widget-width. 93 05:47.430 --> 05:48.990 (sound effect: Congratulations) 94 05:49.890 --> 05:50.500 So there we go... 95 05:50.620 --> 05:55.200 if we look at this, its taking shape. How nice does that look 😍? 96 05:56.540 --> 06:01.050 Right, everything starts fitting in, it looks like it's a form that's designed to be together. 97 06:01.580 --> 06:03.620 The one thing that isn't looking good now is this... 98 06:03.650 --> 06:07.340 "Describe yourself here - your hobbies and interests". That DIV isn't quite right... 99 06:07.610 --> 06:10.190 so let's go to our coding editor here... 100 06:10.700 --> 06:14.270 again, let's target the parent class. Within that... 101 06:14.270 --> 06:16.370 we gave that DIV a class of "description", didn't we? 102 06:19.030 --> 06:20.430 Firstly, let's change its color... 103 06:24.090 --> 06:26.490 font-size, let's give it 14px... 104 06:27.880 --> 06:28.720 margin-bottom... 105 06:32.170 --> 06:34.120 we put it in a variable called --margin-bottom. 106 06:36.030 --> 06:39.450 And let's also push it to the right a bit... 107 06:39.750 --> 06:41.070 let's give it a margin-left... 108 06:42.290 --> 06:44.220 of --label-width. 109 06:46.030 --> 06:46.870 Save that... 110 06:48.100 --> 06:53.180 go to our browser, and look how cool that is 😎. It just fits in. It's subtle. 111 06:53.680 --> 06:54.340 It's awesome 🤩. 112 06:54.970 --> 07:00.750 It's spazzy 🌟. Man, it's looking good! So, I hope you understand what it is we've done. 113 07:01.060 --> 07:04.000 Sorry that I'm going quite quick, but I think you're getting the feel for now... 114 07:04.000 --> 07:05.020 how CSS works. 115 07:05.410 --> 07:08.040 This textarea element is quite simple... 116 07:08.050 --> 07:11.040 we're going to be talking more about it in this course, later. 117 07:11.500 --> 07:16.930 But for now, you can already start seeing our form is falling into place. But, we're not quite done with... 118 07:16.930 --> 07:17.470 our form yet, are we? 119 07:18.280 --> 07:20.110 So, in the next lecture, let's continue.