HTML | DOM Input Text placeholder Property

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
 
shubham_singh
arorakashish0911
HTML-DOM
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
REST API (Introduction)
CSS to put icon inside an input element in a form
Design a Tribute Page using HTML & CSS
Types of CSS (Cascading Style Sheet)
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to fetch data from an API in ReactJS ?
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array