Skip to content
Related Articles

Related Articles

HTML | DOM Textarea Object
  • Last Updated : 27 Sep, 2019

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.
  • 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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


Output:
Before Click on the Button:

After Click on the Button:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


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

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :