HTML DOM Textarea Object

HTMLDOMFront End TechnologyWeb Development

The HTML DOM Textarea Object represent the <textarea> element of an HTML document.

Create Textarea object

Syntax

Following is the syntax −

document.createElement(“TEXTAREA”);

Properties of Textarea object

PropertyExplanation
autofocusIt returns and modify whether the text area should automatically get focused or not when the page loads.
defaultValueIt returns and modify the default value of a text area element in an HTML document.
colsIt returns and modify the value of cols attribute of a text area element in an HTML document.
disabledIt returns and modify whether the text area element in an HTML document is disabled or not
formIt returns the cite of the form which enclose the text area.
maxLengthIt returns and modify the value of maxLength attribute of a text area element in an HTML document.
nameIt returns and modify the value of name attribute of a text area element in an HTML document.
placeholderIt returns and modify the value of placeholder attribute of a text area element in an HTML document.
readOnlyIt returns and modify whether the content of a text area element in an HTML document should be read only or not.
requiredIt returns and modify the value of the required attribute of a text area in an HTML document.
rowsIt returns and modify the value of rows attribute of a text area element in an HTML document.
typeIt returns the type of the form element the text area is in an HTML document.
valueIt returns and modify the content of a text area element in an HTML document.
wrapIt returns and modify the value of wrap attribute of a text area element in an HTML document.

Methods of Textarea object

MethodExplanation
select()It selects the content of a text area in an HTML document.

Let us see an example of Textarea object:

Example

Live Demo

<!DOCTYPE html>
<html>
<style>
   body {
      color: #000;
      background: lightseagreen;
      height: 100vh;
      text-align: center;
   }
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 2px;
      width: 40%;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1rem auto;
   }
</style>
<body>
<h1>DOM Textarea Object Demo</h1>
<button onclick="create()" class="btn">Create Textarea</button>
<script>
   function create() {
      var ta = document.createElement("TEXTAREA");
      ta.innerHTML = "Hi! I'm a textarea element in an HTML document with some dummy text.";
      ta.setAttribute('rows', '8');
      document.body.appendChild(ta);
   }
</script>
</body>
</html>

Output

Click on “Create Textarea” button to create a textarea element.

raja
Published on 20-Sep-2019 10:45:06
Advertisements