Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【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によるバリデーション処理を別途実装する必要があります。これらの属性を適切に組み合わせることで、ユーザーはよりスムーズかつ正確に情報を入力でき、ウェブアプリケーションの使いやすさが向上します。

公式リファレンス: HTML inputmode global attribute

構文(syntax)

1<input inputmode="numeric">

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

関連コンテンツ