Open In App
Related Articles

HTML DOM Textarea cols Property

Improve Article
Improve
Save Article
Save
Like Article
Like

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 that represents the width of a textarea in characters. 

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

html




<!DOCTYPE html>
<html>
 
<head>
    <title>DOM Textarea cols Property</title>
</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>
    <br>
    <button type="button" onclick="myGeeks()">
        Submit
    </button>
 
    <script>
        function myGeeks() {
            document.getElementById("GFG").cols = "50";
        }
    </script>
</body>
 
</html>


Output: 

text-dom1.gif

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

html




<!DOCTYPE html>
<html>
 
<head>
    <title>DOM Textarea cols Property</title>
</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>
    <br>
    <button type="button" onclick="myGeeks()">
        Submit
    </button>
 
    <p id="sudo"></p>
 
    <script>
        function myGeeks() {
            let g = document.getElementById("GFG").cols;
            document.getElementById(
                "sudo").innerHTML =
                "There are " + g +
                " columns in a textarea width.";
        }
    </script>
</body>
 
</html>


Output:

text-dom2.gif

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

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 28 Jun, 2023
Like Article
Save Article
Previous
Next
Similar Reads
Complete Tutorials