Skip to content
Related Articles

Related Articles

HTML | DOM Textarea cols Property

Improve Article
Save Article
  • Last Updated : 21 Jul, 2022
Improve Article
Save Article

The DOM Textarea cols Property is used to set or return the value of the cols attribute of a textarea field. The cols attribute how many average-width characters should fit on a single line.

Syntax:

  • It is used to return the cols property.
textareaObject.cols
  • It is used to Set the cols property:
textareaObject.cols = number

Property Values:

  • number: It specifies the width of the textarea fields. It has a Default value i.e 20.

Return Value: It returns a numeric value which represent the width of a textarea in characters. 

Example-1: HTML program to illustrate set the DOM Textarea cols Property

html




<!DOCTYPE html>
<html>
 
<head>
    <title>DOM Textarea cols Property</title>
    <style>
        h1,
        h2 {
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green;">
            GeeksforGeeks
        </h1>
 
    <h2>
            DOM Textarea cols Property
        </h2>
 
    <!-- Below textarea is assigned a cols value 25
            That is, 25 characters will fit in a line -->
    <textarea id="GFG" rows="4" cols="25">
        A computer science portal for geeks.
    </textarea>
    <button type="button" onclick="myGeeks()">Submit</button>
 
    <script>
        function myGeeks() {
            document.getElementById("GFG").cols = "100";
        }
    </script>
</body>
 
</html>

Output: 

Before Clicking On Button:

  

After Clicking On Button:

  

Example-2: HTML program to illustrate return the DOM Textarea cols Property

html




<!DOCTYPE html>
<html>
 
<head>
    <title>DOM Textarea cols Property</title>
    <style>
        h1,
        h2 {
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green;">
            GeeksforGeeks
        </h1>
 
    <h2>
            DOM Textarea cols Property
        </h2>
 
    <!-- Below textarea is assigned a cols value 25
            That is, 25 characters will fit in a line -->
    <textarea id="GFG" rows="4" cols="25">
        A computer science portal for geeks.
    </textarea>
   
    <button type="button" onclick="myGeeks()">Submit</button>
    <p id="sudo"></p>
   
    <script>
        function myGeeks() {
            var g = document.getElementById("GFG").cols;
            document.getElementById(
              "sudo").innerHTML =
              "There are " + g +
              " columns in a textarea width.";
        }
    </script>
</body>
 
</html>

Output:

Before Clicking On Button:

  

After Clicking On Button:

  

Note: Both “textareaObject.cols” and “style.width” work as same. 

Supported Browsers: The browser supported by Textarea cols Property are listed below:

  • Google Chrome 1 and above
  • Edge 12 and above
  • Internet Explorer 6 and above
  • Firefox 1 and above
  • Opera 12.1 and above
  • Safari 4 and above

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!