Input Mode

From bemoko developer wiki

Jump to: navigation, search
Design Pattern - Input Mode
... more
Summary: Input mode for forms

Contents

When Used

  • Constraints can be applied to form inputs such that the user can only enter certain content. This is often achieved by the browser switching the keyboard input mode, for example switching to digit entry instead of text entry.

Rationale

  • If the web site expects content in a given format, then rather than wait until the user has entered invalid information before informing them of an error, it is a better only enter valid characters can be entered. This also reduces the number key presses that the user will make since, in the case of digit entry, the user doesn't need to press shift of numlock keys prior to entering the digits.

Make it Happen

There are various approaches in place which allow the input mode to be specified. Support for input mode control is variable and on some browsers there is no ability to control it - read "Which approach should you use?" for information on how to tackle this.

-wap-input-format

<input name="field" style="-wap-input-format:'*N'"/>

or 

<input name="field" class="digits"/>

with a CSS of 

digits {-wap-input-format:'*N'}

inputmode

XHTML (Basic v1.1) inputmode attribute[1] 

<input name="field" inputmode="digits"/>

format

Openwave defined the format attribute on the input element (taken from WML), e.g.: 

<input type="text" name="field" format="NNNNN" />

The semantics are exactly the same as WML 1.X, and constrain the range of acceptable user input to digits. In this particular case, we are telling the browser that a value made up of exactly 5 digits is required. In case we wanted to collect a number of up to 5 digits, we would have used: format="5N". This is an Openwave extension, but we just could not let wireless programmers down on this. Collecting user data on a mobile device is an activity you want to keep as brief as possible. It is best to use input formats to guide the users and minimize the number of clicks required. Typing digits when the keypad is in alphanumeric mode is a sure fire way to make users hate your application. Future version of the browser (6.2 and on) will support a more elegant CSS syntax too: <input type="text" name="minutes" value="" style="-wap-input-format:NNNNN" />. It is worth noting that either of these methods of constraining input data types, using either style or the format attribute, may not work on all WAP 2.0 devices. For a complete spec of the acceptable values for the format attribute, you can refer to the WML 1.3 Reference Guide on the Openwave developer website - http://demo.openwave.com/pdf/51/wml_ref.pdf[2]

Which one to use?

With bemokoLive

If you are using bemokoLive you can use the inputmode attribute in your input elements of your site markup (where you need input mode control) and use an input mode tweaker to convert to the appropriate device specific markup based.

Behind the scenes

Different devices do support different standards, and which standard is preferred for a device can be determined from the inputModeSupport device property[3].

Note that WURFL defines the device properties xhtml_format_as_css_property - to state whether the -wap-input-format technique works - and xhtml_format_as_attribute to state whether the format attribute technique works.

It is early days for the support of the inputmode attribute and support is not yet widespread.

Opera has support in the core for the inputmode attribute - While XHTML Basic is a subset of XHTML 1.1, it is not fully a subset as XHTML Basic 1.1 adds a new attribute not available in regular XHTML or HTML. This is the inputmode attribute, which has been borrowed from XForms. As this is a new attribute, support for this is spotty at best, but pages should degrade gracefully in browsers that do not support it. The Opera core rendering engine supports inputmode, but it has to be enabled on a project-by-project basis and is not on by default. The inputmode attribute is supported on the input and textarea elements. Supplying a input mode gives a hint to the browser on what keyboard or input mode should be presented to the user. This is useful for on-screen keyboards, where a limited amount of characters on the keyboard can be shown at once. For a telephone number, it is possible to specify that a numeric keyboard is shown, saving the user from having to switch manually.[4]

Further Reading

References

  1. ↑ XHTML inputmode Attribute Module - http://www.w3.org/TR/xhtml-basic/#s_inputmode
  2. ↑ XHTML-MP Style Guide Chapter 5 - Forms: Collecting User Data - http://developer.openwave.com/dvl/support/documentation/guides_and_references/xhtml-mp_style_guide/chapter5.htm
  3. ↑ Device Description Repository Core Vocabulary - inputModeSupport - http://www.w3.org/TR/ddr-core-vocabulary/#sec-inputModeSupport
  4. ↑ http://dev.opera.com/articles/view/mobile-markup-xhtml-basic-1-1/
Retrieved from "http://bemoko.com/wiki/Input_Mode"