WEBVTT 0 00:00.230 --> 00:06.080 It's time to move on to our third topic, and that is, I want to discuss the important attributes when 1 00:06.080 --> 00:08.640 it comes to the textarea element. 2 00:08.660 --> 00:13.080 As you can see, I put 5 very important ones on the screen. 3 00:13.100 --> 00:15.370 Let me just quickly briefly touch on each one. 4 00:15.380 --> 00:17.450 Firstly, we've got the "cols" attribute. 5 00:17.480 --> 00:18.560 What is that about? 6 00:19.610 --> 00:21.110 Very, very simple. 7 00:21.140 --> 00:24.640 Cols just specifies the visible columns. 8 00:24.650 --> 00:28.190 In other words, the width of the text widget. 9 00:28.220 --> 00:33.170 The default value is 20 characters in width, just in case you were wondering. 10 00:34.520 --> 00:38.120 So that's cols. And "rows" is pretty obvious. 11 00:38.120 --> 00:44.990 I probably didn't have to go into this, but it specifies the visible rows aka the height of the text 12 00:44.990 --> 00:49.100 widget, and the default value for that is 2 rows. 13 00:50.090 --> 00:50.840 That's cols. 14 00:50.840 --> 00:51.740 That's rows. 15 00:51.740 --> 00:54.680 But ... what is this wrap property? 16 00:54.680 --> 00:56.090 That looks very weird. 17 00:57.900 --> 01:05.130 The wrap property refers to how your form should react when words reach the end of each row in the text 18 01:05.130 --> 01:05.580 field. 19 01:05.580 --> 01:10.050 And there are a few different values this wrap property can have. 20 01:10.080 --> 01:14.730 Firstly, we can set it to off. And if you set it to off, basically your words are just going to keep 21 01:14.730 --> 01:18.840 going in one long line for a very, very long time. 22 01:19.560 --> 01:21.390 Not very great, is it? 23 01:22.050 --> 01:25.410 So that's the first value you can set for your wrap attribute. 24 01:25.410 --> 01:30.960 The second value you can set for your attribute is soft, and this is the default value. 25 01:30.990 --> 01:32.190 What does it look like? 26 01:32.220 --> 01:33.600 Well, it just looks like this 27 01:33.630 --> 01:40.920 if we have lorem ipsum text. It basically just wraps an entire word onto a new line when it cannot 28 01:40.920 --> 01:42.870 fit into that area. 29 01:43.170 --> 01:44.190 Makes sense, right? 30 01:44.370 --> 01:47.700 And then the other value we can have is hard. 31 01:47.730 --> 01:51.090 We've got soft, which is default, and then we've got hard. 32 01:51.120 --> 01:54.600 But if we look at this in more detail, and if I show you what it looks like, 33 01:55.750 --> 01:58.810 it kind of looks exactly the same as soft, doesn't it? 34 01:58.930 --> 02:04.750 I mean, we can see it's also taking a whole word and it's putting it onto a new line when it won't 35 02:04.750 --> 02:05.170 fit. 36 02:05.170 --> 02:07.570 So then, let me ask you the question ... 37 02:07.570 --> 02:11.650 What is the difference between wrap of "soft" and wrap of "hard"? 38 02:11.680 --> 02:12.880 Well, let me show you an example. 39 02:12.880 --> 02:17.680 Let's just have three lines of nice pretty words and compare soft and hard wrap. 40 02:17.680 --> 02:20.470 And let's do this by hopping over to the console quickly. 41 02:20.470 --> 02:26.420 I just want to submit this data to a server using a GET request, and let's see what happens. 42 02:26.440 --> 02:27.160 So here we are, 43 02:27.160 --> 02:31.630 we've got a very simple form with a textarea inside here. And all I want to do is compare soft wrap and 44 02:31.630 --> 02:35.380 hard wrap. In order to actually compare it, I want to submit a GET request. 45 02:35.770 --> 02:39.460 We know that the default method on the form element is a GET. 46 02:39.460 --> 02:42.520 So it's the same as me writing this, right? 47 02:42.670 --> 02:48.730 And then in order to actually submit this form, we do need a button of type submit, submit. 48 02:49.420 --> 02:49.660 Okay. 49 02:49.660 --> 02:53.800 And I had to specify the name attribute because if I don't, it won't be sent to the server. 50 02:53.800 --> 02:55.700 So that was mandatory for me to do. 51 02:55.700 --> 03:00.650 I've just called it "text". And we know this is wrap=soft by default, right? 52 03:00.950 --> 03:05.390 It's the same as us putting the attribute of wrap=soft. 53 03:05.540 --> 03:10.040 And if we go to the browser, if we now hit submit, what's going to happen? 54 03:10.950 --> 03:11.580 Let's see. 55 03:11.610 --> 03:14.370 We have three lines of nice words. 56 03:14.370 --> 03:21.300 And do you notice after [the words] "nice" and after "soft", we've just got a space. 57 03:22.290 --> 03:28.800 We know URL encoding replaces a space with a + sign. So we can see that, that's the default approach 58 03:28.800 --> 03:30.840 with a wrap of soft. 59 03:30.840 --> 03:36.960 And what's interesting is if we go and type into this textarea box, with wrap of soft, and I hit return 60 03:36.960 --> 03:43.040 when we hit submit it is going to submit that return data to a server. 61 03:43.050 --> 03:44.130 So let's hit submit. 62 03:44.160 --> 03:53.700 We can see that the [keyboard] "return" is URL encoded to %0D%0A. And we've 63 03:53.700 --> 03:55.590 just submitted two returns. 64 03:56.070 --> 03:56.430 Okay. 65 03:56.430 --> 03:59.730 But that's by-and-by. That is wrap of soft. 66 03:59.730 --> 04:05.130 What happens when we go to our coding editor and we just change this wrap property to hard, we save 67 04:05.130 --> 04:08.580 it, we go to our browser, we refresh and we hit submit. 68 04:09.360 --> 04:12.960 Notice that the line breaks after nice, after soft. 69 04:12.990 --> 04:13.800 What's going to happen? 70 04:13.800 --> 04:17.490 Let's hit submit and after the word nice, we've got a return now. 71 04:17.490 --> 04:21.060 And after the word soft, we have a hard return. 72 04:21.060 --> 04:24.900 So that's really the only difference between a wrap of soft and a wrap of hard. 73 04:24.930 --> 04:28.320 Quite frankly, I always just use the default wrap of soft. 74 04:28.320 --> 04:31.860 But anyway, at least now you know where the differences lie. 75 04:32.370 --> 04:33.020 There you go. 76 04:33.030 --> 04:34.350 Hope it's making a lot more sense. 77 04:34.350 --> 04:40.920 As you can see, the real difference is that the hard wrap submits "returns", hard line breaks. 78 04:41.730 --> 04:43.590 That's just a bit of FYI. 79 04:45.000 --> 04:45.720 What's next? 80 04:45.720 --> 04:48.030 Well, we've discussed columns, rows, wraps. 81 04:48.060 --> 04:50.880 Let's now just look at the length property quickly. 82 04:50.880 --> 04:52.110 What is this about? 83 04:52.140 --> 04:59.600 We can specify the min-length and the max-length of our textarea. And it's pretty intuitive. 84 04:59.610 --> 05:03.720 The min length specifies the minimum amount of characters that the textarea should contain. 85 05:03.720 --> 05:07.500 This just means, by the way, that the browser DOES perform front end validation. 86 05:07.500 --> 05:12.790 If you specify a minimum length of a story that a user has to give you as 20 characters, and they only 87 05:12.790 --> 05:16.450 type two characters, they will not be allowed to submit the form. 88 05:16.450 --> 05:23.620 Also, we'll be able to access CSS pseudo classes like :invalid and :valid to style the textarea element. 89 05:23.620 --> 05:24.460 Pretty useful. 90 05:24.490 --> 05:29.500 We've also got maxlength and that specifies the maximum amount of characters that the textarea can 91 05:29.500 --> 05:33.040 contain. And you can combine these with other attributes. 92 05:33.040 --> 05:38.500 For example, if you combine this with required, you have some basic form validation straight out of 93 05:38.500 --> 05:39.190 the box 📦. 94 05:40.980 --> 05:43.430 And then we do have other attributes, right? 95 05:43.440 --> 05:45.210 These are not the only attributes we have. 96 05:45.210 --> 05:53.190 We've got tons of others that are also common to other form inputs, things like autocomplete, autofocus, 97 05:53.190 --> 05:54.630 remember we discussed autofocus? 98 05:54.630 --> 05:56.130 It's actually not that nice. 99 05:56.130 --> 05:59.880 You don't want to force focusing on any widgets if you can avoid it. 100 05:59.910 --> 06:02.490 We've got other attributes like disabled, 101 06:03.610 --> 06:07.480 placeholder, readonly, required, 102 06:07.480 --> 06:08.260 etc, 103 06:08.260 --> 06:08.930 etc. 104 06:08.950 --> 06:09.430 Pretty, 105 06:09.460 --> 06:10.570 pretty intuitive. 106 06:10.600 --> 06:11.440 But let's move on. 107 06:11.440 --> 06:14.830 So we've discussed the important attributes, and I think you've got the hang of that now.