HTML Textarea: Step-by-Step Guide

The HTML textarea tag is used to make a text input field with multiple lines in a form. It is defined with the <textarea> tag and can hold an unlimited number of characters.

When you’re creating a form in HTML, you may decide that you want to accept a long string of text. For instance, if you are building a customer contact form for a retailer’s website, you may want to create a form element that accepts a detailed description of a problem the customer is facing.

That’s where the HTML <textarea> tag comes in. The <textarea> element is used to create a form element that provides multiline text editing features. This element is useful if you want to accept longer text responses from a user.

This tutorial will discuss, with a few examples, how to use the HTML <textarea> tag in your code. By the end of this tutorial, you’ll have all the knowledge you need to use the <textarea> tag like a pro!

HTML Textarea Tag

The <textarea> tag is used to define a multiline text input control field in a form. The <textarea> tag is capable of holding an unlimited number of characters.

The syntax for the <textarea> tag is as follows:

<textarea rows="10" cols="10">
Placeholder contents
</textarea>

Let’s break down our code. The <textarea> tag is used to define the text area box in our web form. Unlike <input> tags, the <textarea> tag must have both an opening (<textarea>) and a closing tag (</textarea>). This is because the default text the text area will show is contained between the two tags.

We have also specified two attributes in our example:

• rows instructs the browser on how many rows the text area should have by default. In other words, the rows attribute specifies the height of the textarea.
• cols is the number of columns the text area should have by default. In other words, the cols attribute specifies the width of the textarea.

Let’s suppose we are building a web form for a local clothing store. This form should allow customers to give feedback on their purchase. Because we want to give users room to submit detailed pieces of feedback, we are going to use a <textarea> HTML element to collect the user’s feedback.

We could use the following code to create the feedback form:

<form>
	<label for="feedback">What feedback do you have for us?</label><br /><br />
	<textarea rows="5" cols="30" id="feedback" name="feedback">
	Your feedback goes here.
	</textarea>
</form>

Our code returns:

Let’s break down our code. First, we declared a <form> tag which is used to define our web form. We then used a <label> tag to add a label to our page asking the user What feedback do you have for us?

Then, we used a <textarea> tag to create the feedback form. We specified four attributes, which were as follows:

• rows is set to 5 and stores the number of rows the field should have.
• cols is set to 30 and stores the number of columns the field should have.
• id is the unique identifier assigned to the form, which would be used when we submit the form.
• name is also used to identify the form and is required if we want to submit the form to a web server.

The <textarea> tag is supported by all major browsers.

The above example is a basic implementation of the <textarea> tag, but we can make our form more advanced.

HTML Textarea Examples

Let’s walk through two more advanced examples to illustrate how we can use the <textarea> tag to create text areas.

Minimum and Maximum Lengths

Let’s return to our clothing store example. Suppose we wanted to limit the number of characters a user submits to 1000, to encourage users to be concise when writing their feedback. We also want to set a minimum character limit to 10, to ensure users write something in the form.

That’s where the minlength and maxlength attributes come in. minlength is used to specify the minimum number of characters a user must write, and maxlength is used to specify that maximum number of characters a user can write in a form.

Here’s an example of our web form from earlier that has minlength and maxlength attributes set:

<form>
	<textarea rows="5" cols="30" id="feedback" name="feedback" minlength="10" maxlength="1000">
	Your feedback goes here.
	</textarea>
</form>

Our form returns:

There are no visible changes to our form, but if we try to submit our form, the contents of the form will be considered invalid if the user has written more than 1000 characters.

It’s important to note that, even if the user writes less than 10 characters in our form, the textarea will still be considered valid. If we want to enforce the minimum limit, we need to specify the required attribute.

Placeholder Text

In our above web form, we specify default text inside our form. This text states Your feedback goes here. While this is useful information, the user must delete the default text manually if they don’t want it in their form response.

If you want to specify a placeholder value, you can use the placeholder attribute. This attribute states a placeholder value which shows up when the form is empty. As soon as the user starts typing into the box, the placeholder disappears.

Here’s an example of a <textarea> which has the placeholder text Your feedback goes here.:

<textarea placeholder="Your feedback goes here." rows="5" cols="30">
</textarea>

Our code returns:

As you can see, the text Your feedback goes here. appears in the text box. However, when the user starts typing, this text disappears. We know that this text is a placeholder because it is in light gray, whereas default text, like we specified in our first example in this article, appears in fully black text (unless otherwise specified).

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

Find Your Bootcamp Match

HTML Textarea Attributes

The <textarea> tag accepts a number of tag-specific attributes. In addition, the <textarea> tag supports all global attributes in HTML.

Here are the tag-specific attributes supported by the <textarea> tag:

Conclusion

The HTML <textarea> tag is used to create multiline text input elements. These can be useful if you want to collect longer strings of data from a user.

This tutorial discussed, with reference to examples, how to use the <textarea> tag to create text areas. This tutorial also provided a reference table with the tag-specific attributes offered by the <textarea> tag. Now you’re ready to start using the <textarea> tag like a HTML expert!