Skip to content
Related Articles

Related Articles

HTML | DOM Input Text placeholder Property
  • Difficulty Level : Basic
  • Last Updated : 15 Oct, 2020

The Input Text Placeholder property in HTML DOM is used to set or return the value of the placeholder attribute of a text field. The placeholder attribute specifies the short hint that describes the expected value of an input field. The short hint is displayed in the field before the user enters a value.
Syntax: 

  • It returns the Input Text Placeholder property.
textObject.placeholder
  • It is used to set Input Text Placeholder property.
textObject.placeholder = text

Property Value: It contains single value text which is used to define a short hint that describe a expected value of the Text Field.
Return Value: It returns a string value which represented a short hint that describes the expected value of the Text Field.

Example 1: This example illustrates how to return Input Text Placeholder property.  

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML DOM Input Text Placeholder Property
    </title>
</head>
 
<body style="text-align:center;">
 
    <h1>GeeksForGeeks</h1>
 
    <h2>DOM Input Text placeholder Property</h2>
 
    <input type="text" id="text_id" placeholder="GeeksForGeeks">
 
    <br><br>
     
    <button onclick="myGeeks()">Click Here!</button>
     
    <p id="GFG" style="font-size:25px;"></p>
  
     
    <!-- script to return the placeholder Property-->
    <script>
        function myGeeks() {
            var txt = document.getElementById("text_id").placeholder;
            document.getElementById("GFG").innerHTML = txt;
        }
    </script>
</body>
 
</html>                   

Output: 
Before Clicking the Button: 
 



After Clicking the Button: 
 

Example 2: This example illustrate how to set Input Text Placeholder Property. 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML DOM Input Text Placeholder Property
    </title>
</head>
 
<body style="text-align:center;">
 
    <h1>GeeksForGeeks</h1>
 
    <h2>DOM Input Text placeholder Property</h2>
 
    <input type="text" id="text_id" placeholder="GeeksForGeeks">
 
    <br><br>
     
    <button onclick="myGeeks()">Click Here!</button>
     
    <p id="GFG" style="font-size:20px;"></p>
  
     
    <!-- script to set the placeholder Property-->
    <script>
        function myGeeks() {
            var txt = document.getElementById("text_id").placeholder
                    = "HelloGeeks";
                     
            document.getElementById("GFG").innerHTML
                    = "The value of the placeholder attribute "
                      + "was changed to " + txt;
        }
    </script>
</body>
 
</html>                   

Output: 
Before Clicking the Button: 
 

After Clicking the Button: 
 

Supported Browsers: The browser supported by DOM Input Text placeholder property are listed below: 

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

 

My Personal Notes arrow_drop_up
Recommended Articles
Page :