HTML | DOM Input URL Object
The Input URL object in HTML DOM represents an <input> element with type = “url” attribute. The element with type url can be accessed by using getElementById() method.
Syntax:
document.getElementById("id");
where id is assigned to the <input> tag.
Property Values:
- list: It returns the reference of data list that contains the URL field.
- form: It returns the reference of form that contains the URL field.
- autocomplete: It is used to set or return the value of the autocomplete attribute of a URL field.
- autofocus: It is used to set or return if the URL field should automatically get focus when the page loads.
- defaultvalue: It is used set or return the default value of a URL field.
- disabled: It is used to set or return whether a URL field is disabled or not.
- maxLength: It is used to set or return the value of the maxlength attribute of a URL field.
- name: It is used to set or return the value of the name attribute of a URL field.
- pattern: It is used to set or return the value of the pattern attribute of a URL field.
- placeholder: It is used to set or return the value of the placeholder attribute of a URL field.
- readOnly: It is used to set or return whether the URL field is read-only or not.
- required: It is used to set or return whether the URL field must be filled out before submitting a form.
- size: It is used to set or return the value of size attribute of the URL field.
- type: It returns the type of form element the URL field belongs.
- value: It is used set or return the value of the value attribute of a URL field.
Methods
- focus() : It is used to get focus to the input URL field.
- blur () : It is used to remove focus from the URL field.
- select () : It is used to select the content of the Input URL field.
Example 1:
HTML
<!DOCTYPE html> < html > < head > < title > DOM Input URL Object </ title > </ head > < body > < center > < h1 style = "color:green;" > w3wiki </ h1 > < h2 >DOM Input URL Object</ h2 > < label for = "uname" style = "color:green" > < b >Enter URL</ b > </ label > < input type = "url" id = "gfg" placeholder = "Enter URL" > < br >< br > < button type = "button" onclick = "Beginner()" > Click </ button > < p id = "GFG" ></ p > < script > function Beginner() { var link = document.getElementById("gfg").value; document.getElementById("GFG").innerHTML = link; } </ script > </ center > </ body > </ html > |
Output:
Before Click on the button:
After Click on the button:
Example 2:
HTML
<!DOCTYPE html> < html > < head > < title > DOM Input URL Object </ title > </ head > < body > < h1 > w3wiki </ h1 > < h2 >DOM Input URL Object </ h2 > < label > < b >Enter URL</ b > </ label > < button type = "button" onclick = "myBeginner()" > Click </ button > < p id = "GFG" ></ p > < script > function myBeginner() { var link = document.createElement("INPUT"); link.setAttribute("type", "url"); link.setAttribute("value", "https://www.w3wiki.net"); document.body.appendChild(link); } </ script > </ body > </ html > |
Output:
Before Click on the button:
After Click on the button:
Supported Browsers:
- Google Chrome 1+
- Edge 12+
- Firefox
- Opera 11+
- Safari