概要

inputmodeは、HTMLの属性の一つで、入力フィールドのキーボードタイプを指定することでユーザーの入力体験を向上させるためのものです。この属性を使用することで、ユーザーが適切なキーボードレイアウトで入力できるようになり、入力ミスを減らし、フォームの使いやすさを大幅に向上させます。特にスマートフォンやタブレットなどのタッチデバイスで効果を発揮します。

inputmodeの使い方

inputmodeは、フォーム要素（例: input、textarea）に設定でき、ユーザーが入力するときに適切なキーボードを表示するためのヒントをブラウザに提供します。たとえば、電話番号の入力には数字のみのキーボードを、メールアドレスには「@」などの特殊文字が入力しやすいキーボードを表示させることができます。

基本的な構文

<input type="text" inputmode="値">

指定できる値

  • text: 標準のテキスト入力用キーボード（デフォルト）。
  • numeric: 数値入力専用のキーボード（0-9）。
  • decimal: 数値と小数点が入力できるキーボード（例: 1.23）。
  • tel: 電話番号入力用のキーボード（数字と特殊記号）。
  • search: 検索入力用のキーボード（Enterキーが「検索」アイコンになる）。
  • email: メールアドレス入力用のキーボード（@や.が入力しやすい）。
  • url: URL入力用のキーボード（スラッシュやドットが入力しやすい）。

使用例

数値入力に最適なキーボードを表示

数値のみを入力する必要があるフィールドにinputmode="numeric"を使用すると、数字専用のキーボードが表示され、入力のしやすさが向上します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>inputmodeのデモ - 数値入力</title>
</head>
<body>
<h2>inputmode: numericを使用した数値入力フォーム</h2>
<label for="age">年齢を入力してください：</label>
<input type="text" id="age" inputmode="numeric" placeholder="例: 25">
</body>
</html>

このコードを実行すると、スマートフォンで年齢入力欄をタップした際に数字のみのキーボードが表示されます。

メールアドレスの入力を簡単にする

inputmode="email"を使用すると、メールアドレス入力に適したキーボードが表示され、@や.などの入力がしやすくなります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>inputmodeのデモ - メールアドレス入力</title>
</head>
<body>
<h2>inputmode: emailを使用したメールアドレス入力フォーム</h2>
<label for="email">メールアドレスを入力してください：</label>
<input type="email" id="email" inputmode="email" placeholder="example@example.com">
</body>
</html>

この例では、入力フィールドをタップすると、メール入力に特化したキーボードが表示され、入力がよりスムーズになります。

小数点を含む数値入力をサポート

小数点を入力できるキーボードが必要な場合は、inputmode="decimal"を使用します。この設定により、小数点の入力がしやすくなります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>inputmodeのデモ - 小数点入力</title>
</head>
<body>
<h2>inputmode: decimalを使用した数値入力フォーム</h2>
<label for="price">価格を入力してください：</label>
<input type="text" id="price" inputmode="decimal" placeholder="例: 99.99">
</body>
</html>

スマートフォンで実行すると、小数点を含む数値を簡単に入力できるキーボードが表示されます。

使用する際の注意点

  1. あくまでブラウザへのヒント
    inputmodeはブラウザに対して「ヒント」を提供する属性であり、すべてのブラウザやOSで必ず期待通りに動作するとは限りません。入力モードの表示は、ブラウザやデバイスの実装に依存します。
  2. アクセシビリティへの配慮
    不適切なinputmodeの設定は、ユーザーにとって使いづらい入力体験をもたらすことがあります。フォームの使用目的に応じた適切なキーボードを表示することで、アクセシビリティを高めることが重要です。
  3. 他の属性との組み合わせ
    type属性やpattern属性と組み合わせて使用することで、さらに強力な入力制御が可能です。例えば、type="number"とinputmode="numeric"を同時に使用すると、数値のみを受け付けるようにしつつ、適切なキーボードを表示できます。
  4. 互換性の確認
    特に古いブラウザやデバイスではinputmodeのサポート状況が異なるため、実装前に各環境での挙動を確認し、フォールバック方法を考えておくと安心です。

まとめ

inputmode属性は、フォーム入力のユーザー体験を改善するための非常に便利なツールです。適切なキーボードを表示させることで、入力のしやすさを向上させ、入力ミスの防止につながります。ブラウザやOSのサポート状況を考慮しながら、正しい値を設定することで、フォームの利便性を大きく向上させることができます。

参照:

inputmode（HTML） - MDN Web Docs