How to make OTP verification form
with HTML,CSS and JavaScript
Assuming you are looking for a structure that is intended for checking one-time passwords and need to figure out how to make it in HTML CSS and JavaScript then this blog could satisfy you needs. In this blog you will figure out how to How to make OTP Confirmation Structure in HTML CSS and JavaScript. You will figure out how to structure the structure and info fields utilizing HTML, how to style the structure and information fields utilizing CSS, and how to deal with the structure accommodation and confirm the OTP utilizing JavaScript.
An OTP (once secret word) structure is a kind of structure used to check the personality of a client by expecting them to enter an extraordinary code that is shipped off their email or telephone number. OTPs are usually utilized as a safety effort to forestall unapproved admittance to delicate data or records. Examine the given picture of our OTP Check Structure. As you can find in this structure we wil have one symbol at top, text, five info fields and a button. To watch the demo of this venture and make this OTP Structure bit by bit you can watch the given video instructional exercise.
OTP Verification Form with HTML CSS and JavaScript | Video Tutorial
OTP Verification Form with HTML CSS and JavaScript [Source Codes]
To make OTP Verification Form follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be style and its extension .js
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source code.
First, paste the following codes into your index.html file
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>OTP Verification</title>
- <link rel="stylesheet" href="style.css">
- <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
- <script src="script.js" defer></script>
- </head>
- <body>
- <div class="container">
- <header>
- <i class="bx bxs-check-shield"></i>
- </header>
- <p>Enter the OTP code sent to your phone</p>
- <form action="#">
- <div class="input-field">
- <input type="text" maxlength="1" minlength="1" pattern="\d*" required>
- <input type="text" maxlength="1" minlength="1" pattern="\d*" required>
- <input type="text" maxlength="1" minlength="1" pattern="\d*" required>
- <input type="text" maxlength="1" minlength="1" pattern="\d*" required>
- <input type="text" maxlength="1" minlength="1" pattern="\d*" required>
- </div>
- <button>Verify</button>
- </form>
- <p>Didn't get the code? <a href="#">Resend </a></p>
- <p id="timer">0:00</p>
- </div>
-
- <script src="script.js"></script>
- </body>
- </html>
-
Now paste the following codes into your style.css file
- * {
- margin: 0;
- padding: 0;
- box-sizing: border box;
- font-family: "Poppins", sans-serif;
- }
- body {
- min-height: 100vh;
- display: flex;
- align-items: center;
- justify-content: center;
- background: linear-gradient(to bottom right, #251264, #313340);
- }
- :where(.container, form, .input-field, header) {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- }
- .container {
- background: #f2f2f2;
- padding: 30px 65px;
- border-radius: 12px;
- row-gap: 20px;
- box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
- }
- .container header {
- height: 65px;
- width: 65px;
- background: green;
- color: #fff;
- font-size: 2.5rem;
- border-radius: 50%;
- }
- .container h4 {
- font-size: 1.25rem;
- color: #333;
- font-weight: 500;
- }
- form .input-field {
- flex-direction: row;
- column-gap: 10px;
- }
- .input-field input {
- height: 45px;
- width: 42px;
- border-radius: 6px;
- outline: none;
- font-size: 1.125rem;
- text-align: center;
- border: 1px solid #ddd;
- }
- .input-field input:focus {
- box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
- }
- .input-field input::-webkit-inner-spin-button,
- .input-field input::-webkit-outer-spin-button {
- display: none;
- }
- form button {
- margin-top: 25px;
- width: 100%;
- color: #fff;
- font-size: 1rem;
- border: none;
- padding: 9px 0;
- cursor: pointer;
- border-radius: 6px;
- pointer-events: none;
- background: #6e93f7;
- transition: all 0.2s ease;
- }
- form button.active {
- background: #4070f4;
- pointer-events: auto;
- }
- form button:hover {
- background: #0e4bf1;
- }
-
Now paste the following codes into your script.js file
-
- // Function to start the timer
- function startTimer() {
- let timeLeft = 60; // Set the time limit (60 seconds in this case)
- const timerDisplay = document.getElementById('timer');
-
- const timer = setInterval(() => {
- const minutes = Math.floor(timeLeft / 60);
- let seconds = timeLeft % 60;
- seconds = seconds < 10 ? `0${seconds}` : seconds;
-
- timerDisplay.innerText = `${minutes}:${seconds}`;
-
- if (timeLeft <= 0) {
- clearInterval(timer);
- // If the time has elapsed, show the resend option
- timerDisplay.style.display = 'none'; // Hide the timer display
- document.querySelector('p').style.display = 'block'; // Show the "Resend" text
- } else {
- timeLeft--;
- }
- }, 1000); // Update the timer every 1 second (1000 milliseconds)
- }
-
- // Call the function to start the timer
- startTimer();
-
If you face any difficulties while creating your OTP Verification Form or your code is not working as expected, you can download the source code files for this Card for free by clicking on the download button.