Skip to content
Related Articles
Get the best out of our app
GFG App
Open App
geeksforgeeks
Browser
Continue

Related Articles

HTML | DOM Textarea cols Property

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like 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
Last Updated : 21 Jul, 2022
Like Article
Save Article
Similar Reads
Related Tutorials