【HTML Living Standard】inputmode属性の使い方
inputmode属性の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
inputmodeプロパティは、ユーザーがテキスト入力を行う際に、ブラウザがどの種類の仮想キーボード（ソフトウェアキーボード）を表示すべきかを決定するための情報を保持するプロパティです。特に、スマートフォンやタブレットのようなタッチスクリーンデバイスにおいて、入力フィールドの目的と一致する最適なキーボードをユーザーに提示することで、データ入力の効率とユーザーエクスペリエンスを大幅に向上させることを目的としています。
このプロパティはHTMLのグローバル属性の一つであり、<input>要素や<textarea>要素といった、ユーザーからのテキスト入力を受け付ける要素に適用できます。例えば、数字のみの入力を求める場合はinputmode="numeric"を指定すると、数字に特化したキーボードが表示されます。電話番号の場合はinputmode="tel"、メールアドレスの場合はinputmode="email"、小数点を含む数値の場合はinputmode="decimal"といった値を設定することで、それぞれの入力に適した記号やキーが配置されたキーボードが利用可能になります。
inputmodeプロパティは、あくまで表示されるキーボードのタイプをヒントとして制御するものであり、入力された値が指定した形式に沿っているかを検証する機能は持ちません。入力値の型チェックやフォーマット検証を行う必要がある場合は、<input>要素のtype属性（例: type="number"やtype="email"）、pattern属性、あるいはJavaScriptによるバリデーション処理を別途実装する必要があります。これらの属性を適切に組み合わせることで、ユーザーはよりスムーズかつ正確に情報を入力でき、ウェブアプリケーションの使いやすさが向上します。
構文(syntax)
1<input inputmode="numeric">
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTMLのinputmode属性で仮想キーボードを制御する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>inputmode属性のサンプルコード</title> 7</head> 8<body> 9 <h1>inputmode属性の使用例</h1> 10 11 <p> 12 <!-- inputmode属性は、モバイルデバイスなどで表示される仮想キーボードの種類をブラウザにヒントとして指定します。 --> 13 <!-- これにより、ユーザーは入力に適したキーボードで効率的に入力できます。 --> 14 <!-- この属性はHTML Living Standardで定義されており、現在も有効です。 --> 15 </p> 16 17 <p> 18 <label for="text-input">テキスト入力 (デフォルト):</label><br> 19 <!-- inputmodeを指定しない場合、または inputmode="text" の場合、標準のテキストキーボードが表示されます。 --> 20 <input type="text" id="text-input" placeholder="標準キーボード"> 21 </p> 22 23 <p> 24 <label for="numeric-input">数値入力:</label><br> 25 <!-- inputmode="numeric" は、数字入力に特化したキーボード（テンキーなど）を推奨します。 --> 26 <input type="text" id="numeric-input" inputmode="numeric" placeholder="数字のみ入力"> 27 </p> 28 29 <p> 30 <label for="decimal-input">小数入力:</label><br> 31 <!-- inputmode="decimal" は、数字と小数点を含む入力に適したキーボードを推奨します。 --> 32 <input type="text" id="decimal-input" inputmode="decimal" placeholder="数字と小数点入力"> 33 </p> 34 35 <p> 36 <label for="email-input">メールアドレス入力:</label><br> 37 <!-- inputmode="email" は、メールアドレス入力に適したキーボード（@記号などを含む）を推奨します。 --> 38 <input type="email" id="email-input" inputmode="email" placeholder="user@example.com"> 39 </p> 40 41 <p> 42 <label for="tel-input">電話番号入力:</label><br> 43 <!-- inputmode="tel" は、電話番号入力に適したキーボード（数字と一部記号）を推奨します。 --> 44 <input type="tel" id="tel-input" inputmode="tel" placeholder="090-xxxx-xxxx"> 45 </p> 46 47 <p> 48 <label for="url-input">URL入力:</label><br> 49 <!-- inputmode="url" は、URL入力に適したキーボード（スラッシュやドットなどを含む）を推奨します。 --> 50 <input type="url" id="url-input" inputmode="url" placeholder="https://example.com"> 51 </p> 52 53 <p> 54 <label for="search-input">検索入力:</label><br> 55 <!-- inputmode="search" は、検索語句入力に適したキーボード（例: 検索ボタンなど）を推奨します。 --> 56 <input type="search" id="search-input" inputmode="search" placeholder="検索キーワード"> 57 </p> 58</body> 59</html>
inputmode属性はHTMLのグローバル属性の一つで、主にモバイルデバイスなどで、ユーザーがテキスト入力欄に情報を入力する際に表示される仮想キーボードの種類を、ブラウザにヒントとして指定するために使用されます。この属性自体に引数はなく、特定の値を戻すこともありません。
inputmodeを指定することで、ユーザーは入力するデータの種類（数字、メールアドレス、URLなど）に最適なキーボードが自動的に表示されるようになり、効率的かつ正確な入力が可能になります。例えば、inputmode="numeric"と指定すると、数字の入力に適したテンキーのようなキーボードが推奨されます。inputmode="decimal"は数字と小数点を含む入力、inputmode="email"は@記号を含むメールアドレス入力、inputmode="tel"は電話番号入力、inputmode="url"はURL入力、inputmode="search"は検索キーワード入力といった具合に、それぞれに適したキーボードの表示を促します。inputmodeを指定しない場合や、inputmode="text"と指定した場合は、標準のテキストキーボードが表示されます。この属性は現在もHTML Living Standardで定義されており、ユーザーエクスペリエンスの向上に貢献する重要な機能です。
inputmode属性は、現在HTML Living Standardで有効なグローバル属性であり、廃止されていません。これはモバイルデバイスなどで表示される仮想キーボードの種類をブラウザに伝えるためのヒントとして使用されます。入力値の形式を保証するものではないため、type属性と適切に組み合わせ、必要に応じてJavaScriptで追加の入力検証を行うようにしてください。ブラウザやOS、キーボードアプリの実装によって表示されるキーボードが異なる場合があるため、この属性はユーザー入力の補助として活用することが重要です。
HTML inputmode="numeric" で数字入力キーボードを表示する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>Inputmode Numeric Example</title> 6</head> 7<body> 8 <h1>inputmode="numeric" のサンプル</h1> 9 <p> 10 この入力フィールドは、ソフトウェアキーボードで数字入力に最適化されます。<br> 11 携帯端末などで、電話番号や郵便番号などの数字のみの入力を求めるときに便利です。 12 </p> 13 14 <!-- inputmode="numeric" を使用すると、対応するデバイスで数字専用のキーボードが表示されます。 --> 15 <!-- pattern="[0-9]*" は、入力値が数字のみであることを検証するための正規表現です。 --> 16 <label for="phoneNumber">電話番号:</label> 17 <input type="text" id="phoneNumber" inputmode="numeric" pattern="[0-9]*" placeholder="例: 09012345678"> 18 19 <br><br> 20 21 <label for="zipCode">郵便番号:</label> 22 <input type="text" id="zipCode" inputmode="numeric" pattern="[0-9]*" placeholder="例: 1234567"> 23</body> 24</html>
inputmode属性は、HTMLのグローバル属性の一つで、フォームの入力フィールドにユーザーがデータを入力する際、デバイスのソフトウェアキーボードがどのように表示されるべきかというヒントをブラウザに伝えるものです。特にinputmode="numeric"を指定すると、電話番号や郵便番号、数量など、数字のみの入力を想定している場合に、スマートフォンやタブレットなどのデバイスで数字入力に特化したキーボードが自動的に表示されます。これにより、ユーザーは数字以外のキーボードレイアウトに切り替える手間なく、スムーズに数字を入力できるようになります。
inputmode属性自体には、直接的な引数や戻り値はありません。この属性は、入力時のユーザーインターフェースを最適化するためのヒントを提供する役割を担っています。
サンプルコードでは、電話番号と郵便番号の入力フィールドにinputmode="numeric"が設定されています。この設定により、これらのフィールドにフォーカスが当たると、数字キーボードが表示され、ユーザーは迷わず数字を入力できます。また、pattern="[0-9]*"という属性も併用されていますが、これは入力された値が0から9までの数字のみで構成されているかを検証するための正規表現です。inputmodeが入力時の利便性を高めるのに対し、patternは入力後のデータ形式をチェックするという、それぞれの異なる役割を持っています。このように、inputmode="numeric"を使用することで、数字入力を必要とする場面でユーザーにとってより使いやすいWebフォームを提供できるのです。
inputmode="numeric"は、モバイル端末で数字入力に最適化されたソフトウェアキーボードを表示する補助属性です。これだけでは入力が数字に限定されません。数字のみとするにはpattern="[0-9]*"のような正規表現やJavaScriptでの検証が必須です。
type="number"と異なり、小数点や増減ボタンがなく、電話番号や郵便番号など純粋な数字列に適しています。対応状況は環境で異なり補助機能のため、データの安全確保として最終検証はサーバーサイドで必須です。