Verify UI using HTML, CSS & JavaScript

4 min read
Account Verification UI Demo

Project Overview

This project provides a clean and user-friendly interface for account verification, commonly used in two-factor authentication (2FA) or email confirmation flows. It features a set of six input boxes designed for entering a verification code.

The key feature is the seamless user experience provided by the JavaScript logic. As the user types a digit into an input box, the focus automatically shifts to the next box, allowing for rapid code entry without needing to manually click or tab. Similarly, pressing backspace moves the focus to the previous box. The UI is built with a minimalist dark theme, ensuring it is easy on the eyes and integrates well into modern application designs.

HTML Structure

The HTML consists of a container with a heading, a descriptive paragraph, and the six input fields for the verification code.


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Verify Account</title>
  </head>
  <body>
    <div class="container">
      <h2>Verify Your Account</h2>
      <p>
        We emailed you the six digit code to webstromtech@email.com <br />
        Enter the code below to confirm your email address.
      </p>
      <div class="code-container">
        <input
          type="number"
          class="code"
          placeholder="0"
          min="0"
          max="9"
          required
        />
        <input
          type="number"
          class="code"
          placeholder="0"
          min="0"
          max="9"
          required
        />
        <input
          type="number"
          class="code"
          placeholder="0"
          min="0"
          max="9"
          required
        />
        <input
          type="number"
          class="code"
          placeholder="0"
          min="0"
          max="9"
          required
        />
        <input
          type="number"
          class="code"
          placeholder="0"
          min="0"
          max="9"
          required
        />
        <input
          type="number"
          class="code"
          placeholder="0"
          min="0"
          max="9"
          required
        />
      </div>
      <small class="info">
        This is design only. We didn't actually send you an email as we don't
        have your email, right?
      </small>
    </div>
    <script src="script.js"></script>
  </body>
</html>
                        

CSS Styling

The CSS provides a clean, dark-themed, and responsive layout for the verification component.


@import url("https://fonts.googleapis.com/css2?family=Muli:wght@300;700&display=swap");

* {
  box-sizing: border-box;
}

body {
    color: white;
  background-color: #000000;
  font-family: "Muli", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

.container {
  background-color: #000000;
  border: 3px #ffffff solid;
  border-radius: 10px;
  padding: 30px;
  max-width: 1000px;
  text-align: center;
}

.code-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 40px 0;
}

.code {
  border-radius: 5px;
  font-size: 75px;
  height: 120px;
  width: 100px;
  border: 1px solid #eee;
  margin: 1%;
  text-align: center;
  font-weight: 300;
  -moz-appearance: textfield;
}

.code::-webkit-inner-spin-button,
.code::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.code:valid {
  border-color: #3498db;
  box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.25);
}

.info {
  background-color: #ffffff;
  display: inline-block;
  padding: 10px;
  line-height: 20px;
  max-width: 400px;
  color: #000000;
  border-radius: 5px;
}

@media (max-width: 800px) {
  .code-container {
    flex-wrap: wrap;
  }

  .code {
    font-size: 50px;
    height: 70px;
    max-width: 60px;
  }
}
                        

JavaScript Logic

This JavaScript handles the auto-focus functionality between the input fields for a smooth user experience.


const codes = document.querySelectorAll(".code");

codes[0].focus();

codes.forEach((code, index) => {
  code.addEventListener("keydown", (e) => {
    if (e.key >= 0 && e.key < 9) {
      codes[index].value = "";
      setTimeout(() => {
        codes[index + 1].focus();
      }, 10);
    } else if (e.key === "Backspace") {
      setTimeout(() => {
        codes[index - 1].focus();
      }, 10);
    }
  });
});
                        

Live Demo: Verify UI

Watch a live demonstration of the Verify UI component below.

Final Thoughts

The account verification UI is a critical component in modern web security. This project provides a simple yet effective implementation that prioritizes user experience. The automatic focus shifting removes friction from the code entry process, reducing user frustration and potential errors. The clean design is easily adaptable to any application's style guide.

You can easily customize this component by:

  • Changing the number of input fields by adjusting the HTML and the JavaScript loop.
  • Modifying the CSS to match your brand's colors, fonts, and sizes.
  • Adding logic to automatically submit the form after the last digit is entered.
  • Integrating it with a backend service to validate the entered code.

Pro Tip

For enhanced accessibility and usability, consider adding a "paste" event listener. This would allow users to paste a copied code directly, and your JavaScript could automatically populate all the input fields at once.

Ready to Use This Project?

Click the button below to download the full source code. Download will be ready in 10 seconds.

Stay Updated

Receive coding tips and resources updates. No spam.

We respect your privacy. Unsubscribe at any time.