モバイル用のサイトやアプリケーションをコーディングする際に、UXの観点から、ユーザーが入力フォームにデータを入れる時には、その入力データにマッチしたキーボードを表示させてあげることが重要です。今回はHTML側で入力フォームのタイプを明示させることで、入力時に表示される端末のキーボードを最適化させる方法についてまとめていきたいと思います。
inputのtype属性で入力データ型を指定
一般的な方法として、input要素のtype属性にて、入力するデータ型を指定する方法があります。input要素には様々な入力フォーム部品のUIが用意されており、それらを識別する情報としてtype属性が存在します。ここでは下記のように、ウェブサイトのフォームでよくある入力データ型のものを用意しました。
【HTML】※一部省略
<input type="tel" placeholder="080-1234-5678">
<input type="email" placeholder="info@example.com">
<input type="url" placeholder="https://example.com">
<input type="search" placeholder="検索キーワード">
| type="tel" |
電話番号のフォーム形式、半角数字のテンキー、＊や＃、ーなどの記号といった電話番号入力に最適化されたキーボードが表示 |
| type="email" |
メールアドレスのフォーム形式、半角英数字と、＠などの記号といったメールアドレス入力に最適化されたキーボードが表示 |
| type="url" |
ウェブサイトURLのフォーム形式、／などの記号といったURL入力にに最適化されたキーボードが表示 |
| type="search" |
検索用キーワードのフォーム形式、通常のテキスト入力キーボードに「検索」ボタンの表示といったキーワード検索に最適化されたキーボードが表示 |
このように、一般的にはtype属性で入力のデータ型を明示する形になりますが、一部ブラウザで挙動が異なる場合があるようです。そんな時には、次の「inputmode属性」でも入力用キーボードの制御ができるようです。
input要素のinputmode属性で入力データ型を指定
このinputmodeもいろんな週類が用意されていますが、基本的にはtype属性に対応した形があり、同じようにデータのタイプに合わせて指定します。下記のようにtype属性をtextにした場合でも、inputmode属性を指定することで、入力のデータ型を明示することができ、そのデータに最適化されたキーボードを表示させることができます。ここでは先ほどのtype属性に合わせて、inputmode属性を指定しています。
【HTML】※一部省略
<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="tel" |
電話番号入力の想定を明示したフォーム、半角数字のテンキー、＊や＃、ーなどの記号といった電話番号入力に最適化されたキーボードが表示 |
| inputmode="email" |
メールアドレス入力の想定を明示したフォーム、半角英数字と、＠などの記号といったメールアドレス入力に最適化されたキーボードが表示 |
| inputmode="url" |
ホームページURL入力の想定を明示したフォーム、／などの記号といったURL入力にに最適化されたキーボードが表示 |
| inputmode="search" |
検索用キーワード入力の想定を明示したフォーム、通常のテキスト入力キーボードに「検索」ボタンの表示といったキーワード検索に最適化されたキーボードが表示 |
ちなみにinputmode属性については対応していないブラウザもあるので注意が必要です。できればtype属性で指定し、それで例外が起こるようであればinputmode属性を使うようなイメージでしょうか。
今回の記事にあるinput要素はそれぞれ
こちらのサンプルに用意しています。実際にモバイル端末で確認し、どのようなキーボードが表示されるか見てみてはいかがでしょうか。
ウェブサイトでもモバイルファーストである場合には、フォーム入力時のストレスを下げることはUXの観点から言っても重要になります。細かいところですが、このような対応をするかしないかでコンバージョン率も変わってくると思いますので、できるだけ心がけたいですね。
（参考にさせて頂いたサイト）
inputmode - HTML: HyperText Markup Language | MDN
