HTML | DOM Input Email Placeholder Property - GeeksforGeeks

16 Apr, 2019
The DOM Input Email Placeholder Property is used to set or return the value of a placeholder attribute of an Email Field. The placeholder attribute specifies a short hint that describes the expected value of a input field / textarea. The short hint is displayed in the field before the user enters a value.
Syntax:
It is used to return the placeholder property.emailObject.placeholder
emailObject.placeholder
It is used to set the placeholder property.emailObject.placeholder = text
emailObject.placeholder = text
Property Value:
text: It defines a short hint that describes a expected value of the Email Field.
Return Value: It returns a string value which represents a short hint that describes the expected value of the Email Field.
Example-1: This example illustrates how to return the property.
<!DOCTYPE html> <html>       <head>     <title>         HTML DOM Input Email placeholder Property     </title> </head>       <body STYLE="TEXT-ALIGN:CENTER;">       <h1> GeeksforGeeks</h1>       <h2>DOM Input Email placeholder Property</h2>       E-mail: <input type="email" id="email" name="myGeeks"         placeholder="careers@geeksforgeeks.org"> <BR><br>      <button onclick="myGeeks()">         Click Here!     </button>           <p id="GFG" style="font-size:20px;color:green;"></p>           <!-- Script to access input element with             type email attribute -->    <script>         function myGeeks() {         <!--return the placeholder Property -->            var em = document.getElementById("email").placeholder;            document.getElementById("GFG").innerHTML = em;         }     </script> </body>   </html>                     
Output:Before clicking on the button:After clicking on the button:
Example-2 : This example illustrates how to set the property.
<!DOCTYPE html> <html>       <head>     <title>         HTML DOM Input Email placeholder Property     </title> </head>       <body STYLE="TEXT-ALIGN:CENTER;">       <h1> GeeksforGeeks</h1>       <h2>DOM Input Email placeholder Property</h2>       E-mail: <input type="email" id="email" name="myGeeks"         placeholder="careers@geeksforgeeks.org"> <BR><br>      <button onclick="myGeeks()">         Click Here!     </button>           <p id="GFG" style="font-size:20px;color:green;"></p>           <!-- Script to access input element with             type email attribute -->    <script>         function myGeeks() {         <!--setting the multiple Property -->            var em = document.getElementById("email").placeholder =                                           "Input Your Email Address";            document.getElementById("GFG").innerHTML               = "The value of the placeholder attribute was changed to :"                  + em;         }     </script> </body>   </html>                     
Output:Before clicking on the button:After clicking on the button:
Supported Browsers: The browser supported by DOM input Email 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.
shubham_singh
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)
How to Insert Form Data into Database using PHP ?
CSS to put icon inside an input element in a form
HTML Cheat Sheet - A Basic Guide to HTML
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript