URL Input Type: HTML5

Advertisement:

Lets look at URL Input Type of HTML5 forms.

form-input-type-url-type-html5

In this video, we illustrate how you can implement simple URL validation using url input type.

HTML file
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
< !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.

Form Input Type – url: HTML5


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://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.

Leave a Reply

Your email address will not be published. Required fields are marked *