HTML | DOM Textarea Object
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
- Edge 12 and above
- Internet Explorer
- Firefox
- Opera
- Safari
Please Login to comment...