How To Create OTP Input Field Using HTML and CSS?

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

Hello, Coders! So far, we’ve learnt how to make pop-up logins, signup forms, and login forms. This post will teach you how to make an OTP Input Field using HTML, CSS, and 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.

Gym Website Using HTML and CSS With Source Code

Code by	Aixoxa
Project Download	Link Available Below
Language used	HTML, CSS And JavaScript
External link / Dependencies	No
Responsive	YES

OTP Input Field Table

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.

100+ HTML,CSS and JavaScript Projects With Source Code ( Beginners to Advanced)

Table of Contents

Step1: Html Otp Input Field 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 ).

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.

Portfolio Website using HTML and CSS (Source Code)

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:

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 For Styling Otp Input Field

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.

10+ HTML CSS Projects For Beginners with 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+ */
}

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

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

Restaurant Website Using HTML and CSS

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

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.

Create Ping Pong Game Using JavaScript (Source Code)

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:

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 the OTP input field using HTML, CSS and Javascript. Now, look at the live preview.

Final Output Of Otp Input Field Html Css:-

Live Preview Of Otp Input Field Html Css:-

<br /> See the Pen <a href="https://codepen.io/Aixoxa/pen/wvGYjbe" target="_blank" rel="noopener"><br /> OTP Page</a> by Aixoxa (<a href="https://codepen.io/Aixoxa" target="_blank" rel="noopener">@Aixoxa</a>)<br /> on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.<br />
Now We have Successfully created our OTP Input field using HTML , CSS and 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, and CSS to authenticate users on your website.

Login Signup Form Using HTML and CSS Code

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

follow : @codewithrandom

Written By : @arun

Code by : @Aixoxa

Which code editor do you use for this OTP Input Field project coding?

I personally recommend using VS Code Studio, it’s straightforward 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?

No!

CodeWithRandom

How To Create OTP Input Field Using HTML and CSS?

How To Create OTP Input Field Using HTML and CSS?

Step1: Html Otp Input Field Code:-

Output:

Step2: Adding the CSS Code For Styling Otp Input Field

Output:

Step3: Adding JavaScript Code

Final Output Of Otp Input Field Html Css:-

Live Preview Of Otp Input Field Html Css:-

Login Signup Form Using HTML and CSS Code

Which code editor do you use for this OTP Input Field project coding?

is this project responsive or not?

Do you use any external links to create this project?

Leave a Reply Cancel reply

Navigate

Subscribe Now

How To Create OTP Input Field Using HTML and CSS?

Step1: Html Otp Input Field Code:-

Output:

Step2: Adding the CSS Code For Styling Otp Input Field

Output:

Step3: Adding JavaScript Code

Final Output Of Otp Input Field Html Css:-

Live Preview Of Otp Input Field Html Css:-

Login Signup Form Using HTML and CSS Code

Which code editor do you use for this OTP Input Field project coding?

is this project responsive or not?

Do you use any external links to create this project?

You Might Also Like

Create Hamburger Menu Using Pure CSS Only

Form Validation Using HTML, CSS, and JavaScript

Minion Eyes Follow Mouse Cursor using JavaScript

Leave a Reply Cancel reply

Navigate

Subscribe Now