Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Textarea placeholder Property

  • Last Updated : 15 Apr, 2019

The DOM Textarea placeHolder Property is used to set or return the value of the placeholder attribute of a textarea field. It specifies a short hint that describes the expected value of an input field / textarea. A short message or hint displayed before entering value in textarea.

Syntax:

  • It is used to Return the placeholder property.
    textareaObject.placeholder
  • It is used to Set the placeholder property.
    textareaObject.placeholder = text

Property Values:

  • text: It display a message / short-hint that describes the expected value of a input.

Return Value: It returns a string value which represents the short hint that describes the expected value of an input field.

Example-1: This example illustrates how to set the textarea placeholder Property.






<!DOCTYPE html>
<html>
  
<body>
    <center>
        <h1 style="font-size:25px;
                   font-style:italic;">
          GeeksForGeeks
      </h1>
        
        <h2 style="font-size:25px;
                   font-style:italic;">
          DOM Placeholder Textarea Property
      </h2>
      Give your Intro:
        
      <textarea id="GFG" 
                rows="4"
                cols="40"
                placeholder="Write something here"
                " about yourself...">
      </textarea>
      <br>
      <br>
        
      <button onclick="myGeeks()">Submit</button>
  
        <script>
            function myGeeks() {
                
                // Set hint for input field.
                document.getElementById(
                  "GFG").placeholder = 
                  "What is your Name?";
            }
        </script>
    </center>
  
</body>
  
</html>

Output:

  • Before Clicking On Button:
  • After Clicking On Button:

    Example-2: This example illustrates how to return the textarea placeholder property.




    <!DOCTYPE html>
    <html>
      
    <body>
        <center>
            <h1 style="font-size:25px;
                       font-style:italic;">
              GeeksForGeeks
          </h1>
            
            <h2 style="font-size:25px;
                       font-style:italic;">
              DOM Placeholder Textarea Property
          </h2
          Give your Intro:
            <textarea id="GFG"
                      rows="4" 
                      cols="40"
                      placeholder=
                      "Write something here 
                       about yourself...">
          </textarea>
            <br>
            <br>
            
            <button onclick="myGeeks()">
              Submit
          </button>
            
            <p id="sudo"></p>
            
            <script>
                function myGeeks() {
                    
                    // Short hint in input field.
                    var x = document.getElementById(
                      "GFG").placeholder;
                    
                    document.getElementById(
                      "sudo").innerHTML = x;
                }
            </script>
    </body>
      
    </html>

    Output :

    • Before Clicking On Button:
    • After Clicking On Button:

    Supported Browsers: The browser supported by Textarea Placeholder Property 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 :