フォーム入力
ワンタイムコード入力
6桁の区切り入力フォーム。1文字入力で次マスへ自動移動、Backspaceで前へ戻る。全桁入力で確認演出、ペースト時は各マスに自動分配。
プレビュー
入力
操作実際に入力して試せます。
コード（コピーして使えます）
<div class="otp-wrap">
<p class="otp-label">確認コードを入力</p>
<div class="otp-fields" id="otp-fields" role="group" aria-label="6桁のコード入力">
<input class="otp-box" type="text" inputmode="numeric" maxlength="1" pattern="[0-9]" aria-label="コード1桁目" />
<input class="otp-box" type="text" inputmode="numeric" maxlength="1" pattern="[0-9]" aria-label="コード2桁目" />
<input class="otp-box" type="text" inputmode="numeric" maxlength="1" pattern="[0-9]" aria-label="コード3桁目" />
<input class="otp-box" type="text" inputmode="numeric" maxlength="1" pattern="[0-9]" aria-label="コード4桁目" />
<input class="otp-box" type="text" inputmode="numeric" maxlength="1" pattern="[0-9]" aria-label="コード5桁目" />
<input class="otp-box" type="text" inputmode="numeric" maxlength="1" pattern="[0-9]" aria-label="コード6桁目" />
</div>
<p class="otp-status" id="otp-status">6桁の数字を入力してください</p>
</div>