I want to now compare the differences between the textarea and the input where its type attribute is
set to text.
Firstly, the input is an empty element.
What?
Don't stress my dear students by an empty element.
I just mean it doesn't have an opening and closing tag.
And if you've done any form of HTML coding, you would have noticed that some elements do not require
a closing tag.
For instance, let's just write this div on the screen.
An attribute goes here, inner HTML goes in between the opening and closing tags, and then we've got
the closing div tag.
This is just a typical example of an HTML element, but what if we don't need the inner HTML?
Or let me say this rather, what if the HTML specification did not design the element to take inner HTML?
Well, in that case we can live without the inner HTML and the closing tag.
And we've all seen this, right?
We've seen images, for example, where it doesn't take the closing tag, a lot of those inputs,
well, all of those inputs we've discussed, don't take a closing tag.
They all take attributes.
Don't get me wrong, they still take attributes on those elements, but only on the opening tag element.
That's all I mean by an empty tag.
Nothing more, nothing less.
Let's jump back into it.
That's the first difference.
The input is an empty element, whereas the textarea is not.
Secondly, the textarea does not need a value attribute.
I mentioned this previously.
And what do I mean by this?
Well, let me give you a quick example.
Here is a very simple input with type of text.
And here we do have a value attribute. And we can use this value attribute to provide this input type
with default text.
How would we do that with the textarea element?
Well, simple.
We just put it in between the opening and closing tags.
We've achieved the same thing but without the value attribute and that's why it's actually not allowed
on the textarea.
If you do have it there, the browser just ignores it.
But don't let this fool you.
This does not mean that the textarea does not have a value property.
I'm talking about the value attribute here.
With JavaScript, you can still access the content of the textarea element with the value property.
Let me hop over to the console and show you. As I just said, I want to show you an example of the
value property, not using the value attribute - that doesn't work when it comes to textarea.
So, let me show you how it works with very very simple JavaScript.
Adios ðŸ‘‹.
Let's set up a very simple HTML file.
We need a body. In the body,
let's have a form. Within the form,
let's have a textarea element.
How's this?
We don't need an action on the form. Textarea,
let's give it a name of text
and an ID of content.
We can remove columns and rows, and it can just be an empty text element.
Let's refresh the page and there we go.
There's our empty textarea element.
Then, let's just add some breaks.
We can then put a button of type submit, a value of submit.
How does that look?
Yep, that looks pretty good.
Now what do I want to do?
I want to take the text that the user types, text that I type here,
and when the user hits submit, I want that text to display below on the viewport on the page.
How do we do that?
Well, let's create a few breaks here again and let's put that text in something and that something
can just be a div and we can give that div an ID of demo for example.
It can be empty for now.
So obviously if the user types random text and hits submit, nothing happens.
Oh bless me.
So how can we go about doing this?
Well, firstly you need to realize that when the user hits submit, I want to grab the value of that
textarea and then I want to put it into this div with ID of demo.
And in order to do that we have to use some JavaScript. And I'm going to be using ... let me just expand
this a bit.
There are a few ways we can do this.
I'm just going to use the quick and nasty inline event listener way.
It's not the best way.
If you've done my DOM courses, you'll know that.
But it's just very easy and very quick. With this button,
when a user hits submit, an "onclick" event is fired.
So I'm going to go "onclick".
And when it does fire, I want to execute a function.
And this function we're going to write in JavaScript. We can call it anything we want.
Let's call it showValue because that's what we want to do.
We want to show its value.
Now, the other thing, my dear students, is when a click event or let me say this, when a submit event
is fired on the form and a submit event will be fired here because a button has been clicked inside
a form element,
when that happens, the browser will automatically do a refresh.
It will send the information to a server.
I want to prevent that from happening.
Well, let me actually show you first what I mean.
Let's go to the browser.
The user's typed here.
Wally If the user hits submit and you see that the browser very quickly did a refresh and everything
is now back to its starting position, I don't want that to happen.
I want to prevent the default from happening and in order to do so, we need the actual event object
itself and we just need to use the event keyword in this function.
That's all we need to do and then we have access to it.
We can grab it later.
Let me show you what I mean.
So now we can go outside the form, we can wrap our JavaScript within, or we have to wrap it within
script tags and now we can write our JavaScript.
What's the only thing we need to do in this JavaScript file?
That's right.
We need to define our show value function.
And in order to do that we use the function keyword in JavaScript.
We then have to call it the same thing show value.
And then we've got the curly braces.
And this is where our business logic or code lies within these curly brackets.
Now, remember, we had that event object.
We have to access that event object and we can define it as anything.
The convention, when it comes to coding is to put it into a variable defined by E.
So that's our event.
And what I want to do is I want to grab that event and I want to prevent default.
And this prevent default method is given to us straight out of the box and it'll stop the page refresh
from occurring.
So if we go here and the user types text.
And hit submit.
The refresh doesn't happen.
How cool.
Okay.
And we don't want the refresh to happen because we want to take this text and we want to put it in a
div below.
Anyway, we've stopped the default from happening.
But now let's continue.
Remember how I said we cannot put a value attribute on text area?
You can't do something like this, blah, blah.
Okay.
That will just be ignored by the browser.
If we go to the browser, we don't see blah blah anyway.
But this does not mean we don't have access to the value property on the text area.
What I mean by that is let's define a variable in JavaScript using the let keyword and we can define
it as content and we can assign that the value of the content in that text area.
So what we do is we access the document object, get element by ID, The ID we gave the text area is
content.
And on this, my dear students, we have a property called value.
And this is just given to us by the Dom.
We have a whole lot of properties and methods on all these elements in HTML and one of them is the value
property.
And that, believe it or not, is the value of text within the text area.
It really is this simple.
Then all we have to do is we have to access that div and then change its inner HTML property to this
content.
That's all we have to do.
In order to do that, we can access the document.
Get element by ID.
Again, the ID we gave the div was demo and we want to change its inner HTML property and assign that
the value of content.
And I think that's it.
My dear students, if we go to the browser, right, and we type here, this is some text and the user
hits submit.
Boom.
We've just put that text below so you can see we still have access to the value property.
I don't want you to get confused when I say that we don't have the value attribute and this was just
proof.
I hope it's making a lot of sense.
Let's jump back into the lecture.
Okay, cool.
Have you got it?
So that's what I mean by the fact that text area does not need or it actually does not allow a value
attribute.
And last but not least, users can include hard line breaks with the text area element.
And all I mean by this is that when the user is typing in their long story or review or comment, they
can hit return on their keyboard and that will be submitted to the server when the data is submitted
with the form.
That's obviously not the case when we're dealing with the input of type text.
So there we go.
That's the difference between text area and input where type is set to text.