HTML5 Input Type

HTML5 New Input types

HTML5 has several new input types for forms.These input types help us to select user input and check its validation.

  • email
  • url
  • number
  • color
  • slider

Creating Input type Email

The HTML5 specification says that the email input type is designed to
hold either a single email address or an email address list.

<form>
<input type="email" name="email" id="email"/>
</form>

Email:
Note:Mobile devices get the most benefit from this type of form field, because the virtual keyboard layouts change to make entering email addresses easier.

Creating Input type Slider Using Range

Sliders are commonly used to let users decrease or increase a numerical
value and could be a great way to quickly allow managers to both
visualize and modify the priority of the project. You implement a slider
with the range type.

<form>
<input type="range" min="0" max="10"/>
</form>

Chrome and Opera both implement a Slider widget, which looks like
this:
Range:
Note:We’ve also set the min and max range for the slider. That will constrain the value of the form field.

Creating Input Type Url

There’s a field type designed to handle URLs too. This one is especially
nice if your visitor uses an iPhone, because it displays a much different keyboard layout, displaying helper buttons for quickly entering web addresses, similar to the keyboard displayed when entering a URL into Mobile Safari’s address bar. Adding the staging URL field is as simple as adding this code:

<form>
<input type="url" name="url" id="url">
</form>

Url:
Virtual keyboards use this field type to display a different layout as
well.
Related HTML5 topics:

css.php