You are currently viewing Create Otp Input Field Using Html,Css & JavaScript ( Source Code)

Create Otp Input Field Using Html,Css & JavaScript ( Source Code)

Telegram Group Join Now

 Otp Input Field Using Html,Css & JavaScript

Otp Input Field Html Css | Otp Input Using Html Css Javascript
 

 

Hi there, coders! You will discover how to create an OTP input using HTML, CSS, and JavaScript in this post. Users can paste their OTPS for any online transaction and other services in the OTP Input Field that will be created.
 
A one-time password is a password that is only valid for one login session or transaction on a computer system or other digital device. It is sometimes referred to as a one-time PIN, one-time authorisation code, or dynamic password. It is an authentication process that allows users to visit any website by entering a one-time password. The OTP method can be used by users to log in securely with the help of this authentication mechanism.
 
 
We learn how we create an Otp input field. We use html, css, and javascript for Otp input field. I hope you enjoy our blog so let’s start with a basic html structure for the Otp input field.
Code by Vatsal Dave
Project Download Link available below
Language used HTML.CSS, JavaScript
External link / Dependencies Yes
Responsive YES
Otp input field Table
 
 

Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)

 

Video Tutorial Of Otp Input Field Html Css Javascript

 

ADVERTISEMENT

HTML Code For Otp input field

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>OTP Input</title>
<!-- styles -->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="prompt">
Enter the code generated on your mobile device below to log in!
</div>
<form method="get" class="digit-group" data-group-name="digits" data-autosubmit="false" autocomplete="off">
<input type="text" id="digit-1" name="digit-1" data-next="digit-2" />
<input type="text" id="digit-2" name="digit-2" data-next="digit-3" data-previous="digit-1" />
<input type="text" id="digit-3" name="digit-3" data-next="digit-4" data-previous="digit-2" />
<input type="text" id="digit-4" name="digit-4" data-next="digit-5" data-previous="digit-3" />
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>

There is all the HTML code for the OTP Input Field. Now, you can see an output with Otp Input Field then we write Css and javascript for Otp Input Field.

  • Our OTP input structure will be supported by a div container that we will first design.
  • “Enter OTP” will now be added as our primary heading utilising the using the div tag.
  • The OTP input area will now be made for that. For that, we’ll make a div with the class “userInput,” inside of which we’ll place four text-only input fields, and we’ll give each one a onkeyup event.
  • Now using the button tag we will add a confirm button .
Hamburger Menu Using HTML,CSS and JavaScript

output

Otp Input Field Html Css | Otp Input Using Html Css Javascript
 

CSS code For Otp input field

@import url('https://fonts.googleapis.com/css?family=Raleway:200');
body, html {
height: 100%;
margin: 0;
font-family: 'Raleway', sans-serif;
font-weight: 200;
}
body {
background-color: #0f0f1a;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.digit-group input {
width: 30px;
height: 50px;
background-color: #18182a;
border: none;
line-height: 50px;
text-align: center;
font-size: 24px;
font-family: 'Raleway', sans-serif;
font-weight: 200;
color: white;
margin: 0 2px;
}
.digit-group .splitter {
padding: 0 5px;
color: white;
font-size: 24px;
}
.prompt {
margin-bottom: 20px;
font-size: 20px;
color: white;
}

There is all the CSS code for the OTP Input Field. Now, you can see an output with CSS Otp Input Field then we write javascript for Otp Input Field functionality.

Step1: We’ll give our body padding and a zero margin by using the body tag. Our body is sized to be that height (100 vh). The colour of the backdrop has been added for various browsers, however they are all the same. We’ve included a background that is a gradation of black and grey.

Step2: Now using the class selector (.digit-group input) we will add a background color of black and the display is set to “flex” and using the align-item property we will align the text  to the “center” and the width and height is set as 30px and 50px respectively and the font-family is set to “Raleway”. 

Create Stopwatch Using HTML,CSS and JavaScript

Css Updated output For Otp input field

 

Otp Input Field Html Css | Otp Input Using Html Css Javascript
 

 

Javascript Code For Otp input field

$('.digit-group').find('input').each(function() {
$(this).attr('maxlength', 1);
$(this).on('keyup', function(e) {
var parent = $($(this).parent());
if(e.keyCode === 8 || e.keyCode === 37) {
var prev = parent.find('input#' + $(this).data('previous'));
if(prev.length) {
$(prev).select();
}
} else if((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 65 && e.keyCode <= 90) || (e.keyCode >= 96 && e.keyCode <= 105) || e.keyCode === 39) {
var next = parent.find('input#' + $(this).data('next'));
if(next.length) {
$(next).select();
} else {
if(parent.data('autosubmit')) {
parent.submit();
}
}
}
});
});

The input area for the OTP will be triggered when the user pushes the up key, and we will also include an auto-submission option so that when the OTP is fully filled out and confirmed by the system, it is automatically sent. Both of these features will be included in our javascript.

Final output For Otp input field

Otp Input Field Html Css | Otp Input Using Html Css Javascript Otp Input Field Html Css | Otp Input Using Html Css Javascript
 
 
 

 

Now that we have completed our javascript section,  Here is our updated output with javascript. Hope you like the OTP Input Field with html,css, and javascript. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you!

10+ HTML CSS project With Source Code

This post teaches us how to create an OTP Input Field using simple HTML & CSS and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

Code By – Vatsal Dave
 
FAQ For Otp Input Field Html Css Javascript

Which code editor do you use for this Otp Input Fieldproject coding?

I personally recommend using VS Code Studio, it’s very simple and easy to use.

is this project responsive or not?

Yes! this project is a responsive project.

Do you use any external links to create this project?

Yes!

Telegram Group Join Now

Leave a Reply