Specific Textboxes

This page simply demonstrates the various types of text boxes available in HTML5 that indicate to the browser what sort of content the textbox takes so that it can configure, for example, on screen keyboards.

For more information, see the entry on my blog for this: HTML5 text boxs for numbers and email addresses.

Regular textbox

The following input element is a regular text box. Mobile browsers will display their default keyboard when this element has the focus.

<input type="text" />

Numeric

The following input element will tell compatible mobile browsers to use a numeric on screen keyboard. Desktop browsers may display up/down arrows.

<input type="number" />

Email addresses

The following input element will tell compatible mobile browsers that this is an email address and to congfigure their on-screen keyboard accordingly.

<input type="email" />