HTMLのinputmode属性：スマートフォン入力を快適にする便利機能を徹底解説！

属性の役割

属性の構文

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

上記の例では、input要素にinputmode="url"属性を付与することで、URL入力に適したキーボードを表示するように指定しています。

主な属性値

属性値には、様々な入力モードを指定できます。代表的なものを以下に示します。

<label for="phone">電話番号:</label>
<input type="tel" id="phone" inputmode="telephone" required>

このコードでは、電話番号入力用のフォームを作成しています。inputmode="telephone"を指定することで、数字キーと記号キーが並ぶテンキータイプのキーボードが表示されます。

メールアドレス入力

<label for="email">メールアドレス:</label>
<input type="email" id="email" inputmode="email" required>

このコードでは、メールアドレス入力用のフォームを作成しています。inputmode="email"を指定することで、アットマーク(@)キーが強調表示されたり、メールアドレス用の入力候補が表示されたりするキーボードが表示されます。

URL入力

<label for="url">URL:</label>
<input type="url" id="url" inputmode="url" required>

このコードでは、URL入力用のフォームを作成しています。inputmode="url"を指定することで、ドット(.)やスラッシュ(/)などの記号キーが強調表示されたり、URL用の入力候補が表示されたりするキーボードが表示されます。

パスワード入力

<label for="password">パスワード:</label>
<input type="password" id="password" inputmode="password" required>

このコードでは、パスワード入力用のフォームを作成しています。inputmode="password"を指定することで、入力文字が非表示 (マスク) になり、パスワード入力を安全に行うことができます。

検索バー

<label for="search">検索:</label>
<input type="search" id="search" inputmode="search">

このコードでは、検索バーを作成しています。inputmode="search"を指定することで、虫眼鏡アイコン付きの検索バーが表示されます。

そこで、inputmode属性の代替方法として以下の3つの方法が挙げられます。

入力内容のチェック

全角・半角文字の自動変換

望ましい入力モードを指定するHTMLの属性

以下の属性を使用することで、ある程度入力モードを制御できます。
- type属性：入力欄の種類を指定 (例：type="number"で数字入力、type="email"でメールアドレス入力)
- pattern属性：入力値のパターンを正規表現で指定 (例：電話番号形式の制限)
- placeholder属性：入力欄にプレースホルダテキストを表示 (例：入力形式のヒント)