Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
The Textarea Element2:08 with Nick Pettit
Sometimes 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.
- <textarea> - The textarea element accepts multiple lines of text from the user. Most browsers will render the textarea element with a widget to allow for resizing the editing area.
Sometimes 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 the textarea element.
In our sign-up form, we want to add a text area
so that users can type in a short bio about themselves.
I'm going to type in a textarea and then explain it.
Just below our input elements, I'll type in textarea,
and close it, and then I'll give it some attributes.
I'll say id equals bio, and name
equals user_bio, and I'll save that out.
And, if we switch back to the browser and refresh, you can
see that the text area allows us to type in multiple lines.
So I'll say this is just a test bio, and I'll copy and paste that a few times.
And when I do that, it will scroll to multiple lines.
I can also resize the text area if I'd like to do so.
So, let's switch back to our work space, and let's take a look at this element.
As you can see, the textarea element is different from the
input element, in that it is not a self closing tag.
You need to type an opening and a closing tag for it to work.
In most browsers, a text area is resizable by the user, like I showed you previously.
There are ways to prevent this if you like
but, personally, I prefer to leave this default behavior unmodified.
That way, if the user would like more space to
type in any direction, they can adjust it however they want.
Well, that's it.
Pretty easy, right?
Next, we'll learn how to add a submit button to our form.
You need to sign up for Treehouse in order to download course files.Sign up