HTML | DOM Input Text placeholder Property
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 >w3wiki</ h1 > < h2 >DOM Input Text placeholder Property</ h2 > < input type = "text" id = "text_id" placeholder = "w3wiki" > < br >< br > < button onclick = "myBeginner()" >Click Here!</ button > < p id = "GFG" style = "font-size:25px;" ></ p > <!-- script to return the placeholder Property--> < script > function myBeginner() { 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 >w3wiki</ h1 > < h2 >DOM Input Text placeholder Property</ h2 > < input type = "text" id = "text_id" placeholder = "w3wiki" > < br >< br > < button onclick = "myBeginner()" >Click Here!</ button > < p id = "GFG" style = "font-size:20px;" ></ p > <!-- script to set the placeholder Property--> < script > function myBeginner() { var txt = document.getElementById("text_id").placeholder = "HelloBeginner"; 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 1 and above
- Edge 12 and above
- Firefox 1 and above
- Opera
- Safari 1 and above
Contact Us