HTML5 Input

HTML5 is now supporting new input type and give more facilities.

Number and Range

Only numeric value input field and Range field. And Mobile browser display only numeric keypad.

Syntax: 
Quantity (between 1 and 5):<input type="number" name="quantity" min="1" max="5">

View HTML & Demo (Browser: Opera, Chrome, IE 10)

Date Pickers

HTML5 finally defines a way to include a native date picker control without having to script it yourself. In fact, it defines six type: date, month, week, time, date + time, and date + time – timezone.
Now developers free from dubugging js/css code to support third party javascript date picker boxes in different browsers.

input type

• date
• datetime
• datetime-local
• month
• week
• time

View HTML & Demo (Browser: Opera, Chrome, IE 10)

Color Pickers

In past we did lots of juggling to support Color Picker in different browsers.

Now we have Input type “Color”. No extra Javascript and third party controls. Just we need.

Syntax: 
<input type="color">

View HTML & Demo

Email Validation

The email type is used for input fields that should contain an e-mail address. And It validate email address. Now no need to insert customize javascript to validated email address.

Syntax: 
<form>
<fieldset>
<legend>Email</legend>
Email:<input type="email" name="useremail">
</fieldset>
<input type="submit">
<form>

View HTML & Demo (Browser: Opera, Chrome, IE 10)

Require Field

Browser will check field value and display appropriate message to user.

Syntax:
<form>
  <input id="q" required>
  <input type="submit" value="Search">
</form>

Web Address or URL field

Input field with type URL. Provide URL Validation and mobile browser provide appropriate keyboard for field.

<form>
<input id="CompanyURL" type="url">
<input type="submit" value="Save">
</form>

The iPhone altered its virtual keyboard, just like it did for email addresses, but now optimized for web addresses instead. The space bar has been completely replaced with three virtual keys: a period, a forward slash, and a “.com” button. (You can long-press the “.com” button to choose other common suffixes like “.org” or “.net”.)

Auto Complete

The HTML <datalist> tag is used for providing an “autocomplete” feature on form elements. It enables you to provide a list of predefined options to the user as they input data.

View HTML & Demo (Browser: Opera, Chrome, IE 10)

Placeholder Text

Syntax:

<form>
  <input name="q" placeholder="Go to a Website">
  <input type="submit" value="Search">
</form>