One of the great aspects of Html5 is the new set of input types used to create forms and how the browser handles them. Among different form-related things like creating forms from scratch, modifying existing forms, handling user interaction with forms, HTML5 adds a whole bunch of new values for the input element's type attribute.

HTML 5 offers a wide new range of input types for specific situations, such as email, url, number, range, datepickers, search and color. In this post we will explore these new HTML 5 input types:

Email

The email input type is used for input fields that contains an e-mail address. When user submit the form the value of the email field is automatically validated . Email type is supported by Opera 9.0 browser only.

Example

<html>
<body>
<form action="demo_form.asp" method="get">
E-mail: <input type="email" name="user_email" /><br />
<input type="submit" />
</form>
</body>
</html>

Output Window

input-type.gif

Url

The url input type is used for input fields that should contain a URL address. Like email type the value of the url field is also automatically validated when the form is submitted. It is also supported by Opera 9.0 only.

Example

<form action="demo_form.asp" method="get">
Homepage: <input type="url" name="user_url" /><br />
<input type="submit" />
</form>

Number