HTML5 input number and search

Hurrah! Long gone are the days of frantically worrying whether or not your flashy new website is going to display nicely in IE5 and Netscape (‘Nutscrape’ Lolz) and the heady days of Firefox (you know, before it became total bloatware.) HTML5, CSS3.0, frameworks like Bootstrap and even - would you believe it - some form of agreement amongst the browser manufacturers on what should work irrespective of what you’re viewing it in means that a lot of the old challenges are gone.

BOO! That means there are new challenges 🙁 The biggest one being - does my site look good in a widescreen retina laptop display as well as on a 4″ smartphone? AGAIN fortunately if you standardise then much of this work is done for you.

But sadly there is still much to learn, young padowan. One example: one of my sites basically consists of a search box where the content of the search is pretty well exclusively numbers.

The old school way of doing things is to pop an

<input type=text/>

on a form and away you go.

But HTML5 gives you some goodies. If you want to tell the browser that it’s a search box, then you can use a

<input type=search/>

• which doesn’t do much other than swap the text of the button on a mobile keyboard from ‘Go’ to ‘Search'.

What if, say, you want to switch the default input to numbers? Well, you’ve got a couple of choices. You can do a

<input type=number/>

which will default the keyboard with a row of numbers, and a bunch of other characters on it. Works OK - but make sure you check out the view of this in your normal browser - you’ll get the uppy-downy toggles on the input box which you may not want. (See here for how to get around this.)

You could do a:

<input type=text pattern="[0-9]*"/>

which gives you a great looking (iOS only…) numbers only keyboard. PERFECT! Except, wait - where’s the Go button?

Darn. AS yet, it remains one or the other - I’ve not found how to do a search keyboard with numbers only. (If anyone knows, pop a comment in!)