スマートフォンサイトで商品を購入する際に、郵便番号やメールアドレス、住所などをフォームに入力します。例えば郵便番号を入力しないといけない時にきちんと郵便番号用のキーボードになってない事が多くて、特段気にはなりませんが少しストレスを感じてしまいます。

モバイルユーザーは画面遷移や入力の手間を嫌い、できるだけ早く目的にたどり着きたいと考えているので、今回はそんなストレスを解消する「ソフトウェアキーボードの最適化の方法」をご紹介します。

inputタグのtype属性で切り替える

方法は至って簡単で、inputタグのtype属性を使って切り替えることができます。
サンプルサイトはコチラ。

以下のキャプチャは左側が英語キーボード、右側が日本語キーボードを表示しています。

<input type="text" />

<input type="number" />

どちらのキーボードもデフォルトで数値入力になっています。

<input type="search" />

右下がそれぞれ「Search」「検索」に変化しました。

<input type="tel" />

こちらは数字しか入力が出来なくなっています。

<input type="url" />

英語キーボードでは「.」「/」「.com」が、日本語キーボードでもアルファベット入力がデフォルトになっています。

<input type="email" />

英語キーボードでは「space」「@」「.」で表示されています。（日本語キーボードでは何故かうまくいきませんでした…）

ざっとご紹介すると以上になります。

探してみると他にも「password（パスワードを●●で表示）」や「date（日付入力）」など様々な入力方法を指定することができるので、お試し下さい。

ちなみに、「text」などはもともとHTML4.0より用意されていましたが、「url」や「tel」などはHTML5から追加されています。

参考：HTML5タグリファレンス｜フォームを構成する様々な入力部品を作成する