Skip to content
Related Articles

Related Articles

HTML | DOM Input URL Object
  • Last Updated : 27 Mar, 2019

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 arrow_drop_up
Recommended Articles
Page :