← 一覧へ

やってみよう数字を6つ打ってみてください（消すと前のマスに戻ります）

入力フォームメジャー（よく見る）

ワンタイムパスワード入力

OTP Input / Verification Code Input

認証コードを1マスずつ入れる欄。数字を打つと、自動で次のマスに移る。

別名OTP入力認証コード入力確認コード入力PIN入力ピンコード入力

どこで使われている？

よく見かける場所
銀行・決済アプリ、LINEのログイン、二段階認証
使うとよい場面
SMSやメールで届いた4〜6桁のコードを入れてもらうとき
避けたい場面
普通のパスワード（長さが決まっていない）

補足SMSで届いたコードをキーボードの上に候補として出すには、入力欄に「ワンタイムコード」の種類を指定します。

AIへの指示文

これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。

HTML / CSS / JavaScript で「ワンタイムパスワード入力（OTP Input / Verification Code Input）」を実装してください。

動き：認証コードの桁数分（6個）のマスを横に並べ、1文字入力するたびに自動で次のマスへ移動する。文字を消すと前のマスへ戻る。コードを貼り付けたときは全マスに分けて入れ、6桁そろったら自動で確認する。

使う部品：<input autocomplete="one-time-code" inputmode="numeric"> をマス目に見せて自作
もっと詳しく：プログラムでの部品名

同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。

Webサイトなら<input autocomplete="one-time-code" inputmode="numeric"> をマス目に見せて自作
iPhoneアプリならTextField + .textContentType(.oneTimeCode)
Androidアプリなら標準部品なし。BasicTextField で自作（SMS Retriever API で自動入力）
Flutterならpinput パッケージ
React Nativeならreact-native-otp-entry

似ているもの・一緒に使うもの