Tag: mobile device

URL Input Type: HTML5

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.

Source Code: HTML file

index.html

view plaincopy to clipboardprint?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <title>URL Input Type: HTML5</title>  
  5. <link href="myStyle.css" rel="stylesheet" />  
  6. </head>  
  7. <body>  
  8.    
  9. <form>  
  10.  <label for="uri">URL: </label>  
  11. <input type="url"/>  
  12. <input type="submit"/>  
  13. </form>  
  14.    
  15. </body>  
  16. </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.