HTML | DOM Input URL Object

The Input URL object in HTML DOM represents an <input> element with type = “url” attribute. The element with type url can be accessed by using getElementById() method.

Syntax:

 document.getElementById("id");

where id is assigned to the <input> tag.

Property Values:

list: It returns the reference of data list that contains the URL field.
form: It returns the reference of form that contains the URL field.
autocomplete: It is used to set or return the value of the autocomplete attribute of a URL field.
autofocus: It is used to set or return if the URL field should automatically get focus when the page loads.
defaultvalue: It is used set or return the default value of a URL field.
disabled: It is used to set or return whether a URL field is disabled or not.
maxLength: It is used to set or return the value of the maxlength attribute of a URL field.
name: It is used to set or return the value of the name attribute of a URL field.
pattern: It is used to set or return the value of the pattern attribute of a URL field.
placeholder: It is used to set or return the value of the placeholder attribute of a URL field.
readOnly: It is used to set or return whether the URL field is read-only or not.
required: It is used to set or return whether the URL field must be filled out before submitting a form.
size: It is used to set or return the value of size attribute of the URL field.
type: It returns the type of form element the URL field belongs.
value: It is used set or return the value of the value attribute of a URL field.

Example 1:

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

Output:
Before Click on the button:

After Click on the button:

Example 2:

<!DOCTYPE html>  
<html>  
    <head>  
        <title> 
            DOM Input URL Object 
        </title> 
    </head>  
      
    <body>  
        <h1>  
            GeeksForGeeks  
        </h1>  
              
        <h2>DOM Input URL Object </h2>  
                  
        <label> 
            <b>Enter URL</b> 
        </label> 
  
        <button type = "button" onclick = "myGeeks()">  
            Click 
        </button>  
              
        <p id="GFG"></p> 
              
        <script>  
            function myGeeks() {  
                var link = document.createElement("INPUT"); 
                link.setAttribute("type", "url"); 
                link.setAttribute("value", "http://www.geeksforgeeks.org"); 
                document.body.appendChild(link); 
            }  
        </script>  
    </body>  
</html>                     

Output:
Before Click on the button:

After Click on the button:

My Personal Notes

Recommended Posts: