I wasn’t aware of this, but here’s how the iPhone is able to display different keyboards based on Mobile Safari form fields:
The iPhone does not have a physical keyboard. All “typing” is done by tapping on an on-screen keyboard that pops up at appropriate times, like when you focus a form field in a web page. Apple did something very clever in the iPhone’s web browser. It recognizes several of the new HTML5 input types, and DYNAMICALLY CHANGES THE ON-SCREEN KEYBOARD to optimize for that kind of input.
For example, email addresses are text, right? Sure, but they’re a special kind of type. For example, virtually all email addresses contain the
@sign and at least one period (.), but they’re unlikely to contain any spaces. So when you use an iPhone and focus an<input type="email">element, you get an on-screen keyboard that contains a smaller-than-usual space bar, plus dedicated keys for the@and.characters.
From Dive Into HTML5
