Lets look at URL Input Type of HTML5 forms.
In this video, we illustrate how you can implement simple URL validation using url input type.
Source Code: HTML file
index.html
<!DOCTYPE html> <html> <head> <title>URL Input Type: HTML5</title> <link href="myStyle.css" rel="stylesheet" /> </head> <body> <form> <label for="uri">URL: </label> <input type="url"/> <input type="submit"/> </form> </body> </html>
Simple url type input field checks for the presence of http:// followed by some domain name, dot and a valid TLD(Top Level Domain) name.
Video Tutorial: Form Input Type – url: HTML5
[youtube https://www.youtube.com/watch?v=BnVK7jecJ0o]
YouTube Link: https://www.youtube.com/watch?v=BnVK7jecJ0o [Watch the Video In Full Screen.]
Note:
It doesn’t ping the entered URL to check if the URL is actually present or not. It simply checks to make sure the user entered information starts with http:// and ends with a dot followed by a valid TLD.
If viewed on a HTML5 compatible mobile browser, it pops up custom keyboard to facilitate the user to enter URL.