URL Input Type: HTML5

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 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.