Should I size a textarea with CSS width / height or HTML cols / rows attributes?

In this tutorial, we will learn what is better to use CSS width/height or HTML cols/rows to size a textarea? By Apurva Mathur Last updated : July 22, 2023

Answer: Use CSS width / height

Both the methods mentioned above help us to attain the target, we can use any method but I feel it's good to use the height/width method because we get one special value with height (i.e.) "auto". Changing height="auto" will change the height as per the content. If the content is less the height will vary according to the content written inside the <textarea> and vice versa whereas rows and cols do not provide this "auto" value, we need to give a numerical value to both.

What is <textarea>?

When we want the user's response in multiple lines like remarks, suggestions, feedback, etc in a form, then we define <textarea>. <textarea> can contain many lines as you want, we can also set the size of this <textarea> as per the situation.

Let's see how we can describe the <textarea> in a code?

<html>
   <head></head>
   <body>
      <label>A text area</label>
      <textarea  name="textarea"  >
      THIS IS THE DEFAULT TEXTAREA
      </textarea>
   </body>
</html>

Output:

Whenever you want to define <textarea> in your code, just write your content between the <textarea> tag and it will be displayed in the <textarea> format.

Note: It's important to close the <textarea> tag once you write your content.

As you can see in the output the default <textarea> is really small, what if we want to change its size? We can modify its size according to our needs. There are two ways in which we can do these modifications.

Method 1: Using height and width

<html>
   <head></head>
   <body>
      <label>A text area</label>
      <textarea  name="textarea"  style="height: 30%;width: 50%;" >
      THIS IS THE TEXTAREA WITH HEIGHT: 30%;WIDTH: 50%
      </textarea>
   </body>
</html>

Output:

Just specify the height and width according to the need under the style tag. Here, in this code, I've used height=30% and width=50%, you can change it as your wish.

Method 2: Using rows and columns

<html>
   <head></head>
   <body>
      <label>A text area</label>
      <textarea  name="textarea"  rows="7" cols="80" >
      THIS IS THE TEXTAREA WITH HEIGHT: 30%;WIDTH: 50%
      </textarea>
   </body>
</html>

Output:

You can also modify the height of this <textarea> by using rows and cols. The only thing to remember is that we don't specify these rows and cols under the <style> tag. We directly write this where you define your <textarea>.

Now the question arises what we should use to size a textarea width/height or cols/rows?

CSS Examples »

How can I 'disable' zoom on a mobile web page?

How to remove the underline for anchors (links)?