Create an Elegant 4-Digit OTP Input Form with HTML, CSS, and JavaScript.

Author - Maketechstuff
November 12, 2023
0

In this blog post you’ll learn to create OTP input fields using HTML CSS and JavaScript. which automatically shift focus between fields, and have animations to enhance user experience. We going to make 4-digit OTP form. This is just the frontend design. You may have seen OTP verification form on many websites or apps, its use for security purposes.


otp input fields forms


Key features of this OTP Form:

  • Number-only input: Ensure accurate OTP entry by restricting characters to numbers.
  • Auto-focus switching: Automatic navigation between input fields as you enter each digit. Means auto shift focus of input fields according to user keyboard input.
  • Dynamic input animation: OTP field animations for a delightful user experience.
  • Dynamic Button: Enable button only when all input fields or whole opt has entered.
  • Auto focus on first input field on page loads.


Use or Potential of OTP Input Fields:

  • Enhance security for online transactions and account access.
  • Streamline user authentication processes for a smooth and secure experience.
  • Implement OTP input fields in various web applications and platforms.

However, this is just the frontend (design) there is not backend functionality. 


Video Tutorial on Creating OTP Input Fields.



Animated OTP Input Fields.

File structure.

  • Index.html
  • Index.css

I have also use JavaScript but I added inside the html file in a script tag below closing body tag. You can also create new JavaScript field with name index.js and link it with html document.


Steps to Create this OTP input fields.


Step 1: Create the design of OTP form.

First, we going to create design of OTP form using HTML and CSS. I have made inactive button means it’s not clickable. We only enable it when all input fields are filled or OTP entered.


HTML


<!DOCTYPE html>
<html lang="en">
<!-- Maketechstuff | maketechstuff.com -->

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OTP Input Form | maketechstuff.com</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>

    <div class="board">
        <h2>Enter OTP</h2>
        <div class="box">
            <form action="#">
                <div class="input_field_box">
                    <input type="number" class="input_text">
                    <input type="number" class="input_text">
                    <input type="number" class="input_text">
                    <input type="number" class="input_text">
                </div>
                <p>Please enter the 4-digit one time password (OTP) that we sent to your registered email id.</p>
                <button type="submit" class="button">Verify</button>
            </form>
        </div>
    </div>

</body>
<script>

</script>

</html>

CSS


* {
    padding: 0;
    margin: 0;
    font-family: sans-serif;
}

body {
    width: 100%;
    height: 100vh;
    position: relative;
    background-color: royalblue;
}
.board{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    width: 300px;
    background-color: #fff;
    padding: 20px 40px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 0px 10px -5px #000;
}
h2{
    margin-bottom: 20px;
    margin-top: 15px;
}
input{
    width: 50px;
    height: 50px;
    font-size: 25px;
    text-align: center;
    margin: 0px 5px;
    border-radius: 5px;
    pointer-events: none;
    border: 1.5px solid blue;
    outline: none;
}
input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button{
    display: none;
}
p{
    font-size: 12px;
    color: #a1a1a1;
    margin: 20px 0px;
}
button{
    width: 100%;
    font-size: 20px;
    font-weight: bold;
    padding: 10px 30px;
    background-color: #f2f2f2;
    color: #000;
    border: none;
    border-radius: 5px;
    pointer-events: none;
    transition: 0.5s;
}
button:active{
    transform: scale(0.9);
}
.button_active{
    pointer-events: fill;
    cursor: pointer;
    background-color: blue;
    color: #fff;
    box-shadow: 0px 5px 20px -10px blue;
}

Output:


OTP input fields


Now let’s add JavaScript for some functionality.


Also read: Create input field with type text, but allow only number or numeric values in it using JavaScript.


Step 2: Add functionality to focus on input field which is empty (if not focused).

Now after creating design let's first add functionality to add focus on input field only which is empty. Means if user unfocused the OTP input from middle and if again click in OTP input field, then the focus applies to only empty input field, no matter which input field user have clicked it only get focus to first input field which is empty.


For this functionality we going to use for loop of JavaScript.


Also read: Input field border animation on focus using only HTML and CSS.


JavaScript


    let input_fields = document.querySelectorAll(".input_text");
    let input_field_box = document.querySelector(".input_field_box");
    let button = document.querySelector(".button");

    // For first input field to focus when page loads.
    input_fields[0].focus();

    // Set focus to the first empty input field.
    input_field_box.onclick = function(){
        for (let f = 0; f < input_fields.length; f++) {
            const element = input_fields[f];
            if(element.value.length == 0){
                element.focus();
                break;
            }else{
                element.focus();
            }
            
        }
    }


Step 3: Add functionality to activate button if full OTP entered.

Now we going to create a function for checking all input fields value are entered or not if entered correctly then only we enable the button (because we have made it no clickable from CSS) otherwise make it disable. For that we going to use for loop of JavaScript. And here we call this function when user writes (on key up event). In the next step.


We also add some animation to input fields.


Also read: Enable button only when input field has value.

Also read: Show button based on input field value using JavaScript.


JavaScript


    function active_button(){
        for (let b = 0; b < input_fields.length; b++) {
            const element = input_fields[b];
            // Adding box shadows to input fields containing value.
            if(element.value.length !== 0){
                element.style.boxShadow = "0px 10px 10px -12px blue";
            }else{
                element.style.boxShadow = "none";

            }

            // Enable button when all input field are filled.
            if(element.value.length !== 0 || element.value.length == 1){
                button.classList.add("button_active");
            }else{
                button.classList.remove("button_active");
            }
            
        }
    }


Step 4: Add functionality of auto shifting focus on input field according to input.

Now let’s add functionality to add input and automatic shifting focus in input field. For that we going to using foreach method of JavaScript.


We also check all input fields value are entered or not for enabling the button for click. So, for that we going to call function on key up event that we created above.


JavaScript


    // Functionality to limit each input field to a single value.
    // Functionality to automatically shift focus to nex input field when the user has entered a value, without requiring manual focus.
    input_fields.forEach((element, index) => {
        element.onkeyup = function (e) {
            active_button();
            if (e.key !== "Backspace") {
                // We want ti add only one value per input field. If the user adds more than one value, we will remove all values. To add value in input fields, user have to add only one value.
                if(element.value.length > 1){
                    element.value = "";
                }

                // Checking if index is at last input field or not.
                // Here index is use to focus on input fields.
                // If index is not at last input field then we go inside if condition or if condition will true.
                if(index != input_fields.length - 1){
                    // If index is not at last input field then we check if user have entered one value in input field or not.
                    if(element.value.length == 1){
                        // If user have entered only one value in input field then we blur the input field. And the shift the focus to next input field.
                        element.blur();
                        input_fields[index + 1].focus();
                    }
                }

            }

            // If user click on backspace.
            if (e.key === "Backspace") {
                // We check that if index is on 1st input field or not. If not then if condition will be true.
                if(index !== 0){
                    // Blur the focused input field.
                    element.blur();
                    // Shifting the focus to previous input field.
                    input_fields[index - 1].focus();
                }
            }
        }
    });


That’s it you can see demo and whole tutorial in above YouTube video. You’ll find final well commented code below.


You may like:

  1. How to generate a random OTP using JavaScript.
  2. How to create a input field border animation using HTML and CSS.
  3. How to create a input field animation on focus using HTML, CSS and JavaScript.
  4. How to generate random numbers usign JavaScript.
  5. How to generate the captcha using JavaScript.
  6. How to create a captcha generator and functionality to verify it using JavaScript.
  7. Check if input field is empty or not using JavaScript.
  8. Create input field that accept only number.


Full code:



That’s it, OTP input fields are ready using HTML CSS & JavaScript. If you have any query or suggestion you can write in comment section.


Thanks for reading this far.


Tags

You may like these posts

Show more

Post a Comment

0Comments

Share your thoughts.

Post a Comment (0)
Share to other apps
Copy Post Link
To Top