← 一覧へ

やってみよう数字を4つ押してみてください(正解は 1234)

入力フォームメジャー(よく見る)

数字キーパッド(暗証番号)

PIN Pad

画面に大きな数字ボタンが並び、押すたびに上の●が1つずつ埋まる。4桁そろうと確かめられる。

別名テンキーパスコード入力暗証番号の入力画面PINコード入力

どこで使われている?

よく見かける場所
スマホのロック画面、銀行・決済アプリ、アプリのパスコードロック
使うとよい場面
数字だけを、すばやく安全に入力してもらいたいとき
避けたい場面
文字やパスワードの入力(キーボードを使う方がよい)

AIへの指示文

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

HTML / CSS / JavaScript で「数字キーパッド(暗証番号)(PIN Pad)」を実装してください。

動き:画面下半分に0〜9と削除ボタンを大きな丸ボタンで並べ、押した数だけ上の丸(●)を塗りつぶす。決まった桁数になったら自動で確認し、間違いなら丸を横に揺らして消す。

使う部品:数字ボタンを並べて自作(inputmode="numeric" の入力欄でも可)
もっと詳しく:プログラムでの部品名

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

Webサイトなら数字ボタンを並べて自作(inputmode="numeric" の入力欄でも可)
iPhoneアプリなら自作(LazyVGrid で数字ボタンを並べる)
Androidアプリなら自作(LazyVerticalGrid で数字ボタンを並べる)
Flutterなら自作(pinput パッケージなど)
React Nativeなら自作(react-native-pin-view など)