ADVERTISEMENT
ADVERTISEMENT

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

Learn, what is better to use CSS width/height or HTML cols/rows to size a textarea?
Submitted by Apurva Mathur, on June 19, 2022

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:

Example 1: Size a textarea

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:

Example 2: Size a textarea

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:

Example 3: Size a textarea

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?

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.

CSS Tutorial & Examples »


ADVERTISEMENT
ADVERTISEMENT


Comments and Discussions!



ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.