Đến nội dung chính
EN KO VI NE KM ID
Thiết kế danh thiếp English Bộ sưu tập nhân vật 16 mẫu · PNG / SVG / PDF

Sáu ô mã xác minh

Nơi gõ lại mã nhận qua tin nhắn — thời gian chờ và cách gửi lại phải cùng nằm ở đây.

Nhập liệu

Xem trước trực tiếp

Nguồn

<form class="dc-otp" action="#">
  <fieldset class="dc-otp__set">
    <legend class="dc-otp__legend">문자로 받은 인증번호 6자리</legend>
    <div class="dc-otp__row">
      <input class="dc-otp__cell" type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="1" value="4" aria-label="인증번호 1번째 자리" />
      <input class="dc-otp__cell" type="text" inputmode="numeric" maxlength="1" value="9" aria-label="인증번호 2번째 자리" />
      <input class="dc-otp__cell" type="text" inputmode="numeric" maxlength="1" value="1" aria-label="인증번호 3번째 자리" />
      <input class="dc-otp__cell" type="text" inputmode="numeric" maxlength="1" value="" aria-label="인증번호 4번째 자리" />
      <input class="dc-otp__cell" type="text" inputmode="numeric" maxlength="1" value="" aria-label="인증번호 5번째 자리" />
      <input class="dc-otp__cell" type="text" inputmode="numeric" maxlength="1" value="" aria-label="인증번호 6번째 자리" />
    </div>
  </fieldset>
  <p class="dc-otp__hint">010-1234-5678 로 보냈습니다.</p>
  <div class="dc-otp__foot">
    <span class="dc-otp__timer">2:43</span>
    <button class="dc-otp__resend" type="button">다시 받기</button>
  </div>
</form>
.dc-otp { padding:var(--dc-4); background:var(--dc-bg); font-family:var(--dc-font); }
.dc-otp__set { min-width:0; margin:0; padding:0; border:0; }
.dc-otp__legend { padding:0; margin-bottom:var(--dc-3); font-size:15px; font-weight:600; color:var(--dc-text); }
.dc-otp__row { display:flex; gap:var(--dc-2); }
.dc-otp__cell { flex:1 1 0; min-width:0; height:56px; padding:0; border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); background:var(--dc-surface); color:var(--dc-text); font-family:var(--dc-mono); font-size:24px; font-weight:600; text-align:center; }
.dc-otp__cell:focus { outline:none; border-color:var(--dc-brand); box-shadow:0 0 0 3px var(--dc-brand-soft); }
.dc-otp__cell.is-error { border-color:var(--dc-danger); background:var(--dc-danger-soft); color:var(--dc-danger); }
.dc-otp__hint { margin:var(--dc-3) 0 0; font-size:13px; color:var(--dc-text-mute); }
.dc-otp__err { margin:var(--dc-3) 0 0; font-size:13px; font-weight:600; line-height:1.5; color:var(--dc-danger); }
.dc-otp__ok { display:flex; align-items:center; gap:var(--dc-2); margin:var(--dc-3) 0 0; font-size:13px; font-weight:600; color:var(--dc-ok); }
.dc-otp__okico { flex:none; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.dc-otp__foot { display:flex; align-items:center; justify-content:space-between; gap:var(--dc-3); margin-top:var(--dc-4); }
.dc-otp__timer { font-family:var(--dc-mono); font-size:14px; color:var(--dc-text-sub); }
.dc-otp__timer.is-low { color:var(--dc-danger); font-weight:600; }
.dc-otp__resend { min-height:44px; padding:0 var(--dc-4); border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); background:var(--dc-surface); color:var(--dc-text); font-family:var(--dc-font); font-size:14px; font-weight:600; }
.dc-otp__resend:hover { background:var(--dc-sunken); }
.dc-otp__resend[disabled] { border-color:var(--dc-line); color:var(--dc-text-mute); cursor:not-allowed; }

Cách dùng

  • Thêm autocomplete=one-time-code để điện thoại tự điền từ tin nhắn
  • Mỗi ô một chữ số, nhưng dán một lần phải điền đủ sáu ô
  • Để đồng hồ đếm ngược và nút gửi lại ngay dưới các ô

Điểm cần lưu ý

  • Mỗi ô cần aria-label nói rõ là ô thứ mấy — sáu ô trống không có tên để đọc
  • Khi mã sai, hãy nói sai ở đâu thay vì xoá sạch cả sáu ô

Tiếp theo