It's time to move on to our third topic, and that is, I want to discuss the important attributes when
it comes to the textarea element.
As you can see, I put 5 very important ones on the screen.
Let me just quickly briefly touch on each one.
Firstly, we've got the "cols" attribute.
What is that about?
Very, very simple.
Cols just specifies the visible columns.
In other words, the width of the text widget.
The default value is 20 characters in width, just in case you were wondering.
So that's cols. And "rows" is pretty obvious.
I probably didn't have to go into this, but it specifies the visible rows aka the height of the text
widget, and the default value for that is 2 rows.
That's cols.
That's rows.
But ... what is this wrap property?
That looks very weird.
The wrap property refers to how your form should react when words reach the end of each row in the text
field.
And there are a few different values this wrap property can have.
Firstly, we can set it to off. And if you set it to off, basically your words are just going to keep
going in one long line for a very, very long time.
Not very great, is it?
So that's the first value you can set for your wrap attribute.
The second value you can set for your attribute is soft, and this is the default value.
What does it look like?
Well, it just looks like this
if we have lorem ipsum text. It basically just wraps an entire word onto a new line when it cannot
fit into that area.
Makes sense, right?
And then the other value we can have is hard.
We've got soft, which is default, and then we've got hard.
But if we look at this in more detail, and if I show you what it looks like,
it kind of looks exactly the same as soft, doesn't it?
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
fit.
So then, let me ask you the question ...
What is the difference between wrap of "soft" and wrap of "hard"?
Well, let me show you an example.
Let's just have three lines of nice pretty words and compare soft and hard wrap.
And let's do this by hopping over to the console quickly.
I just want to submit this data to a server using a GET request, and let's see what happens.
So here we are,
we've got a very simple form with a textarea inside here. And all I want to do is compare soft wrap and
hard wrap. In order to actually compare it, I want to submit a GET request.
We know that the default method on the form element is a GET.
So it's the same as me writing this, right?
And then in order to actually submit this form, we do need a button of type submit, submit.
Okay.
And I had to specify the name attribute because if I don't, it won't be sent to the server.
So that was mandatory for me to do.
I've just called it "text". And we know this is wrap=soft by default, right?
It's the same as us putting the attribute of wrap=soft.
And if we go to the browser, if we now hit submit, what's going to happen?
Let's see.
We have three lines of nice words.
And do you notice after [the words] "nice" and after "soft", we've just got a space.
We know URL encoding replaces a space with a + sign. So we can see that, that's the default approach
with a wrap of soft.
And what's interesting is if we go and type into this textarea box, with wrap of soft, and I hit return
when we hit submit it is going to submit that return data to a server.
So let's hit submit.
We can see that the [keyboard] "return" is URL encoded to %0D%0A. And we've
just submitted two returns.
Okay.
But that's by-and-by. That is wrap of soft.
What happens when we go to our coding editor and we just change this wrap property to hard, we save
it, we go to our browser, we refresh and we hit submit.
Notice that the line breaks after nice, after soft.
What's going to happen?
Let's hit submit and after the word nice, we've got a return now.
And after the word soft, we have a hard return.
So that's really the only difference between a wrap of soft and a wrap of hard.
Quite frankly, I always just use the default wrap of soft.
But anyway, at least now you know where the differences lie.
There you go.
Hope it's making a lot more sense.
As you can see, the real difference is that the hard wrap submits "returns", hard line breaks.
That's just a bit of FYI.
What's next?
Well, we've discussed columns, rows, wraps.
Let's now just look at the length property quickly.
What is this about?
We can specify the min-length and the max-length of our textarea. And it's pretty intuitive.
The min length specifies the minimum amount of characters that the textarea should contain.
This just means, by the way, that the browser DOES perform front end validation.
If you specify a minimum length of a story that a user has to give you as 20 characters, and they only
type two characters, they will not be allowed to submit the form.
Also, we'll be able to access CSS pseudo classes like :invalid and :valid to style the textarea element.
Pretty useful.
We've also got maxlength and that specifies the maximum amount of characters that the textarea can
contain. And you can combine these with other attributes.
For example, if you combine this with required, you have some basic form validation straight out of
the box ðŸ“¦.
And then we do have other attributes, right?
These are not the only attributes we have.
We've got tons of others that are also common to other form inputs, things like autocomplete, autofocus,
remember we discussed autofocus?
It's actually not that nice.
You don't want to force focusing on any widgets if you can avoid it.
We've got other attributes like disabled,
placeholder, readonly, required,
etc,
etc.
Pretty,
pretty intuitive.
But let's move on.
So we've discussed the important attributes, and I think you've got the hang of that now.