HTML | DOM Input URL Object

Last Updated : 25 Aug, 2022

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.

Methods 

  • focus() : It is used to get focus to the input URL field.
  • blur () : It is used to remove focus from the URL field.
  • select () : It is used to select the content of the Input URL field.

Example 1: 

HTML 
<!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: 

HTML 
<!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", "https://www.geeksforgeeks.org");
            document.body.appendChild(link);
        } 
    </script>
</body>
</html>

Output: 
Before Click on the button: 

After Click on the button: 

Supported Browsers:

  • Google Chrome 1+
  • Edge 12+
  • Firefox
  • Opera 11+
  • Safari 
Comment

Explore