URL–New HTML5 input element

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.

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";
}

<h2>@ViewBag.Message</h2>
<p>
  To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>
<form action="" method="post">

  <label for="urlInput">URL:</label>
  <input id="urlInput" name="urlInput" type="url"/>

  <button type="submit"> Check Input URL</button>
</form>

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.