0%

Programmingプログラミングナレッジ

Posted:2019.11.13

モバイル端末のキーボード入力制御に有効なinput要素のtype属性とinputmode属性

モバイル用のサイトやアプリケーションをコーディングする際に、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

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】