The Input URL object represents an HTML <input> element with type="url".
| Property | Description |
|---|---|
| autocomplete | Sets or gets the autocomplete attribute of a URL field |
| autofocus | Sets autofocus to let URL field focus when the page loads |
| defaultValue | Sets or gets the default value of a URL field |
| disabled | Enable or disable a URL field |
| form | Get the form that contains the URL field |
| list | Get the datalist that contains the URL field |
| maxLength | Sets or gets the maxlength attribute of a URL field |
| name | Sets or gets the name attribute of a URL field |
| pattern | Sets or gets the pattern attribute of a URL field |
| placeholder | Sets or gets the placeholder attribute of a URL field |
| readOnly | Sets or gets whether the URL field is read-only |
| required | Sets or gets whether the URL field must be filled before submitting a form |
| size | Sets or gets the size attribute of the URL field |
| type | Get the type of the URL field |
| value | Sets or gets the value attribute of a URL field |
The Input URL object supports the standard properties and events.
We can access an <input> element with type="url" by using getElementById().
<!DOCTYPE html>
<html>
<body>
<input type="url" id="myURL" value="http://www.google.com">
<button onclick="myFunction()">test</button>
<p id="demo"></p>
<script>
function myFunction() {<!-- ww w .j av a 2s. com-->
var x = document.getElementById("myURL").value;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
The code above is rendered as follows:
We can create an <input> element with type="url" by using the document.createElement() method.
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">test</button>
<script>
function myFunction() {<!-- ww w. ja va2 s . co m-->
var x = document.createElement("INPUT");
x.setAttribute("type", "url");
x.setAttribute("value", "http://www.google.com");
document.body.appendChild(x);
}
</script>
</body>
</html>
The code above is rendered as follows: