You are currently viewing How To Create OTP Input Field Using HTML , CSS & Javascript

How To Create OTP Input Field Using HTML , CSS & Javascript

Hello, Coders! So far, we’ve learnt how to make pop-up logins, signup forms, and login logins. This post will teach you how to make an OTP input using HTML, CSS, and JavaScript.

How To Create OTP Input Field Using HTML , CSS & Javascript?

A one-time password, also known as a one-time PIN, one-time authorization code or dynamic password, is a password that is valid for only one login session or transaction, on a computer system or other digital device By entering a one-time password, it is an authentication procedure that enables users to access any website. With the aid of this authentication system, users can log in safely using the OTP method.

In this article we will be learning how to create an OTP input filled using simple HTML , CSS and javascript concepts. By the end of this article you will create your own OTP field input and you will have a clear knowledge how to create a otp input field.

otp input field html css
Preview otp input field html css

 

I hope you must have got an idea about the project.

So,  Let’s OTP Input  Project By Adding The Source Codes. For That, First, We Are Using The Html Code.

Step1: HTML code

HTML is used to design the website’s layout. So, first, we create the layout, then we style it, and finally, we add features to the button (on clicking the button menu opens ).

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

Now we’ll look at our HTML code.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>OTP Input field</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Autofocus Field</title>
    <link rel="stylesheet" type="text/css" href="otp.css">
</head>
<body>
    <div class="container">
        <h1>ENTER OTP</h1>
        <div class="userInput">
            <input type="text" id='ist' maxlength="1" onkeyup="clickEvent(this,'sec')">
            <input type="text" id="sec" maxlength="1" onkeyup="clickEvent(this,'third')">
            <input type="text" id="third" maxlength="1" onkeyup="clickEvent(this,'fourth')">
            <input type="text" id="fourth" maxlength="1" onkeyup="clickEvent(this,'fifth')">
            <input type="text" id="fifth" maxlength="1">
        </div>
        <button>CONFIRM</button>
    </div>
</body>
</html>
 <script src="index.js"></script>
</body>

</html>

As you may have observed, most one-time passwords (OTPs) have a four-digit input size. To authenticate on a website, a user must first enter their 5-digit OTP and then click the confirm button. We’ll construct something resembling to that.

  • 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 H1 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 .

We have added the basic structure of our OTP input field . Let’s take look at our output.

Output:

otp input field html css
OTP input field HTML Preview

 

Before the code, you just need to add the CSS link to our HTML file so that we add styling to our website:

<link rel="stylesheet" href="style.css">

Keep note that you must add this link under the head tag .

Step2: Adding the CSS Code.

Cascading Style Sheets (CSS) is a markup language for describing the presentation of a document written in HTML or XML. CSS, like HTML and JavaScript, is a key component of the World Wide Web.

Now we will look at our CSS code.

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  background: #000000; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #434343,
    #000000
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #434343,
    #000000
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.container {
  display: flex;
  flex-flow: column;
  height: 100%;
  align-items: space-around;
  justify-content: center;
}

.userInput {
  display: flex;
  justify-content: center;
}

input {
  margin: 10px;
  height: 35px;
  width: 65px;
  border: none;
  border-radius: 5px;
  text-align: center;
  font-family: arimo;
  font-size: 1.2rem;
  background: #eef2f3;
}

h1 {
  text-align: center;
  font-family: arimo;
  color: honeydew;
}

button {
  width: 150px;
  height: 40px;
  margin: 25px auto 0px auto;
  font-family: arimo;
  font-size: 1.1rem;
  border: none;
  border-radius: 5px;
  letter-spacing: 2px;
  cursor: pointer;
  background: #616161; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #9bc5c3,
    #616161
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #9bc5c3,
    #616161
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

After we’ve added the CSS code, we’ll go over it step by step. To save time, you can simply copy this code and paste it into your IDE. Let us now examine our code step by step.

100+ Front-end Projects for Web developers (Source Code)

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.

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  background: #000000; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #434343,
    #000000
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #434343,
    #000000
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
otp input field html css
otp input field html css

 

Step2: Our OTP container will now get some design. We set its presentation to be “flex,” with column-wise flow, using the class selector (.container). The container’s height is set to 100%. The objects are arranged so that the space around them is evenly distributed. “Center” has been specified as the position.

.container {
  display: flex;
  flex-flow: column;
  height: 100%;
  align-items: space-around;
  justify-content: center;
}

otp input field html css

Step3: We will now style our User Input container. The objects are center-aligned, and the display is set to flex.

25+ Html Css Card Design Layout Style ( Source Code)

We’ll now style our input by utilising the tag selector. The margin is set to “10px.” Our was configured with 35 and 65 pixels for height and width, respectively. We have added a 5px border radius to our input field’s corner to give it some curviness. The backdrop colour is set to light blue, and the font size is “1.2 rem.”

.userInput {
  display: flex;
  justify-content: center;
}

input {
  margin: 10px;
  height: 35px;
  width: 65px;
  border: none;
  border-radius: 5px;
  text-align: center;
  font-family: arimo;
  font-size: 1.2rem;
  background: #eef2f3;
}
otp input field html css
otp input field html css

Step4: Now that our buttons and project heading have some style, we can finish. Our heading will now have styling, shall we? The “Arimo” font family is used with the text, which is positioned to the “centre.” “Honey dew” is the selected colour for the font.

Finally, let’s give our button some style. We chose “150px” and “40px” for the width and height, respectively. The text’s font size is set to “1.2 em.” We increased the letter spacing between the text by 2 pixels. To give our button more curve to our button edges, we also added a 5 px border radius. To make a gradient backdrop colour for our button, we combined the colours cyan blue and grey.

h1 {
  text-align: center;
  font-family: arimo;
  color: honeydew;
}

button {
  width: 150px;
  height: 40px;
  margin: 25px auto 0px auto;
  font-family: arimo;
  font-size: 1.1rem;
  border: none;
  border-radius: 5px;
  letter-spacing: 2px;
  cursor: pointer;
  background: #616161; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #9bc5c3,
    #616161
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #9bc5c3,
    #616161
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

Let’s look at our output now that we have added all the styling to our OTP input webpage.

Output:

otp input field
otp input field

Step3: Adding Javascript Code

function clickEvent(first,last){
  if(first.value.length){
    document.getElementById(last).focus();
  }
}

We recently added the function clickevent with the parameters first and last to javascript. This function will simply determine whether the first input contains the value before and will automatically focusing on the second and subsequent inputs for the third and fourth input.

Portfolio Website Using HTML ,CSS and Javascript Source Code

The project is now finished, we have completed OTP input field using HMTL ,CSS and Javascript. Now look at the live preview.

Output:

Codepen Preview Of OTP Input field


Now We have Successfully created our OTP Input field using  HTML , CSS & Javascript  . You can use this project directly by copying into your  IDE. WE hope you understood the project , If you any doubt feel free to comment!!

You may use this OTP input field on a signup and login form we’ve developed using HTML, CSS to authenticate users on your website.

SignUp & Login Form

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Written By : @arun
Code by : @Aixoxa

Leave a Reply