New features of HTML5 form

Recently I worked with template that it was necessary to include on CMS. The template is declared doctype of HTML 5, but the possibility of the 5th version of the HTML, have not been used.
So I want to tell the novice designers some things, that will make your site more friendly and semantic.

Attribute placeholder

For example, look at the picture below, and remember how it was done before.

The text, which must be within the field, inserted with the attribute “value”.
But if the field have type=”password”, all characters entered in the field, are replaced by markers. Webmasters had to invent different hacks. Using HTML 5 is enough to specify a new attribute placeholder:

<input type="password" name="password" placeholder="Enter password"/>

Type=”email”

A new type of forms (as well as all which will be discussed below). Is very interesting behavior on mobile devices, for example, look at the screenshots:

iPhone = small screen and small keyboard. If you want to enter the @ symbol (or the point) you need to once again switch the type of character input. But not in the case if you specify input type=”email”.

Type=”time”

Also type=”date”, type=”datetime”, type=”datetime-local”, type=”month” and type=”week” – ie, all that is related to the date and time. Screenshots for each type I not display in this article. But tell you that iPhone here also will automatically switch the keyboard. Desktop users also will be comfortable with the choice of the date field, see:

Like? This is just one line only:

<input type="datetime" name="datetime" />

Type=”number”

I make mainly online-shops, and this is my favorite innovation.
How much time was spent on writing scripts only due to the fact that previously there was no type=”number”…
I’m sure you’re familiar with a variety of samples in shops or on the bulletin boards… when to choose the product or object on the specified parameters “from” and “to”. How it was done before? Dozens or even hundreds of lines of code, and debug “to work in all browsers”… Forget this nightmare.

As in the previous example, there is only one line:

<input type="number" name="number" value="00" min="1" max="10" step="1"/>

Pseudo-classes “valid” and “invalid”

See a screenshot of my form for commenting (or better yet, leave a comment to see).

Previously, in order to prompt the user that the field is filled with the wrong, web-designer used the long scripts. With HTML 5 is much easier – for different types of fields we can use pseudo-classes “valid” and “invalid”. Form changes color with just two lines:

#commentform #email:invalid {background: #fdd;}
#commentform #email:valid {background: #dfd;}

And the beauty is that you can specify the pseudo-data for any type of form as provided in HTML 5.

And finally, the bad news.
Problems not only with internet explorer – also and in Firefox for certain types of fields. If with Firefox can not worry – most likely the developers will fix, but for IE to version 9 inclusive, the situation is not so rosy.

I think that every webmaster should decide which technology to use – outdated or perspective.