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") {
implementDateValidation();
}
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.
