Skip to content
Related Articles

Related Articles

HTML | DOM Input Email Placeholder Property
  • Difficulty Level : Basic
  • Last Updated : 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
  • It is used to set the placeholder property.
    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
My Personal Notes arrow_drop_up
Recommended Articles
Page :