Preview
Video Player
00:00
00:00
The Textarea Element
2:08Sometimes a single line of text isn’t enough and a simple input element won’t work. For example, maybe you have a contact form and you need a place for people to type a message. In those cases, it’s best to use a textarea.
Sometimes a single line of text isn't
0:00
enough and a simple input element won't
work.
0:02
For example, maybe you have a contact form
and
0:06
you need a place for people to type a
message.
0:09
In those cases, it's best to use the
textarea element.
0:12
In our sign-up form, we want to add a text
area
0:16
so that users can type in a short bio
about themselves.
0:20
I'm going to type in a textarea and then
explain it.
0:24
Just below our input elements, I'll type
in textarea,
0:27
and close it, and then I'll give it some
attributes.
0:33
I'll say id equals bio, and name
0:38
equals user_bio, and I'll save that out.
0:43
And, if we switch back to the browser and
refresh, you can
0:50
see that the text area allows us to type
in multiple lines.
0:55
So I'll say this is just a test bio, and
I'll copy and paste that a few times.
1:01
And when I do that, it will scroll to
multiple lines.
1:11
I can also resize the text area if I'd
like to do so.
1:16
So, let's switch back to our work space,
and let's take a look at this element.
1:21
As you can see, the textarea element is
different from the
1:26
input element, in that it is not a self
closing tag.
1:30
You need to type an opening and a closing
tag for it to work.
1:34
In most browsers, a text area is resizable
by the user, like I showed you previously.
1:40
There are ways to prevent this if you like
1:46
but, personally, I prefer to leave this
default behavior unmodified.
1:49
That way, if the user would like more
space to
1:55
type in any direction, they can adjust it
however they want.
1:58
Well, that's it.
2:02
Pretty easy, right?
2:03
Next, we'll learn how to add a submit
button to our form.
2:05