HTML DOM Input URL Object

The HTML DOM Input URL Object represents an input HTML element with type url.


Following is the syntax −

Creating an <input> with type url.

var urlObject = document.createElement(“input”);
urlObject.type = “url”;


Here, “urlObject” can have the following attributes −

autocompleteIt provides suggestions based on previously typed text, if set to ‘ON’
autofocusIf set to true the url field is focused upon initial page load.
defaultValueIt sets/returns the default value of an url field
disabledIt defines if an url field is disabled/enabled
formIt returns a reference of enclosing form that contains the url field
maxLengthIt returns/sets the value of maxLength attribute of an url field
nameIt defines the value of name attribute of an url field
patternIt returns/sets the value of pattern attribute of an url field
placeholderIt sets/returns a string generally used to give hints to user of what the input text will look like.
readOnlyIt defines if the url field is changeable or not
requiredIt defines if the url field is compulsory to be filled in order to submit the form
sizeIt defines the value of the size attribute of url field
typeIt returns the type of form element of an url field
valueIt defines the value of the value attribute of an url field


Let us see an example of Input URL form property −

 Live Demo

<!DOCTYPE html>
<title>Input URL form</title>
   form {
      margin: 0 auto;
      text-align: center;
   * {
      padding: 2px;
   input[type="button"] {
      border-radius: 10px;
<form id="Larry Page">
<label for="URLSelect">URL :
<input type="URL" id="URLSelect" size="25">
<input type="button" onclick="getform()" value="Get Co-founder">
<div id="divDisplay"></div>
   var divDisplay = document.getElementById("divDisplay");
   var inputURL = document.getElementById("URLSelect");
   function getform() {
      if(inputURL.value !== '')
         divDisplay.textContent = 'Co-founder: ';
         divDisplay.textContent = 'Please enter valid URL';


This will produce the following output −

Before clicking ‘Get Co-founder’ button −

After checking ‘Get Co-founder’ button −

Updated on 30-Jul-2019 22:30:26