User Id :    Password :      New Member   Forgot Password  
URL–New HTML5 input element
Description In earlier post we have seen how the email input tag work in the browser. HTML5 comes with lots of new goodies and today we are going to see one of another new html5 input types URL.   No. of Views     2036
  Rating     0
Author Jalpesh Vadgama   Posted On     21 Feb 2012

Sample Code   Download Code


In most of the sites once you fill your contact and personal information it will ask for your URL. Till now there is no specific type for URL and we have to manually validate the URL with the Java Script but now with the HTML5 you don’t have do that. It will automatically validate the URL. For the browsers that are not supporting this will work as normal input text box.

So let’s take a simple example of URL input type. I am going to use same ASP.NET MVC project that I have used for the earlier post. So Here is the code for that.


ViewBag.Title = "Home Page"; 
<p>To learn more about ASP.NET MVC visit <a title="ASP.NET MVC Website" href=""></a>.</p> <form method="post" action="">
<label for="urlInput">URL:</label> 
<input type="url" name="urlInput" id="urlInput" /> 
<button type="submit"> Check Input URL</button>


Now let's run that in browser. So once you enter some wrong Url and then click on submit button it will give error message like following.



That’s it. You can see its very easy and I don’t have to write code for the URL validation. It will do that validation automatically. Hope you liked it. Stay tuned for more..till than Happy programming.


About Author

About Author I am jalpesh vadgama an Microsoft MVP for Visual C# and BrainBench Certified ASP.NET Developer having more then 5 years of experience in .NET Technology.Please feel free to contact me for any queries via posting comments on my blog I will try to reply as early as possible. Please also visit my blog at Jalpesh Vadgama
No Photo
Country India
Company N/A
Home Page

Rate this article

Rating options from poor, fair, good, very good to excelent.  


Write your comment here.
Verification Code