HTML | DOM Textarea Object

Last Updated : 21 Jul, 2022

The Textarea Object in HTML DOM is used to represent the HTML <textarea> Element. The textarea element can be accessed by using getElementById() method.
Syntax:

document.getElementById("ID");

Where ID is assigned to the <textarea> element.
Property Values:

autofocus: It is used to set or return whether the element should get focus when the page loads.
cols: It is used to set or return the value of this cols attribute of a textarea Element.
defaultvalue: It is used to set or return the defaultvalue of the textarea element.
disabled: It is used to set or return the value of the disabled attribute of the textarea element.
form: It is used to return the reference of the form that contains the textarea field.
maxLength: It is used to set or return the value of the maxattribute of a textarea field.
name: It is used to set or return the name attribute of a textarea field.
placeholder: It is used to set or return the value of the placeholder attribute of a textarea field.
readOnly: It is used to return the value of the readonly attribute of a textarea field.
required: It is used to set or return whether the input element must be filled before submitting the form.
type: rows: It is used to set or return the value of the type attribute of a textareafield
value: It is used to set or return the content of a textarea field.
wrap: It is used to return the value of the wrap attribute of a textarea field.

Methods:

select(): It is used to select all the entire contents present in the textarea field.

Example 1: This example describes the getElementById() method to access the <textare> element.

html

<!DOCTYPE html> 
<html> 
    <head> 
        <title>
            HTML DOM Textarea Object
        </title> 
    </head> 
    
    <body style = "text-align:center">
             
        <h1 style = "color: green;">
            GeeksforGeeks
        </h1> 
        
        <h2>DOM Textarea Object</h2> 

        <!--A disabled textarea-->
        <textarea id = "myGeeks"> 
            GeeksForGeeks.A computer science portal for Geeks.
        </textarea> 
        
        <br>
        
        <button onclick = "Geeks()">
            Submit
        </button>
        
        <p id = "sudo"></p>



        <script>
            function Geeks() {
                var x = document.getElementById("myGeeks").value;
                document.getElementById("sudo").innerHTML = x;
            }
        </script>
    </body> 
</html>

Output:
Before Click on the Button:

After Click on the Button:

Example 2: Textarea Object can be created by using the document.createElement method.

html

<!DOCTYPE html> 
<html> 
    <head> 
        <title>
            HTML DOM Textarea Object
        </title> 
    </head>
    
    <body style = "text-align:center">     
    
        <h1 style = "color: green;">
            GeeksforGeeks
        </h1> 
        
        <h2>DOM Textarea Object</h2> 
        
        <button onclick = "Geeks()">
            Submit
        </button>
        
        <!-- script to create textarea -->
        <script>
            function Geeks() {
                
                // textarea tag is created 
                var g = document.createElement("TEXTAREA");
                
                var f = document.createTextNode(
                "GeeksForGeeks.A computer science portal for Geeks.");
                
                g.appendChild(f);
                document.body.appendChild(g);
            }
        </script>
    </body> 
</html>