While I was in San Francisco for the last Event Apart of the year in December, Luke pulled me aside while he was preparing for his A Day Apart workshop on mobile web design. As befits the man who literally wrote the book on web forms and also wrote the the book on mobile-first design, Luke was planning to spend plenty of time covering input on mobile devices and he wanted my opinion on one of the patterns he was going to mention.
Let’s say you’ve got your typical checkout form asking for credit card details. The user is going to need to specify the expiry date of their credit card, something that historically would have been done with
select elements, like so:
With the introduction of the new
input types in HTML5, we can now just use
That’s particularly nice on mobile devices that support
input type="month" like Mobile Safari since iOS5.
But the behaviour on non-supporting browsers would be to display just like
input type="text" …not ideal for inputting a date.
So the pattern that Luke proposed was to start with the traditional double drop-downs for month and year, and then use feature detection to replace them with
input type="month" in supporting browsers.
That was an angle I hadn’t thought of. Usually when I’m implementing new HTML5
input types (like
The only downside is that some the desktop browsers that do support
input type="month" do so in a way that—from a UI standpoint—seems like a step backwards from simply having two
selects: Safari displays it with a spinner control like
input type="number", while Opera shows an entire Calendar (days’n’all).