Skip to content
No results
  • Home
  • HTML & CSS
    • Card Designs
    • Navbars
    • Login Forms
  • JavaScript
    • JavaScript Games
    • API Projects
  • Web Development
    • Frontend
    • Backend
  • Cheatsheets
  • Home
  • About us
  • Contact Us
  • Privacy Policy
Twitter Instagram Telegram Pinterest
Coding Torque

Learn by projects๐Ÿš€

  • Home
  • HTML & CSS
    • Card Designs
    • Navbars
    • Login Forms
  • JavaScript
    • JavaScript Games
    • API Projects
  • Web Development
    • Frontend
    • Backend
  • Cheatsheets
Coding Torque

Learn by projects๐Ÿš€

OTP input field form using html css and javascript

OTP input field using HTML & CSS

  • Piyush PatilPiyush Patil
  • March 6, 2023
  • HTML & CSS, Beginner, Frontend, JavaScript, Login Forms, Web Development
Share your love

Hello, coding enthusiasts! Are you interested in improving your front-end development skills? In this tutorial, we’ll be exploring HTML and CSS to create a sleek and modern One-Time Password (OTP) input field. OTP is a vital security feature used in many applications and websites today, and creating a user-friendly and intuitive OTP input field is crucial for enhancing the user experience. By following this tutorial, you will learn how to implement various HTML and CSS techniques, including form design, animations, and hover effects. So, let’s dive into the world of front-end development and create a stunning OTP input field together!

Before we start here are some more Projects you might like to try –

  • Virtual Credit Card Design using HTML & CSS
  • CSS Glassmorphism Cards with Hover Effects
  • Travel Service Cards with Rotation Effect using HTML & CSS

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

HTML Code 

Starter Template

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome CDN  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
        integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
        crossorigin="anonymous" />

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <title>OTP Field Form - Coding Torque</title>
</head>

<body>
    <!-- Further code here -->

    <script src="script.js"></script>

</body>

</html>

Paste the below code in your <body> tag.

<p>OTP sent on ....12@gmail.com</p>
<h1>Enter OTP</h1>
<div class="otp-field">
    <input type="text" maxlength="1" />
    <input type="text" maxlength="1" />
    <input class="space" type="text" maxlength="1" />
    <input type="text" maxlength="1" />
    <input type="text" maxlength="1" />
    <input type="text" maxlength="1" />
</div>

Output Till Now

CSS Code 

Create a file style.css and paste the code below.

body {
  margin: 0;
  font-family: "Poppins", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: #282a36;
  height: 100vh;
  color: #fff;
}

.otp-field {
  display: flex;
}

.otp-field input {
  width: 24px;
  font-size: 32px;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
  margin: 2px;
  border: 2px solid #55525c;
  background: #21232d;
  font-weight: bold;
  color: #fff;
  outline: none;
  transition: all 0.1s;
}

.otp-field input:focus {
  border: 2px solid #a527ff;
  box-shadow: 0 0 2px 2px #a527ff6a;
}

.disabled {
  opacity: 0.5;
}

.space {
  margin-right: 1rem !important;
}

Output Till Now

OTP input field form using html css and javascript

JavaScript Code 

Create a file script.js and paste the code below.

const inputs = document.querySelectorAll(".otp-field input");

inputs.forEach((input, index) => {
    input.dataset.index = index;
    input.addEventListener("keyup", handleOtp);
    input.addEventListener("paste", handleOnPasteOtp);
});

function handleOtp(e) {
    /**
     * <input type="text" ๐Ÿ‘‰ maxlength="1" />
     * ๐Ÿ‘‰ NOTE: On mobile devices `maxlength` property isn't supported,
     * So we to write our own logic to make it work. ๐Ÿ™‚
     */
    const input = e.target;
    let value = input.value;
    let isValidInput = value.match(/[0-9a-z]/gi);
    input.value = "";
    input.value = isValidInput ? value[0] : "";

    let fieldIndex = input.dataset.index;
    if (fieldIndex < inputs.length - 1 && isValidInput) {
        input.nextElementSibling.focus();
    }

    if (e.key === "Backspace" && fieldIndex > 0) {
        input.previousElementSibling.focus();
    }

    if (fieldIndex == inputs.length - 1 && isValidInput) {
        submit();
    }
}

function handleOnPasteOtp(e) {
    const data = e.clipboardData.getData("text");
    const value = data.split("");
    if (value.length === inputs.length) {
        inputs.forEach((input, index) => (input.value = value[index]));
        submit();
    }
}

function submit() {
    console.log("Submitting...");
    // ๐Ÿ‘‡ Entered OTP
    let otp = "";
    inputs.forEach((input) => {
        otp += input.value;
        input.disabled = true;
        input.classList.add("disabled");
    });
    console.log(otp);
    // ๐Ÿ‘‰ Call API below
}

Written by: Piyush Patil

If you have any doubts or any project ideas feel free to Contact Us

Hope you find this post helpful๐Ÿ’–

Share your love
text to speech converter using javascript
Previous Post Text to Speech Converter using JavaScript
Next Post Detect Key Pressed using JavaScript
detect key pressed using javascript
Recent Posts
  • How To Perform CRUD Operations in MongoDB

    How To Perform CRUD Operations in MongoDB

    April 1, 2023
  • Virtual Credit Card Design using HTML & CSS

    Virtual Credit Card Design using HTML & CSS

    March 29, 2023
  • CSS Glassmorphism Cards with Hover Effects

    CSS Glassmorphism Cards with Hover Effects

    March 28, 2023
  • Travel Service Cards with Rotation Effect using HTML & CSS

    Travel Service Cards with Rotation Effect using HTML & CSS

    March 27, 2023
  • Responsive Glittery Credit Card using HTML and CSS

    Responsive Glittery Credit Card using HTML and CSS

    March 26, 2023
Categories
Advance Algorithms API Projects App Development Backend Beginner Blockchain Development Bootstrap Card Designs Cheatsheets Coding Express JS Frontend HTML & CSS Intermediate JavaScript JavaScript Games Login Forms MongoDB Navbars Node JS Products Programming React Reel SCSS TailwindCSS Web Design Web Development

Related Posts

how to perform CRUD Operations on MongoDB

How To Perform CRUD Operations in MongoDB

  • April 1, 2023
Virtual Credit Card Design using HTML & CSS

Virtual Credit Card Design using HTML & CSS

  • March 29, 2023
CSS Glassmorphism Cards with Hover Effects

CSS Glassmorphism Cards with Hover Effects

  • March 28, 2023
About Us

Coding Torque is a platform where we share amazing projects related Web development, App development, Software development, etc with Source Code.

Important Links
  • About us
  • Contact Us
  • Privacy Policy
Categories
Advance Algorithms API Projects App Development Backend Beginner Blockchain Development Bootstrap Card Designs Cheatsheets Coding Express JS Frontend HTML & CSS Intermediate JavaScript JavaScript Games Login Forms MongoDB Navbars Node JS Products Programming React Reel SCSS TailwindCSS Web Design Web Development

Copyright ยฉ 2023 - Coding Torque | Design by Piyush Patil

Twitter Instagram Telegram Pinterest