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.
Example 1:
<!DOCTYPE html> < html > < head > < title > DOM Input URL Object </ title > </ head > < body > < center > < h1 style = "color:green;" > GeeksForGeeks </ 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 = "geeks()" > Click </ button > < p id = "GFG" ></ p > < script > function geeks() { var link = document.getElementById("gfg").value; document.getElementById("GFG").innerHTML = link; } </ script > </ center > </ body > </ html > |
chevron_right
filter_none
Output:
Before Click on the button:
After Click on the button:
Example 2:
<!DOCTYPE html> < html > < head > < title > DOM Input URL Object </ title > </ head > < body > < h1 > GeeksForGeeks </ h1 > < h2 >DOM Input URL Object </ h2 > < label > < b >Enter URL</ b > </ label > < button type = "button" onclick = "myGeeks()" > Click </ button > < p id = "GFG" ></ p > < script > function myGeeks() { var link = document.createElement("INPUT"); link.setAttribute("type", "url"); link.setAttribute("value", "http://www.geeksforgeeks.org"); document.body.appendChild(link); } </ script > </ body > </ html > |
chevron_right
filter_none
Output:
Before Click on the button:
After Click on the button:
Recommended Posts:
- HTML | DOM Input Month Object
- HTML | DOM Input Image Object
- HTML | DOM Input Text Object
- HTML | DOM Input Datetime Object
- HTML | DOM Input Email Object
- HTML | DOM Input DatetimeLocal Object
- HTML | DOM Input Button Object
- HTML | DOM Input Date Object
- HTML | DOM Input Radio Object
- HTML | DOM Input Search Object
- HTML | DOM Input Submit Object
- HTML | DOM Input Range Object
- HTML | DOM Input Reset Object
- HTML | DOM Input Week Object
- HTML | DOM Input Password Object
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.