Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

HTML Forms

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

The Textarea Element

2: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.

The <textarea> element

  • 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.

Resources

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    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

      You need to sign up for Treehouse in order to set up Workspace

      Sign up