Membuat Input OTP PIN Dengan HTML dan CSS

Pada artikel ini, kita akan mengetahui cara membuat Halaman OTP / PIN Dengan Bidang Input Fokus Otomatis hanya dengan menggunakan HTML dan CSS saja. Di beberapa artikel sudah banyak yang membahas cara membuat inputan ini, namun kurang praktis karena menggunakan banyak inputan untuk angka OTP misalnya kita membutuhkan 6 kotak input, maka harus menyediakan 6 inputan. Namun di artikel ini kita hanya menggunakan satu iputan saja (single input text) untuk membuat halaman input OTP dan PIN.

Kita hanya memerlukan HTML dan CSS saja karena ini hanya sebuah desain UI saja. Untuk menjalankan fungsinya mungkin kita memerlukan JavaScript dan PHP namun tidak akan dibahas pada artikel ini.

Membuat 6 Digit Inputan

<div class="otp-input-wrapper">
  <input type="text" maxlength="6" pattern="[0-9]*" autocomplete="off">
  <svg viewBox="0 0 240 1" xmlns="http://www.w3.org/2000/svg">
    <line x1="0" y1="0" x2="240" y2="0" stroke="#3e3e3e" stroke-width="2" stroke-dasharray="33,8" />
  </svg>
</div>

.otp-input-wrapper {
  width: 350px;
  text-align: left;
  display: inline-block;
}
.otp-input-wrapper input {
  padding: 0;
  width: 360px;
  font-size: 32px;
  font-weight: 600;
  color: #3e3e3e;
  background-color: transparent;
  border: 0;
  margin-left: 12px;
  letter-spacing: 43px;
  font-family: sans-serif !important;
}
.otp-input-wrapper input:focus {
  box-shadow: none;
  outline: none;
}
.otp-input-wrapper svg {
  position: relative;
  display: block;
  width: 350px;
  height: 2px;
}

Output Program :

Membuat 4 Digit Inputan

<div class="otp-input-wrapper">
  <input type="text" maxlength="4" pattern="[0-9]*" autocomplete="off">
  <svg viewBox="0 0 240 1" xmlns="http://www.w3.org/2000/svg">
    <line x1="0" y1="0" x2="240" y2="0" stroke="#3e3e3e" stroke-width="2" stroke-dasharray="44,22" />
  </svg>
</div>

.otp-input-wrapper {
  width: 240px;
  text-align: left;
  display: inline-block;
}
.otp-input-wrapper input {
  padding: 0;
  width: 264px;
  font-size: 32px;
  font-weight: 600;
  color: #3e3e3e;
  background-color: transparent;
  border: 0;
  margin-left: 12px;
  letter-spacing: 48px;
  font-family: sans-serif !important;
}
.otp-input-wrapper input:focus {
  box-shadow: none;
  outline: none;
}
.otp-input-wrapper svg {
  position: relative;
  display: block;
  width: 240px;
  height: 2px;
}

Output Program :