WEBVTT 0 00:00.080 --> 00:07.580 I want to now compare the differences between the textarea and the input where its type attribute is 1 00:07.580 --> 00:08.810 set to text. 2 00:08.810 --> 00:12.170 Firstly, the input is an empty element. 3 00:12.200 --> 00:13.460 What? 4 00:13.580 --> 00:17.450 Don't stress my dear students by an empty element. 5 00:17.450 --> 00:21.140 I just mean it doesn't have an opening and closing tag. 6 00:21.260 --> 00:27.470 And if you've done any form of HTML coding, you would have noticed that some elements do not require 7 00:27.470 --> 00:29.060 a closing tag. 8 00:29.060 --> 00:31.880 For instance, let's just write this div on the screen. 9 00:32.300 --> 00:40.700 An attribute goes here, inner HTML goes in between the opening and closing tags, and then we've got 10 00:40.700 --> 00:42.920 the closing div tag. 11 00:42.950 --> 00:49.580 This is just a typical example of an HTML element, but what if we don't need the inner HTML? 12 00:49.910 --> 00:58.870 Or let me say this rather, what if the HTML specification did not design the element to take inner HTML? 13 00:58.880 --> 01:04.290 Well, in that case we can live without the inner HTML and the closing tag. 14 01:04.290 --> 01:05.640 And we've all seen this, right? 15 01:05.640 --> 01:10.700 We've seen images, for example, where it doesn't take the closing tag, a lot of those inputs, 16 01:10.710 --> 01:14.580 well, all of those inputs we've discussed, don't take a closing tag. 17 01:14.580 --> 01:15.990 They all take attributes. 18 01:16.020 --> 01:21.450 Don't get me wrong, they still take attributes on those elements, but only on the opening tag element. 19 01:21.540 --> 01:23.310 That's all I mean by an empty tag. 20 01:23.310 --> 01:24.510 Nothing more, nothing less. 21 01:24.510 --> 01:25.770 Let's jump back into it. 22 01:26.130 --> 01:27.390 That's the first difference. 23 01:27.390 --> 01:30.840 The input is an empty element, whereas the textarea is not. 24 01:31.740 --> 01:35.580 Secondly, the textarea does not need a value attribute. 25 01:35.580 --> 01:37.640 I mentioned this previously. 26 01:37.650 --> 01:39.120 And what do I mean by this? 27 01:39.150 --> 01:41.310 Well, let me give you a quick example. 28 01:42.020 --> 01:45.550 Here is a very simple input with type of text. 29 01:45.560 --> 01:52.190 And here we do have a value attribute. And we can use this value attribute to provide this input type 30 01:52.190 --> 01:53.690 with default text. 31 01:53.690 --> 01:56.990 How would we do that with the textarea element? 32 01:57.020 --> 01:58.190 Well, simple. 33 01:58.190 --> 02:00.970 We just put it in between the opening and closing tags. 34 02:00.980 --> 02:06.710 We've achieved the same thing but without the value attribute and that's why it's actually not allowed 35 02:06.710 --> 02:07.670 on the textarea. 36 02:07.670 --> 02:10.580 If you do have it there, the browser just ignores it. 37 02:10.580 --> 02:12.500 But don't let this fool you. 38 02:12.500 --> 02:18.170 This does not mean that the textarea does not have a value property. 39 02:18.350 --> 02:20.300 I'm talking about the value attribute here. 40 02:20.330 --> 02:28.190 With JavaScript, you can still access the content of the textarea element with the value property. 41 02:28.220 --> 02:33.440 Let me hop over to the console and show you. As I just said, I want to show you an example of the 42 02:33.440 --> 02:39.290 value property, not using the value attribute - that doesn't work when it comes to textarea. 43 02:39.290 --> 02:42.390 So, let me show you how it works with very very simple JavaScript. 44 02:42.500 --> 02:43.190 Adios 👋. 45 02:43.220 --> 02:45.770 Let's set up a very simple HTML file. 46 02:46.220 --> 02:48.290 We need a body. In the body, 47 02:48.290 --> 02:50.180 let's have a form. Within the form, 48 02:50.180 --> 02:53.090 let's have a textarea element. 49 02:53.960 --> 02:54.620 How's this? 50 02:54.620 --> 02:57.740 We don't need an action on the form. Textarea, 51 02:58.070 --> 03:00.380 let's give it a name of text 52 03:00.950 --> 03:03.890 and an ID of content. 53 03:03.920 --> 03:08.900 We can remove columns and rows, and it can just be an empty text element. 54 03:09.050 --> 03:10.850 Let's refresh the page and there we go. 55 03:11.090 --> 03:13.760 There's our empty textarea element. 56 03:13.760 --> 03:15.780 Then, let's just add some breaks. 57 03:15.800 --> 03:20.990 We can then put a button of type submit, a value of submit. 58 03:21.930 --> 03:22.650 How does that look? 59 03:22.680 --> 03:23.970 Yep, that looks pretty good. 60 03:24.000 --> 03:25.220 Now what do I want to do? 61 03:25.230 --> 03:30.240 I want to take the text that the user types, text that I type here, 62 03:30.240 --> 03:38.310 and when the user hits submit, I want that text to display below on the viewport on the page. 63 03:38.310 --> 03:39.060 How do we do that? 64 03:39.060 --> 03:45.480 Well, let's create a few breaks here again and let's put that text in something and that something 65 03:45.480 --> 03:49.860 can just be a div and we can give that div an ID of demo for example. 66 03:49.860 --> 03:51.150 It can be empty for now. 67 03:51.150 --> 03:55.560 So obviously if the user types random text and hits submit, nothing happens. 68 03:55.610 --> 03:57.420 Oh bless me. 69 03:57.420 --> 03:59.010 So how can we go about doing this? 70 03:59.010 --> 04:07.740 Well, firstly you need to realize that when the user hits submit, I want to grab the value of that 71 04:07.740 --> 04:12.360 textarea and then I want to put it into this div with ID of demo. 72 04:12.360 --> 04:17.190 And in order to do that we have to use some JavaScript. And I'm going to be using ... let me just expand 73 04:17.190 --> 04:17.670 this a bit. 74 04:17.700 --> 04:19.470 There are a few ways we can do this. 75 04:19.470 --> 04:24.010 I'm just going to use the quick and nasty inline event listener way. 76 04:24.040 --> 04:25.030 It's not the best way. 77 04:25.030 --> 04:26.860 If you've done my DOM courses, you'll know that. 78 04:26.860 --> 04:29.650 But it's just very easy and very quick. With this button, 79 04:29.650 --> 04:33.310 when a user hits submit, an "onclick" event is fired. 80 04:33.310 --> 04:35.320 So I'm going to go "onclick". 81 04:36.060 --> 04:39.300 And when it does fire, I want to execute a function. 82 04:39.300 --> 04:43.380 And this function we're going to write in JavaScript. We can call it anything we want. 83 04:43.410 --> 04:46.410 Let's call it showValue because that's what we want to do. 84 04:46.440 --> 04:47.670 We want to show its value. 85 04:47.910 --> 04:55.710 Now, the other thing, my dear students, is when a click event or let me say this, when a submit event 86 04:55.710 --> 05:01.620 is fired on the form and a submit event will be fired here because a button has been clicked inside 87 05:01.620 --> 05:02.610 a form element, 88 05:02.640 --> 05:07.580 when that happens, the browser will automatically do a refresh. 89 05:07.590 --> 05:09.530 It will send the information to a server. 90 05:09.540 --> 05:11.460 I want to prevent that from happening. 91 05:11.460 --> 05:13.200 Well, let me actually show you first what I mean. 92 05:13.200 --> 05:14.280 Let's go to the browser. 93 05:14.520 --> 05:15.690 The user's typed here. 94 05:15.720 --> 05:22.170 Wally If the user hits submit and you see that the browser very quickly did a refresh and everything 95 05:22.170 --> 05:25.740 is now back to its starting position, I don't want that to happen. 96 05:25.740 --> 05:32.460 I want to prevent the default from happening and in order to do so, we need the actual event object 97 05:32.460 --> 05:37.840 itself and we just need to use the event keyword in this function. 98 05:37.840 --> 05:40.120 That's all we need to do and then we have access to it. 99 05:40.150 --> 05:41.560 We can grab it later. 100 05:41.560 --> 05:42.640 Let me show you what I mean. 101 05:42.640 --> 05:48.510 So now we can go outside the form, we can wrap our JavaScript within, or we have to wrap it within 102 05:48.520 --> 05:50.860 script tags and now we can write our JavaScript. 103 05:50.890 --> 05:53.800 What's the only thing we need to do in this JavaScript file? 104 05:55.660 --> 05:56.170 That's right. 105 05:56.170 --> 05:58.900 We need to define our show value function. 106 05:59.650 --> 06:03.370 And in order to do that we use the function keyword in JavaScript. 107 06:03.400 --> 06:06.250 We then have to call it the same thing show value. 108 06:07.520 --> 06:09.470 And then we've got the curly braces. 109 06:09.470 --> 06:14.850 And this is where our business logic or code lies within these curly brackets. 110 06:14.870 --> 06:18.200 Now, remember, we had that event object. 111 06:18.230 --> 06:21.800 We have to access that event object and we can define it as anything. 112 06:22.160 --> 06:27.080 The convention, when it comes to coding is to put it into a variable defined by E. 113 06:27.440 --> 06:28.580 So that's our event. 114 06:28.580 --> 06:33.860 And what I want to do is I want to grab that event and I want to prevent default. 115 06:33.860 --> 06:38.930 And this prevent default method is given to us straight out of the box and it'll stop the page refresh 116 06:38.930 --> 06:39.710 from occurring. 117 06:39.710 --> 06:43.520 So if we go here and the user types text. 118 06:44.150 --> 06:45.380 And hit submit. 119 06:45.620 --> 06:47.450 The refresh doesn't happen. 120 06:47.450 --> 06:48.410 How cool. 121 06:48.620 --> 06:48.980 Okay. 122 06:48.980 --> 06:53.270 And we don't want the refresh to happen because we want to take this text and we want to put it in a 123 06:53.270 --> 06:54.470 div below. 124 06:55.330 --> 06:57.490 Anyway, we've stopped the default from happening. 125 06:58.060 --> 07:00.520 But now let's continue. 126 07:00.580 --> 07:03.700 Remember how I said we cannot put a value attribute on text area? 127 07:03.730 --> 07:06.800 You can't do something like this, blah, blah. 128 07:06.970 --> 07:07.270 Okay. 129 07:07.270 --> 07:08.980 That will just be ignored by the browser. 130 07:08.980 --> 07:11.980 If we go to the browser, we don't see blah blah anyway. 131 07:12.590 --> 07:17.330 But this does not mean we don't have access to the value property on the text area. 132 07:17.690 --> 07:23.810 What I mean by that is let's define a variable in JavaScript using the let keyword and we can define 133 07:23.810 --> 07:28.850 it as content and we can assign that the value of the content in that text area. 134 07:29.120 --> 07:35.150 So what we do is we access the document object, get element by ID, The ID we gave the text area is 135 07:35.150 --> 07:35.930 content. 136 07:36.750 --> 07:41.520 And on this, my dear students, we have a property called value. 137 07:41.520 --> 07:43.710 And this is just given to us by the Dom. 138 07:43.710 --> 07:48.840 We have a whole lot of properties and methods on all these elements in HTML and one of them is the value 139 07:48.840 --> 07:49.500 property. 140 07:49.500 --> 07:54.450 And that, believe it or not, is the value of text within the text area. 141 07:54.480 --> 07:56.130 It really is this simple. 142 07:56.160 --> 08:03.000 Then all we have to do is we have to access that div and then change its inner HTML property to this 143 08:03.000 --> 08:03.570 content. 144 08:03.600 --> 08:04.620 That's all we have to do. 145 08:04.620 --> 08:07.200 In order to do that, we can access the document. 146 08:08.030 --> 08:09.170 Get element by ID. 147 08:09.170 --> 08:15.440 Again, the ID we gave the div was demo and we want to change its inner HTML property and assign that 148 08:15.440 --> 08:17.060 the value of content. 149 08:17.690 --> 08:18.940 And I think that's it. 150 08:18.950 --> 08:26.270 My dear students, if we go to the browser, right, and we type here, this is some text and the user 151 08:26.270 --> 08:27.170 hits submit. 152 08:27.820 --> 08:28.540 Boom. 153 08:29.200 --> 08:34.420 We've just put that text below so you can see we still have access to the value property. 154 08:34.420 --> 08:39.670 I don't want you to get confused when I say that we don't have the value attribute and this was just 155 08:39.670 --> 08:40.360 proof. 156 08:40.360 --> 08:42.400 I hope it's making a lot of sense. 157 08:42.400 --> 08:43.870 Let's jump back into the lecture. 158 08:43.960 --> 08:44.650 Okay, cool. 159 08:44.680 --> 08:45.550 Have you got it? 160 08:45.790 --> 08:52.300 So that's what I mean by the fact that text area does not need or it actually does not allow a value 161 08:52.300 --> 08:53.050 attribute. 162 08:53.380 --> 09:00.970 And last but not least, users can include hard line breaks with the text area element. 163 09:01.120 --> 09:08.110 And all I mean by this is that when the user is typing in their long story or review or comment, they 164 09:08.110 --> 09:12.970 can hit return on their keyboard and that will be submitted to the server when the data is submitted 165 09:12.970 --> 09:13.570 with the form. 166 09:13.570 --> 09:17.800 That's obviously not the case when we're dealing with the input of type text. 167 09:17.800 --> 09:18.310 So there we go. 168 09:18.310 --> 09:22.690 That's the difference between text area and input where type is set to text.