HTML | DOM Input URL placeholder Property

The DOM Input URL placeholder Property is used to set or return the value of the Placeholder attribute of a URL Field.The placeholder attribute specifies a short hint as a text in the input field that describes the expected value.

Syntax:

It is used to return the placeholder property.
```
urlObject.placeholder
```
It is used to set the placeholder property.
```
urlObject.placeholder = text
```

Property Value:

text: It defines a short hint that describe a expected value of the url Field.

Return Value: It returns a String value which represented a short hint that describes the expected value of the URL Field.

Example-1: This Example illustrates how to return the property.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        DOM Input URL placeholder Property 
    </title> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green;">  
                GeeksForGeeks  
            </h1> 
  
        <h2> 
          DOM Input URL placeholder Property 
      </h2> 
  
        <label for="uname"
               style="color:green"> 
            <b>Enter URL</b> 
        </label> 
  
        <input type="url"
               id="gfg"
               placeholder="Enter URL" 
               size="20"
               name="myGeeks"> 
  
        <br> 
        <br> 
  
        <button type="button" 
                onclick="geeks()"> 
            Click 
        </button> 
  
        <p id="GFG" 
           style="color:green; 
                  font-size:25px;"> 
      </p> 
  
        <script> 
            function geeks() { 
                
                var link =  
                    document.getElementById( 
                      "gfg").placeholder; 
                
                document.getElementById( 
                  "GFG").innerHTML = link; 
            } 
        </script> 
    </center> 
</body> 
  
</html> 

Output:
Before Clicking On Button:

After Clicking On Button:

Example-2: This Example ilustrates how to set the Property.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        DOM Input URL placeholder Property 
    </title> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green;">  
                GeeksForGeeks  
            </h1> 
  
        <h2> 
          DOM Input URL placeholder Property 
      </h2> 
  
        <label for="uname" 
               style="color:green"> 
            <b>Enter URL</b> 
        </label> 
  
        <input type="url" 
               id="gfg"
               placeholder="Enter URL" 
               size="20" 
               name="myGeeks"> 
  
        <br> 
        <br> 
  
        <button type="button" 
                onclick="geeks()"> 
            Click 
        </button> 
  
        <p id="GFG" 
           style="color:green; 
                  font-size:25px;"> 
      </p> 
  
        <script> 
            function geeks() { 
                
                var link =  
                    document.getElementById( 
                      "gfg").placeholder =  
                    "GeeksForGeeks.com"; 
                
                document.getElementById( 
                  "GFG").innerHTML = link; 
            } 
        </script> 
    </center> 
</body> 
  
</html> 

Output:

Before Clicking On Button:

After Clicking On Button:

Supported Browsers: The browser supported by DOM input URL Placeholder Property are listed below:

Google Chrome
Internet Explorer 10.0 +
Firefox
Opera
Safari

My Personal Notes

Recommended Posts: