ワンタイムパスコードってinputのtype属性、何にするのが正解？

今回の話

2段階認証でワンタイムパスコードのシステムを作ったのはいいものの、
フォームのinputのtype属性に困ったという経験はないですか？
僕はあります。でも結局は諦めてtype="text"とpatternで終わらせました。

Qiitaの場合は？

ここでは例としてQiitaのログインを持ってきました。
残念ながらスクショを用意することはできなかったのですが、
type="number"とpatternの組み合わせでした。

numberってええんかな

僕がどっかで聞いた話によると、「0で始まる場合もあるからnumberは向いてない」
って聞いたことがあります。

(Qiitaの仕様に文句を言ってるわけじゃないです。あくまでも例です)

そこで

僕が最も推す構成は、

<input
    type="text"
    pattern="^\d{6}$"
    autocomplete="one-time-code"
    inputmode="numeric"
    maxlength="6"/>

こんな感じです！

解説

type="text"

文字列のフィールドにします。

pattern="^\d{6}$"

正規表現で、一般的なワンタイムパスコードの形式(6桁の数字)のみ許可します。

autocomplete="one-time-code"

ブラウザに対して、「ここはワンタイムパスコードを入れるところだよ〜」と案内します。
(自動入力などに使われる)

inputmode="numeric"

ここが結構重要で、スマホなどで画面上に出てくるキーボードで、
数字入力キーボードにします。

maxlength="6"

入力できる最大の長さを指定します。
patternとの違いは、patternは送信時にブロックするためですが、
maxlengthは、指定することによってそれ以上入力できなくします。

最後に

昔はone-time-codeというautocompleteすらも調べても出てこなかったので、
いい時代になったな〜と思いました。

最後まで読んでいただきありがとうございます！