otp input field html css

Create Otp Input Field Using Html and Css (Source Code)

 Let’s Create Otp Input Field Using Html,Css and jQuery

Otp Input Field Using Html and Css

 

Hi Coders! Welcome to the Codewithrandom blog. In this article, you learn how to create an OTP input using HTML and CSS. We use a little bit of jQuery code to insert 1 by 1 OTP in the input field. 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 authorization 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.
 
 

Otp Input Field Html Css:-

 
We learn how we create an Otp input field. We use Html, Css, and JavaScript (jQuery)for the Otp input field.
Code byVatsal Dave
Project DownloadLink available below
Language usedHTML.CSS, JavaScript
External link / DependenciesYes
ResponsiveYES
Otp input field Table
 

Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)

Video Tutorial Of Otp Input Field Html Css Javascript

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 utilizing 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

Only Html Code Output:-

Otp Input Field Using Html and Css
 

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 color 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” 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

Html+ Css Updated output For Otp input field:-

 

Otp Input Field Using Html and Css
 

 

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 filled out and confirmed by the system, it is automatically sent. Both of these features will be included in our javascript.

Restaurant Website Using HTML And CSS With Source Code

Final Output For Otp input field Using Html,Css, and jQuery:-

Otp Input Field Using Html and Css
 

[su_button id=”download” url=”https://drive.google.com/drive/folders/1eu3lUKsiVA9vT7UX-nUbtsF7Kbq5HRRp?usp=sharing” target=”blank” style=”3d” size=”11″ wide=”yes” center=”yes” icon=”icon: download”]DOWNLOAD CODE NOW[/su_button]

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

Written by – Code With Random/Anki 

Code By – Vatsal Dave
 
FAQ:-

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!



Leave a Reply