Summary -

In this topic, we described about the URL Input type with detailed example.

The URL input type used for entering URL's or web addresses. Multiple attributes can be used to penetrate more than one URL.

If attribute is specified, browser will spontaneously carry out validation to ensure that that entered text matches the guideline format for URLs is inserted into the input box or not.

Syntax -

<input type="url" name="url" >

Example -

Below example describes about how to enter the URLs.
<!DOCTYPE html>
<html lang="en">
  <head>
      <title>HTML5 URL Input Type</title>
    <style>
        input[type="url"]:valid{
        outline: 3px solid green;
        }                        
        input[type="url"]:invalid
        outline: 3px solid red; 
        }                     
     </style>
     <script>
        function getValue() {
        var url = document.getElementById("myurl").value;
        alert(url);
        }                     
      </script>            
  </head>              
      <body>
          <form>
          <label for="myurl">Enter Website URL:</label>
          <input type="url" id="myurl" required>
          <button type="button" onclick="getValue();">Get Value</button>
          </form>                    
          <p><strong>Note</strong>: Enter URL in the form like
                      https://www.Chrome.com</p>
      </body> 
</html>

Output-

Note! Enter URL in the form like https://www.Chrome.com.
Browser Support

The following browsers and corresponding versions in the table that completely supports the url type.

Input Type Chrome Edge Firefox Safari Opera
Type=”url” Yes 10.0 Yes Yes 10.1