スマホ入力時に数字キーボードを表示する【UXを考えたフォームづくり】

スマホでフォーム等に入力する際、例えば電話番号のときに普通の文字のキーボードが表示されたら、自分で数字キーボードに変えないといけなくてちょっと手間だなって思いますよね。

めんどくさがりなので、最初から数字キーボードが表示されたらおっ（快適！）となります。

ちょっとのひと手間でユーザを快適にできるので、ぜひ活用しましょう。

モバイル端末のキーボード入力制御には、input要素のtype属性とinputmode属性を使用します。

inputのtype属性で入力データ型を指定

一般的な方法として、input要素のtype属性で、入力するデータ型を指定する方法があります。input要素には様々な入力フォーム部品のUIが用意されており、それらを識別する情報としてtype属性が存在します。

Webサイトのフォームでよくある入力データ型には以下のようなものがあります。

<input type="tel" placeholder="000-1234-5678">
<input type="email" placeholder="info@example.com">
<input type="url" placeholder="https://example.com">
<input type="search" placeholder="検索キーワード">

このように、一般的にはtype属性で入力のデータ型を明示する形になりますが、一部ブラウザで挙動が異なる場合があるようです。そんな時には、次の「inputmode属性」でも入力用キーボードの制御ができるようです。

input要素のinputmode属性で入力データ型を指定

このinputmode属性もいろんな種類が用意されています。基本的にはtype属性に対応した形があり、type属性と同じようにデータのタイプに合わせて指定します。

下記のようにtype属性をtextにした場合でも、inputmode属性を指定することで、入力のデータ型を明示することができ、そのデータに最適化されたキーボードを表示させることができます。ここでは先ほどのtype属性に合わせて、inputmode属性を指定しています。

<input type="text" placeholder="080-1234-5678" inputmode="tel">
<input type="text" placeholder="info@example.com" inputmode="email">
<input type="text" placeholder="https://example.com" inputmode="url">
<input type="text" placeholder="検索キーワード" inputmode="search">

ちなみにinputmode属性については対応していないブラウザもあるので注意が必要です。

できればtype属性で指定し、それで例外が起こるようであればinputmode属性を使うようなイメージでしょうか。

ウェブサイトでもモバイルファーストである場合には、フォーム入力時のストレスを下げることはUXの観点から言っても重要になります。細かいところですが、このような対応をするかしないかでコンバージョン率も変わってくると思いますので、できるだけ心がけたいですね。