How to Set the Size of the <textarea> Element

Solutions with HTML and CSS

There are two ways of setting the size of the HTML <textarea> element. You can use HTML or CSS.

In HTML, you can use the <span class="attribute">cols</span> and <span class="attribute">rows</span> attributes. Let’s see this solution in use.

Example of setting the textarea size with HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form action="/form/submit" method="post">
      <textarea name="textarea" rows="5" cols="40">Write something here</textarea>
      <br />
      <input type="submit" name="submitInfo" value="Submit" />
    </form>
  </body>
</html>

Try it Yourself »

Result

<div class="demo p-2.5 mt-1 mb-5 not-prose"> <form action-xhr="/form/submit" method="post"> <textarea cols="40" name="textarea" rows="5">Write something here</textarea>
<input name="submitInfo" type="submit" value="Submit">``</input> </form> </div>In CSS, you need to use the width and height properties for the <textarea> element.

Example of setting the textarea size with CSS:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      textarea {
        width: 250px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <form action="/form/submit" method="post">
      <textarea> </textarea>
      <br />
      <input type="submit" name="submitInfo" value="Submit" />
    </form>
  </body>
</html>

Try it Yourself »

How to make a textarea in HTML the same size as its contents?

To make a textarea in HTML the same size as its contents, you can use JavaScript to adjust the height of the textarea dynamically based on its content. Here's an example of how to do it using jQuery:

How to make a textarea in HTML the same size as its contents?

<!DOCTYPE html>
<html>
  <head>
    <title>Resizable Textarea</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
      textarea {
        min-height: 50px;
        padding: 10px;
        font-size: 16px;
        line-height: 1.5;
        resize: none; /* disable resizing */
      }
    </style>
  </head>
  <body>
    <textarea id="myTextarea"></textarea>
    <script>
      $(document).ready(function () {
        $("#myTextarea").on("input", function () {
          this.style.height = "auto";
          this.style.height = this.scrollHeight + 10 + "px";
        });
      });
    </script>
  </body>
</html>

Try it Yourself »

In this example, we first define some CSS styles for the textarea to set its minimum height, padding, font size, line height, and to disable resizing. Then, we use jQuery to attach an event handler to the textarea's input event. This event fires whenever the textarea's content changes.

Inside the event handler, we first set the textarea's height to "auto" to reset it to its default height. Then, we set its height to the scroll height (which includes the content height and any padding or borders) plus an additional 10 pixels of padding. This ensures that the textarea's height is always large enough to fit its content.

By doing this, the textarea will dynamically adjust its height to match the height of its content as the user types or pastes into it.

How to set a fixed height and width for a textarea element in HTML?

You can set a fixed height and width for a textarea element in HTML by using the rows and cols attributes. The rows attribute sets the number of visible text lines in the textarea, while the cols attribute sets the number of visible characters per line.

To disable the resizing capability of the textarea, you can use the resize property in CSS and set it to none.

Here's an example of how to set a fixed height and width for a textarea element:

<!DOCTYPE html>
<html>
  <head>
    <title>Resizable Textarea</title>
  </head>
  <body>
    <textarea rows="10" cols="50" style="resize: none;"></textarea>
  </body>
</html>

Try it Yourself »

In this example, the textarea has a fixed height of 10 rows and a fixed width of 50 characters per row. The resize property is set to none to disable resizing.