Welcome, welcome, welcome.
We're going to start off with a very cool form control called textarea.
And let's start right at the basics.
What is it? You might be thinking,
why do we even need a textarea when we have the input of type text?
And that's a valid question because the textarea is like a text input field, but it's on steroids.
It's just way bigger and better.
So why might it be useful?
Well, you may want to use the textarea when you want users to enter sizable amounts of free form text.
In other words, you don't want them just to have a one-liner.
You might want them to leave a review, a comment, tell a story.
etc
etc.
So that's when we might want to use the textarea.
And remember, we're using the textarea element rather than using the input element.
This is not an input element, but you already knew that. There are some nuances with the textarea.
The first one is that it does not support the value attribute.
And why doesn't it support the value attribute?
Well, we don't need it because the only reason you would put a value attribute when the page first
loads, is to put a default value associated with that widget.
But we can do that by inserting content in between the opening and closing textarea tags.
I'll show you what I mean in a second.
Don't worry.
The other nuance with textarea, and this one isn't a biggie, but textarea is a CSS replaced element.
What?
What is that?
Don't worry.
Let me explain.
A replaced element is an element whose representation is outside the scope of normal CSS.
An example is any tag that has its content replaced by an outside source.
Common tags are image, iframes, videos, right. With an image,
we can't take CSS and start changing the color attributes of that image, for example, because it's
content comes from outside of the document - it's "replaced", in other words.
But you might be thinking this textarea doesn't really have replaced content and you are right. Replaced
elements are also those that have predetermined intrinsic dimensions like width and height.
What? What does this mean,
that the textarea is a replaced element?
Normally replaced elements are harder to style with CSS, but with the textarea, as we'll see, it's
very easy to style
with CSS. We can pretty much do anything we want.
So it's kind of a weird one to me because it's defined as a replaced element by MDN, but it's like
not really a fully replaced element.
And I think the only reason MDN are defining it as a replaced element, is because it has intrinsic dimensions,
right?
The input just shows up, and it shows up with a certain size that's kind of suitable for a few lines
of text.
And this happens by default.
We don't have to apply any sizing properties to it.
And this doesn't mean that you shouldn't add other attributes and you shouldn't apply CSS to it.
It just means the browser renders this input type.
Sorry, not input
type ... this element, with a predetermined size by default. And this is not unique to the textarea element.
Look at an image element,
for example. When you load an image called yourImage.jpg, for example, we know that your jpg file
will be loaded onto the page, and that image tag will be replaced by yourImage.jpg,
and the size of that image will be its natural height and width dimensions.
"So then, Clyde, why do we even care that this is a replaced element?"
Well in this instance we actually don't care, right?
But there are a few subtleties that you need to bear in mind when it comes to CSS replaced elements.
And the biggest one with regards to the textarea element is that we cannot use CSS pseudo elements
::before and ::after. But for other elements it can be quite important.
For example, wouldn't it be cool to auto add captions to all your images?
We've got the information in the alt and title attributes anyway.
Right?
So in theory, if it wasn't a replaced element, we could access the inputs ::after pseudo element like
this and we could then access its content property,
and in that content property we could put the contents of the alt attribute in there.
That would be cool in theory, but we are not allowed doing this because it is a replaced element.
Anyway, I'm babbling way too much on this.
Let's hop back into the lecture.
So there we go.
It's kind of a weird one because it's a replaced element, but it doesn't really have that much implication
for us,
the fact that it is a replaced element.
The other cool thing with the textarea is that it has a drag handle to resize the box by default.
And before we move on to the next slide, I just I need to mention one more thing.
You would think because the textarea has an opening and closing tag, that we could place rich HTML content
in between those tags ... but we can't,
my dear students.
In fact, plain text will always be rendered within the elements.
Let me show you.
This is all I mean when I say that only plain text can be rendered within a textarea.
Here we go.
Here's an index file, and let's just create a textarea.
We don't need any attributes, right?
Let's just delete everything.
And of course, random text.
Okay, let's save this,
refresh the browser and there we go, plain text inside of the textarea.
Pretty straightforward.
But now you would think because we've got an opening tag and a closing tag that we could insert any
rich HTML element.
For example, what about if we wanted to, I don't know, put a nice heading in here saying welcome
and then maybe below that, we have a button of type submit, submit.
What happens?
Well, let's save this.
Refresh, and look at this.
It really doesn't do anything.
It just basically spits out the HTML text, but it doesn't actually render it in any useful way.
So that's all I meant by that.
The other thing worth mentioning, and I did mention already is that this textarea is a CSS replaced
element.
And this just means, for example, let's just have here an HTML tag, head, style, and then let's have
our body and let's just put our textarea within there.
This is what I wanted to show you.
Just one kind of nuance with a CSS replaced element.
If we have a div,
an empty div,
we can target CSS pseudo elements when it comes to that div, for example, we can target the div and
we can affect its ::after pseudo element and we can just put in some content, "after DIV". If we save
this, and refresh the screen, we actually see that content on the screen on the viewport.
They are a few nuances with using the ::after pseudo element.
For example, I can't copy, I can't highlight this "after DIV" text, it's just there. The text within a
textarea we can highlight.
Okay.
But anyway, this is what I wanted to show you.
I wanted to show you that we cannot do the same with textarea because it is a replaced element.
For example, if we target the textarea element and we try and do the same thing, I need a space after
that,
and for its content, let's just say "booooo". If we save this, refresh the page,
there is no boo. (sound effect: boooo)
I know, a dad joke, but it proves my point.
And my point is we cannot - because it's a CSS replaced element -
we cannot target the ::after and ::before pseudo elements.
I know this was a very interesting break, but let's jump back into the lecture.
So there we go.
I mean, that's the textarea element.
It's not that confusing, is it?