How to create an OTP Verification Pin Layout using HTML, CSS & JS?
Creating an OTP Verification Pin Layout using HTML, CSS, and JS involves several steps. Here is one approach to achieve this:
Step 1: Create HTML structure
The first step is to create the basic HTML structure for the OTP input field. We will create a container div with a form inside it, and inside the form, we will create a group of input fields to hold the OTP code.
<div class="otp-container">
<form id="otp-form">
<input type="text" name="digit-1" maxlength="1" pattern="\d" />
<input type="text" name="digit-2" maxlength="1" pattern="\d" />
<input type="text" name="digit-3" maxlength="1" pattern="\d" />
<input type="text" name="digit-4" maxlength="1" pattern="\d" />
<input type="text" name="digit-5" maxlength="1" pattern="\d" />
<input type="text" name="digit-6" maxlength="1" pattern="\d" />
</form>
</div>
Step 2: Style the OTP Container
Next, we'll add some CSS styles to our OTP container to center it on the page and give it a nice border.
.otp-container {
display: flex;
justify-content: center;
align-items: center;
margin-top: 50px;
}
#otp-form input {
border: 2px solid #ccc;
border-radius: 5px;
width: 50px;
height: 50px;
font-size: 24px;
text-align: center;
margin: 0 10px;
}
Step 3: Add JavaScript to handle input
We will use JavaScript to handle the input of the OTP code. We will add an event listener to each input field to listen for changes and move the focus to the next input field when the user enters a value.
const inputs = document.querySelectorAll('#otp-form input');
function handleInput(e) {
const input = e.target;
const nextInput = input.nextElementSibling;
if (input.value && nextInput) {
nextInput.focus();
}
}
inputs.forEach(input => {
input.addEventListener('input', handleInput);
});
Step 4: Add submit button
Finally, we'll add a submit button to the form to allow the user to submit their OTP code.
<div class="otp-container">
<form id="otp-form">
<input type="text" name="digit-1" maxlength="1" pattern="\d" />
<input type="text" name="digit-2" maxlength="1" pattern="\d" />
<input type="text" name="digit-3" maxlength="1" pattern="\d" />
<input type="text" name="digit-4" maxlength="1" pattern="\d" />
<input type="text" name="digit-5" maxlength="1" pattern="\d" />
<input type="text" name="digit-6" maxlength="1" pattern="\d" />
<button type="submit">Verify OTP</button>
</form>
</div>
Step 5: Handle form submission
We will use JavaScript to handle form submission and validate the OTP code. We will prevent the default form submission behavior and check if all the input fields have a value.
const otpForm = document.getElementById('otp-form');
function handleSubmit(e) {
e.preventDefault();
const otp = Array.from(inputs).map(input => input.value).join('');
if (otp.length !== 6) {
alert('Please enter a 6 digit OTP code.');
return;
}
// Send OTP code to server for verification
}
otpForm.addEventListener('submit', handleSubmit);
In this example, we are checking if the length of the OTP code is 6 digits. If it's not, we display an error message and prevent the form from submitting. Otherwise, we can send the OTP code to the server for verification.
You can customize this validation based on your requirements. For example, you can add regex patterns to check if the OTP code contains only digits, or you can add a timeout to expire the OTP code after a certain amount of time.
Note that this example only covers the front-end part of OTP verification. To actually verify the OTP code, you will need to integrate with a back-end service that generates and validates OTP codes.
If you enjoy this article or find it helpful. Please like, comment, and share this post.
Comments
Post a Comment