Create Otp Input Field Html Css Javascript ( Source Code)
.png "Otp Input Field Html Css | Otp Input Using Html Css Javascript")
Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)
Video Tutorial Of Otp Input Field Html Css Javascript
Table of Contents
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
| Coding Language Used | Name of Coding language |
| 1. | Html |
| 2. | CSS |
| 3. | Javascript(Jquery) |
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
