· 2 min read
New way to validate forms into HTML5
HTML 5 specification isn’t finished now, but mainstream web browsers have already supported some part of this new standard.

In this short article, I’ve check new form validator into HyperText Markup Language 5 and new browsers (Chrome 5.0.375.99, Safari 5.0 (6533.16), Opera 10.60). Firstly: Firefox 3.6.8 didn’t support this part of HTML5.
Email address validation
<input type="email" name="email" />
URL validation
<input type="url" name="url" />
Required field with example text
<input type="text" name="surname" placeholder="Kowalski" required />
Browser will not send form, if field have attribute required
and value will be empty.
Attribute placeholder
works only with fields type text
, email
, url
, search
, tel
and password
.
In Opera 10.60 MacOSX placeholder
is invisible. In Chrome and Safari example text (placeholder) works correct.
Phone number validation with pattern and example
<input type="tel" name="phone" placeholder="601-102-203" pattern="[0-9]{3}-[0-9]{3}-[0-9]{3}" />
Into pattern
we have to put required regular expression.
Getting number from range [1, 100]
<input type="number" name="home_number" placeholder="Home number?" min="1" max="100" />
Attribute min
— minimal value, max
— maximal value.
Select value from list
<input type="text" name="sex" placeholder="Select your sex" list="genders" />
<datalist id="genders">
<option value="W" label="woman"></option>
<option value="M" label="man"></option>
</datalist>
Lists works rightly only in Opera. Into specification, there is a word about multiple values select (with attribute multiple
), but it don’t works in any browser.
Date validation
<input type="date" name="birthday" min="1890-01-01" max="1999-12-31" />
Into attributes min
and max
we put date in format YYYY-MM-DD (year-month-day). In Opera, when we select this field, appears built-in into browser small calendar. In Safari we can change date by arrow up and down.
For memories, placeholder
is not implemented for field with date or time type.
Getting time
<input type="time" name="time" min="08:00" />
We can put time in format hh:mm (hour:minute).
In Opera and Safari we can change value by arrow up or down.
Getting month
<input type="month" name="month" />
Month we put in format YYYY-MM (year-month).
Getting week
<input type="week" name="week" />
Week we put in foramt YYYY-WMM (year-Wweek).
Date time validation
We have got here 2 cases — we can get local time or universal (UTC).
LOCAL TIME
Correct format YYYY-MM-DDThh:mm (year-month-dayThour:minute). We have got here 16 characters.
UTC
<input type="datetime" name="utc_datetime" />
Correct format YYYY-MM-DDThh:mmZ (year-month-dayThour:minuteZ). Here we have 17 characters.
Select value from range with slider
<input type="range" name="opacity" min="0" max="100" step="5" value="80" />
Simple slider, which help us change numeral value of field. This field always have some value from min — max range. Look also at attribute step
.
Search field
<input type="search" name="query" placeholder="Search..." />
This field works like text field and only different is in his visual presentation in various browsers. Now its works only in Safari.