HTML DOM Input URL Object

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

Syntax

Following is the syntax −

Creating an <input> with type url.

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

Attributes

Here, “urlObject” can have the following attributes −

Attributes	Description
autocomplete	It provides suggestions based on previously typed text, if set to ‘ON’
autofocus	If set to true the url field is focused upon initial page load.
defaultValue	It sets/returns the default value of an url field
disabled	It defines if an url field is disabled/enabled
form	It returns a reference of enclosing form that contains the url field
maxLength	It returns/sets the value of maxLength attribute of an url field
name	It defines the value of name attribute of an url field
pattern	It returns/sets the value of pattern attribute of an url field
placeholder	It sets/returns a string generally used to give hints to user of what the input text will look like.
readOnly	It defines if the url field is changeable or not
required	It defines if the url field is compulsory to be filled in order to submit the form
size	It defines the value of the size attribute of url field
type	It returns the type of form element of an url field
value	It defines the value of the value attribute of an url field

Example

Let us see an example of Input URL form property −

Live Demo

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