HTML and CSS Reference
In-Depth Information
Browser inconsistencies
WebKit was one of the first browsers to support the new input types,
enabling keyboards tuned to the required input type on the iPhone.
The latest versions support the validation API , but you need to write
your own code to take advantage of it. Support for the <output> element
was only added in recent versions, but you can always access the value
with innerHTML instead.
Firefox 4 has support for HTML5 forms in the beta release, including
<datalist> . Current versions of Firefox support everything but the new
input types that require some UI (dates and times, numbers). Firefox 4
also added default styling for the :invalid pseudo-class; if you want to
turn that off, use the following in your CSS :
:invalid { box-shadow: none; }
Firefox also has an experimental attribute, x-moz-errormessage , to allow
you to customize the error message:
<input type="email" name="email" x-moz-errormessage="Email please!">
Detecting supported features
As mentioned, if a browser has no support for one of the new form
input types, it will convert it to an input of type text . This makes it easy
to detect whether an input type is supported in JavaScript—just create
an element of the desired type and then immediately look to see if it's a
text input:
var el = document.createElement("input");
el.setAttribute("type", "date");
if (el.type == "text") {
The previous snippet creates a date input and then checks
to see what type the browser thinks it is. If it's text , you
call a function implementDateValidation to deal with
browsers that don't support the date input type.
Search WWH ::

Custom Search