Hi,
How to create OTP Verification Form in HTML using JavaScript?
When user click on button otp will be generated and user enter the otp and click verify button, that will be verified with the generated number and the entered number.
Hi makenzi.exc,
Please refer below sample for creating OTP Verification Form.
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div class="container"> <div id="inputs" class="inputs"> <input class="input" type="text" inputmode="numeric" maxlength="1" /> <input class="input" type="text" inputmode="numeric" maxlength="1" /> <input class="input" type="text" inputmode="numeric" maxlength="1" /> <input class="input" type="text" inputmode="numeric" maxlength="1" /> </div> </div> <style type="text/css"> body { font-family: Arial; font-size: 10pt; } .container { display: flex; justify-content: center; align-items: center; } .input { width: 40px; border: none; border-bottom: 3px solid rgba(0, 0, 0, 0.5); margin: 0 10px; text-align: center; cursor: not-allowed; pointer-events: none; } .input:focus { border-bottom: 3px solid purple; outline: none; } .input:nth-child(1) { cursor: pointer; pointer-events: all; } </style> <script> var inputs = document.getElementById("inputs"); inputs.addEventListener("input", function (e) { var target = e.target; var val = target.value; if (isNaN(val)) { target.value = ""; return; } if (val != "") { var next = target.nextElementSibling; if (next) { next.focus(); } } }); inputs.addEventListener("keyup", function (e) { var target = e.target; var key = e.key.toLowerCase(); if (key == "backspace" || key == "delete") { target.value = ""; var prev = target.previousElementSibling; if (prev) { prev.focus(); } return; } }); </script> </body> </html>
Demo
© COPYRIGHT 2025 ASPSnippets.com ALL RIGHTS RESERVED.