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 −

AttributesDescription
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

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>

Output

This will produce the following output −

Before clicking ‘Get Co-founder’ button −

After checking ‘Get Co-founder’ button −

raja
Published on 26-Jul-2019 15:51:04
Advertisements