If you want to create OTP Input Field in HTML css then this article will help you. Here I will tell you step by step how to create OTP Input Field in HTML.
If you know basic html and css then you can easily know how to create OTP Input Field from this tutorial.
In today’s digital age, ensuring the security of online transactions and user data is of utmost importance. One of the widely adopted security measures is the One-Time Password (OTP) system, which provides an additional layer of authentication. OTPs are temporary codes sent to users’ registered devices to validate their identity.
OTP Input Field HTML CSS
Implementing a visually appealing and user-friendly OTP input field in HTML CSS not only enhances security but also improves the overall user experience. In this article, we will explore how to create an OTP input field using HTML and CSS.
See the Pen Awesome OTP Input Fields by Ground Tutorial (@groundtutorial) on CodePen.
As you can see in the demo above it is a simple OTP Input Field created by html css and javascript.
OTP Input Field in HTML CSS JavaScript
To create this OTP Input Field in HTML first you need to create basic structure by html. Then we need to create our basic structure by css. Finally we need to activate this OTP Input Field by Javascript.
OTP Input Field in HTML
To begin, let’s create the basic HTML structure for the OTP input field HTML CSS. We’ll use the <input> element with a type attribute of “text” to allow users to enter the OTP digits.
Additionally, we’ll use the maxlength attribute to limit the input to the desired number of digits, typically one.
<div class="otp-input-fields">
<input type="text" maxlength="1" />
<input type="text" maxlength="1" />
<input type="text" maxlength="1" />
<input type="text" maxlength="1" />
<input type="text" maxlength="1" />
<input type="text" maxlength="1" />
</div>
Design the OTP Input Field with CSS
Next, we’ll style the OTP input field to make it visually appealing and intuitive for users. We can use CSS to enhance the appearance and provide visual feedback during the OTP entry process.
@font-face {
font-family: "Roboto", sans-serif;
src: url("./../assets/fonts/Roboto-Bold.ttf");
font-weight: 700;
}
@font-face {
font-family: "Roboto", sans-serif;
src: url("./../assets/fonts/Roboto-Regular.ttf");
font-weight: 500;
}
@font-face {
font-family: "Roboto", sans-serif;
src: url("./../assets/fonts/Roboto-Light.ttf");
font-weight: 300;
}
body,
html {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: #0c1016;
font-size: 10px;
margin: 0;
padding: 0;
color: #00fff1;
font-family: "Roboto", sans-serif;
}
* {
box-sizing: border-box;
}
.otp-input-fields {
display: flex;
flex-direction: row;
}
.otp-input-fields input {
width: 4.9rem;
padding: 1.5rem;
font-size: 3rem;
border: none;
margin: 0 1rem 0 0;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 0.5rem;
color: #ffffff;
text-align: center;
transition: all 150ms ease-in-out;
}
.otp-input-fields input:last-child {
margin: 0 0 0 0;
}
.otp-input-fields input:focus {
color: #00fff1;
outline: 0.3rem solid #00fff1;
}
.otp-input-fields input:nth-child(3) {
margin: 0 3rem 0 0;
}
.otp-input-fields input:disabled {
opacity: 0.3;
}
Activate OTP Input Field by JavaScript
Now we need to make the OTP Input Field in HTML functional using javascript. To provide a seamless user experience, you can enhance the OTP input field by automatically focusing on the next input box after the user enters a digit. You can achieve this using JavaScript. Here’s an example implementation:
This line selects all the input fields with the class “otp-input-fields” and assigns them to the inputs variable.
const inputs = document.querySelectorAll(".otp-input-fields input");
This block of code adds event listeners to each input field. It sets the index of each input field as a data attribute (dataset.index) to keep track of the field’s position.
It attaches event listeners for the “focus”, “keydown”, “paste”, and “keyup” events to handle various input scenarios.
inputs.forEach((input, index) => {
input.dataset.index = index;
input.addEventListener("focus", clear);
input.addEventListener("keydown", clear);
input.addEventListener("paste", onPaste);
input.addEventListener("keyup", onKeyUp);
});
The clear function is called when the input field receives focus or a keydown event. It clears the input field’s value by setting it to an empty string.
function clear($event) {
$event.target.value = "";
}
The checkNumber function checks if the provided number is a valid digit (0-9).
function checkNumber(number) {
return /[0-9]/g.test(number);
}
The onPaste function is triggered when the user pastes content into an input field. It retrieves the pasted data, removes any spaces, and splits it into an array of individual characters. It checks if all the characters are valid digits using the checkNumber function.
If the length of the value matches the number of input fields, it assigns the values to the respective input fields and calls the submit function.
function onPaste($event) {
const data = $event.clipboardData.getData("text");
const value = data.replace(/ /g, "").split("");
if (!value.some((number) => !checkNumber(number))) {
if (value.length === inputs.length) {
inputs.forEach((input, index) => {
input.value = value[index];
});
submit();
}
} else {
return;
}
}
The onKeyUp function is called whenever a key is released in an input field. It checks for the Backspace key and moves the focus to the previous input field if the current field is not the first one.
If the entered value is a valid digit, it moves the focus to the next input field if there is one. If the current field is the last one and contains a non-empty value, it calls the submit function. If the entered value is not a valid digit, it clears the field.
function onKeyUp($event) {
const input = $event.target;
const value = input.value;
const fieldIndex = +input.dataset.index;
if ($event.key === "Backspace" && fieldIndex > 0) {
input.previousElementSibling.focus();
}
if (checkNumber(value)) {
if (value.length > 0 && fieldIndex < inputs.length - 1) {
input.nextElementSibling.focus();
}
if (input.value !== "" && fieldIndex === inputs.length - 1) {
submit();
}
} else {
clear($event);
}
}
The submit function is called when all the OTP digits are entered. It concatenates the values of all the input fields to form the OTP.
It also disables the input fields to prevent further input. In this example, it logs the OTP to the console, but you can modify it to perform the desired action, such as sending the OTP for verification.
function submit() {
let otp = "";
inputs.forEach((input) => {
otp += input.value;
input.disabled = true;
});
console.log(otp);
}
Implementing a visually appealing and user-friendly OTP input field using HTML and CSS can significantly enhance the security of online transactions and user data.
I have created many more articles using JavaScript. You can check out those articles if you need to know more about JavaScript. Comment me how you like this OTP Input Field HTML CSS tutorial.