Languages
[Edit]
EN

HTML - change textarea size

0 points
Created by:
user4838
368

In this article, we would like to show you how to change textarea size in HTML.

Quick solution:

// ONLINE-RUNNER:browser;

<textarea name="textarea" style="width:300px; height:100px;">Type something here...</textarea>

or:

// ONLINE-RUNNER:browser;

<textarea name="textarea-name" cols="30" rows="3"></textarea>

Note:

It is recommended to use style attribute or CSS to change the textarea size.

 

1. Using style attribute

In this example, we use textarea element's style attribute to set its width and hight.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <textarea name="textarea" style="width:300px; height:100px;">Type something here...</textarea>
</body>
</html>

2. Using cols and rows

In this example, we use cols and rows attributes to set the textarea element width and height.

  1. cols - the number of visible characters width of the textarea - it is average characters width (if not specified, the default value is 20),
  2. rows - the number of visible text lines.

Runnable example:

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <textarea name="textarea" cols="30" rows="5">Type something here...</textarea>
</body>
</html>

3. Using CSS

You can also change the textarea element size using CSS.

The solution is described in details in the following article: 

See also

  1. How to autogrow textarea with CSS3?

  2. JavaScript - how to make textarea autogrow?

References

  1. <textarea> - HTML | MDN
Native Advertising
ūüöÄ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

‚̧ԳŹūüíĽ ūüôā

Join