WEBVTT

0
00:00.570 --> 00:02.970
Welcome, welcome, welcome.

1
00:02.970 --> 00:07.970
We're going to start off with a very cool form control called textarea.

2
00:07.980 --> 00:10.560
And let's start right at the basics.

3
00:10.740 --> 00:13.080
What is it? You might be thinking, 

4
00:13.080 --> 00:18.570
why do we even need a textarea when we have the input of type text?

5
00:18.570 --> 00:24.840
And that's a valid question because the textarea is like a text input field, but it's on steroids.

6
00:24.840 --> 00:27.780
It's just way bigger and better.

7
00:27.780 --> 00:29.910
So why might it be useful?

8
00:29.910 --> 00:36.150
Well, you may want to use the textarea when you want users to enter sizable amounts of free form text.

9
00:36.150 --> 00:39.930
In other words, you don't want them just to have a one-liner.

10
00:39.960 --> 00:44.040
You might want them to leave a review, a comment, tell a story.

11
00:44.040 --> 00:44.640
etc

12
00:44.640 --> 00:45.240
etc.

13
00:45.240 --> 00:47.340
So that's when we might want to use the textarea.

14
00:47.340 --> 00:53.220
And remember, we're using the textarea element rather than using the input element.

15
00:53.250 --> 00:59.040
This is not an input element, but you already knew that. There are some nuances with the textarea.

16
00:59.040 --> 01:04.120
The first one is that it does not support the value attribute.

17
01:04.120 --> 01:06.250
And why doesn't it support the value attribute?

18
01:06.280 --> 01:11.350
Well, we don't need it because the only reason you would put a value attribute when the page first

19
01:11.350 --> 01:14.890
loads, is to put a default value associated with that widget.

20
01:14.890 --> 01:20.410
But we can do that by inserting content in between the opening and closing textarea tags.

21
01:20.410 --> 01:21.790
I'll show you what I mean in a second.

22
01:21.790 --> 01:22.450
Don't worry.

23
01:22.450 --> 01:31.150
The other nuance with textarea, and this one isn't a biggie, but textarea is a CSS replaced element.

24
01:31.180 --> 01:31.600
What?

25
01:31.630 --> 01:32.440
What?

26
01:32.470 --> 01:33.620
What is that?

27
01:33.640 --> 01:34.210
Don't worry.

28
01:34.240 --> 01:34.960
Don't worry.

29
01:34.990 --> 01:36.310
Let me explain.

30
01:36.400 --> 01:43.600
A replaced element is an element whose representation is outside the scope of normal CSS.

31
01:43.630 --> 01:48.700
An example is any tag that has its content replaced by an outside source.

32
01:48.700 --> 01:52.600
Common tags are image, iframes, videos, right. With an image, 

33
01:52.600 --> 01:58.270
we can't take CSS and start changing the color attributes of that image, for example, because it's

34
01:58.270 --> 02:02.700
content comes from outside of the document - it's "replaced", in other words.

35
02:02.700 --> 02:08.220
But you might be thinking this textarea doesn't really have replaced content and you are right. Replaced 

36
02:08.220 --> 02:15.000
elements are also those that have predetermined intrinsic dimensions like width and height.

37
02:15.030 --> 02:17.550
What? What does this mean,

38
02:17.550 --> 02:20.610
that the textarea is a replaced element?

39
02:20.970 --> 02:26.340
Normally replaced elements are harder to style with CSS, but with the textarea, as we'll see, it's

40
02:26.340 --> 02:27.510
very easy to style

41
02:27.510 --> 02:30.060
with CSS. We can pretty much do anything we want.

42
02:30.060 --> 02:37.680
So it's kind of a weird one to me because it's defined as a replaced element by MDN, but it's like

43
02:37.680 --> 02:40.170
not really a fully replaced element.

44
02:40.170 --> 02:47.370
And I think the only reason MDN are defining it as a replaced element, is because it has intrinsic dimensions,

45
02:47.370 --> 02:47.790
right?

46
02:47.790 --> 02:53.820
The input just shows up, and it shows up with a certain size that's kind of suitable for a few lines

47
02:53.820 --> 02:54.630
of text.

48
02:54.750 --> 02:56.310
And this happens by default.

49
02:56.310 --> 02:59.070
We don't have to apply any sizing properties to it.

50
02:59.070 --> 03:04.240
And this doesn't mean that you shouldn't add other attributes and you shouldn't apply CSS to it.

51
03:04.270 --> 03:08.500
It just means the browser renders this input type.

52
03:08.500 --> 03:09.280
Sorry, not input

53
03:09.310 --> 03:15.330
type ... this element, with a predetermined size by default. And this is not unique to the textarea element.

54
03:15.340 --> 03:17.020
Look at an image element,

55
03:17.020 --> 03:24.310
for example. When you load an image called yourImage.jpg, for example, we know that your jpg file

56
03:24.310 --> 03:30.490
will be loaded onto the page, and that image tag will be replaced by yourImage.jpg, 

57
03:30.640 --> 03:35.110
and the size of that image will be its natural height and width dimensions.

58
03:35.110 --> 03:39.370
"So then, Clyde, why do we even care that this is a replaced element?"

59
03:39.370 --> 03:41.530
Well in this instance we actually don't care, right?

60
03:41.530 --> 03:46.720
But there are a few subtleties that you need to bear in mind when it comes to CSS replaced elements.

61
03:46.720 --> 03:54.700
And the biggest one with regards to the textarea element is that we cannot use CSS pseudo elements

62
03:54.730 --> 03:59.530
::before and ::after. But for other elements it can be quite important.

63
03:59.560 --> 04:03.940
For example, wouldn't it be cool to auto add captions to all your images?

64
04:03.970 --> 04:08.320
We've got the information in the alt and title attributes anyway.

65
04:08.320 --> 04:08.860
Right?

66
04:08.860 --> 04:14.650
So in theory, if it wasn't a replaced element, we could access the inputs ::after pseudo element like

67
04:14.650 --> 04:17.470
this and we could then access its content property,

68
04:17.470 --> 04:22.000
and in that content property we could put the contents of the alt attribute in there.

69
04:22.000 --> 04:27.250
That would be cool in theory, but we are not allowed doing this because it is a replaced element.

70
04:27.250 --> 04:29.800
Anyway, I'm babbling way too much on this.

71
04:29.830 --> 04:31.480
Let's hop back into the lecture.

72
04:32.080 --> 04:32.830
So there we go.

73
04:32.830 --> 04:38.080
It's kind of a weird one because it's a replaced element, but it doesn't really have that much implication

74
04:38.080 --> 04:38.410
for us,

75
04:38.410 --> 04:40.360
the fact that it is a replaced element.

76
04:40.390 --> 04:46.600
The other cool thing with the textarea is that it has a drag handle to resize the box by default.

77
04:46.600 --> 04:50.320
And before we move on to the next slide, I just I need to mention one more thing.

78
04:50.320 --> 04:57.310
You would think because the textarea has an opening and closing tag, that we could place rich HTML content

79
04:57.310 --> 05:00.130
in between those tags ... but we can't,

80
05:00.150 --> 05:00.900
my dear students.

81
05:00.900 --> 05:05.580
In fact, plain text will always be rendered within the elements.

82
05:05.610 --> 05:06.570
Let me show you.

83
05:07.200 --> 05:11.780
This is all I mean when I say that only plain text can be rendered within a textarea.

84
05:11.790 --> 05:12.480
Here we go.

85
05:12.510 --> 05:15.900
Here's an index file, and let's just create a textarea.

86
05:15.900 --> 05:17.550
We don't need any attributes, right?

87
05:17.550 --> 05:19.320
Let's just delete everything.

88
05:19.620 --> 05:23.730
And of course, random text.

89
05:23.760 --> 05:24.900
Okay, let's save this,

90
05:24.900 --> 05:29.720
refresh the browser and there we go, plain text inside of the textarea.

91
05:29.730 --> 05:31.290
Pretty straightforward.

92
05:31.500 --> 05:37.470
But now you would think because we've got an opening tag and a closing tag that we could insert any

93
05:37.470 --> 05:39.360
rich HTML element.

94
05:39.360 --> 05:45.420
For example, what about if we wanted to, I don't know, put a nice heading in here saying welcome

95
05:45.420 --> 05:50.370
and then maybe below that, we have a button of type submit, submit.

96
05:50.400 --> 05:51.240
What happens?

97
05:51.270 --> 05:52.440
Well, let's save this.

98
05:53.740 --> 05:55.840
Refresh, and look at this.

99
05:56.050 --> 05:57.580
It really doesn't do anything.

100
05:57.850 --> 06:06.430
It just basically spits out the HTML text, but it doesn't actually render it in any useful way.

101
06:06.430 --> 06:07.720
So that's all I meant by that.

102
06:07.750 --> 06:12.550
The other thing worth mentioning, and I did mention already is that this textarea is a CSS replaced

103
06:12.550 --> 06:13.240
element.

104
06:13.240 --> 06:23.320
And this just means, for example, let's just have here an HTML tag, head, style, and then let's have

105
06:23.320 --> 06:27.160
our body and let's just put our textarea within there.

106
06:28.770 --> 06:30.300
This is what I wanted to show you.

107
06:30.480 --> 06:33.940
Just one kind of nuance with a CSS replaced element.

108
06:33.960 --> 06:35.280
If we have a div,

109
06:36.060 --> 06:37.080
an empty div,

110
06:37.880 --> 06:46.010
we can target CSS pseudo elements when it comes to that div, for example, we can target the div and

111
06:46.010 --> 06:53.660
we can affect its ::after pseudo element and we can just put in some content, "after DIV". If we save

112
06:53.660 --> 07:00.080
this, and refresh the screen, we actually see that content on the screen on the viewport.

113
07:00.110 --> 07:02.810
They are a few nuances with using the ::after pseudo element.

114
07:02.810 --> 07:08.660
For example, I can't copy, I can't highlight this "after DIV" text, it's just there. The text within a

115
07:08.660 --> 07:09.860
textarea we can highlight.

116
07:10.100 --> 07:10.400
Okay.

117
07:10.400 --> 07:12.200
But anyway, this is what I wanted to show you.

118
07:12.200 --> 07:16.910
I wanted to show you that we cannot do the same with textarea because it is a replaced element.

119
07:16.910 --> 07:23.510
For example, if we target the textarea element and we try and do the same thing, I need a space after

120
07:23.520 --> 07:24.260
that,

121
07:24.410 --> 07:31.460
and for its content, let's just say "booooo". If we save this, refresh the page,

122
07:31.460 --> 07:37.730
there is no boo.
(sound effect: boooo) 

123
07:37.730 --> 07:40.220
I know, a dad joke, but it proves my point.

124
07:40.220 --> 07:43.790
And my point is we cannot - because it's a CSS replaced element -

125
07:43.820 --> 07:47.990
we cannot target the ::after and ::before pseudo elements.

126
07:48.350 --> 07:53.840
I know this was a very interesting break, but let's jump back into the lecture.

127
07:54.350 --> 07:55.100
So there we go.

128
07:55.100 --> 07:57.620
I mean, that's the textarea element.

129
07:57.800 --> 07:59.720
It's not that confusing, is it?