Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Textarea Object

  • Last Updated : 14 Apr, 2021

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>                   

Output: 
Before Click on the Button: 
 

After Click on the Button: 
 

Supported Browsers: The browser supported by DOM Textarea Object are listed below: 
 

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :