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 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
You need to sign up for Treehouse in order to download course files.Sign up