HTML Form Text Area

HTML text inputs are great for when you want to gather a short amount of information, such as a name, but they can be very limited when it comes to collecting large amounts of text, such as on a user feedback form. Due to the limited size of a text input, it would be very difficult for the user to review what they have written. textarea inputs are perfectly suited for this type of use because they allow you to display a box, of a specified width and height, for the user to type in.

To use an HTML text area we need to use the textarea tag rather than the usual input tag. When setting up a textarea we need to specify the number of rows and columns it should contain, using the rows and cols attributes:

<textarea cols="50" rows="5"></textarea>

This code will display the following text box:

You may have noticed something odd about this tag - we have used both an opening and closing tag even though the textarea isn't surrounding any more HTML code. So why do we need both tags rather than just one? Well, the simple answer is because we can include text within a textarea if we wish. This will then be shown in the text box by default, although the user can clear it if they wish.

<textarea name="comment" cols="50" rows="5">
Enter your comment here!
</textarea>

This would give us the following result: