Ā Let’s Create Otp Input Field Using Html,Css and jQuery
.png "Otp Input Field Html Css | Otp Input Using Html Css Javascript")
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.
Otp Input Field Html Css:-
| Code by | Vatsal Dave |
| Project Download | Link available below |
| Language used | HTML.CSS, JavaScript |
| External link / Dependencies | Yes |
| Responsive | YES |
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.
- 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.
Only Html Code 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.
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:-
Ā
Ā
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:-
[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Ā
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!
