You are currently viewing Create Otp Input Field Html Css Javascript ( Source Code)

Create Otp Input Field Html Css Javascript ( Source Code)

Create Otp Input Field Html Css Javascript ( Source Code)

 

 

Welcome to the codewithrandom blog. In this article, we create Otp input field using html css javascript. We give the complete code of Otp input field.
 
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.
 

Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)

 
 

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.

Play Unlimited Quiz Of HTML, CSS, and JavaScript – Click Here

output

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.

Css Updated output For Otp input field

 

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();
}
}
}
});
});

Final output For Otp input field

 

 

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!

5+ 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
Coding Language Used Name of Coding language
1. Html
2. CSS
3. Javascript(Jquery)
Otp Input Field Html Css Javascript

You include backend also in this otp input field?

No, I use only Html Css and Jquery Code for Frontend Part

In this project you include otp input field validation or just otp input field styling and working?

Yes I did only frontend part coding there’s no otp input field validation

Leave a Reply