HTML DOM Textarea cols Property

Last Updated : 28 Jun, 2023

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:

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>