Đế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

Biểu mẫu đăng nhập

Màn hình người quay lại cần vượt qua trong vài giây, và chỉ rõ phải đi đâu khi họ không vào được.

Mẫu biểu mẫu

Xem trước trực tiếp

Nguồn

<form class="dc-login" action="#" method="post" novalidate>
  <div class="dc-login__head">
    <h2 class="dc-login__title">로그인</h2>
    <p class="dc-login__sub">가입할 때 쓴 이메일과 비밀번호를 넣으세요.</p>
  </div>

  <div class="dc-login__field">
    <label class="dc-login__label" for="dc-login-id">이메일</label>
    <input class="dc-login__input" id="dc-login-id" name="email" type="email" inputmode="email" autocomplete="username" placeholder="[email protected]">
  </div>

  <div class="dc-login__field">
    <label class="dc-login__label" for="dc-login-pw">비밀번호</label>
    <input class="dc-login__input" id="dc-login-pw" name="password" type="password" autocomplete="current-password">
  </div>

  <div class="dc-login__row">
    <label class="dc-login__check">
      <input class="dc-login__checkbox" type="checkbox" name="remember" checked>
      <span>로그인 상태 유지</span>
    </label>
    <a class="dc-login__link" href="#">비밀번호를 잊었어요</a>
  </div>

  <button class="dc-login__submit" type="submit">로그인</button>

  <p class="dc-login__foot">아직 계정이 없으세요? <a class="dc-login__link" href="#">회원가입</a></p>
</form>
.dc-login { display:flex; flex-direction:column; gap:var(--dc-4); width:100%; max-width:400px; margin-inline:auto; padding:var(--dc-6); border:1px solid var(--dc-line); border-radius:var(--dc-r-lg); background:var(--dc-surface); box-shadow:var(--dc-sh-1); font-family:var(--dc-font); }
.dc-login__head { display:flex; flex-direction:column; gap:var(--dc-1); }
.dc-login__title { font-size:20px; font-weight:700; letter-spacing:-.01em; color:var(--dc-text); }
.dc-login__sub { font-size:13px; color:var(--dc-text-sub); }
.dc-login__alert { padding:var(--dc-3); border:1px solid var(--dc-danger); border-radius:var(--dc-r-sm); background:var(--dc-danger-soft); color:var(--dc-danger); font-size:13px; line-height:1.5; }
.dc-login__field { display:flex; flex-direction:column; gap:var(--dc-2); }
.dc-login__label { font-size:13px; font-weight:600; color:var(--dc-text); }
.dc-login__input { width:100%; min-height:44px; padding:0 var(--dc-3); border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); background:var(--dc-surface); color:var(--dc-text); font-size:15px; transition:border-color var(--dc-fast), box-shadow var(--dc-fast); }
.dc-login__input::placeholder { color:var(--dc-text-mute); }
.dc-login__input:focus { border-color:var(--dc-brand); box-shadow:0 0 0 3px var(--dc-brand-soft); }
.dc-login__input--bad { border-color:var(--dc-danger); }
.dc-login__error { font-size:12px; color:var(--dc-danger); }
.dc-login__row { display:flex; align-items:center; justify-content:space-between; gap:var(--dc-3); flex-wrap:wrap; }
.dc-login__check { display:inline-flex; align-items:center; gap:var(--dc-2); min-height:44px; font-size:13px; color:var(--dc-text-sub); cursor:pointer; }
.dc-login__checkbox { width:18px; height:18px; accent-color:var(--dc-brand); }
.dc-login__link { color:var(--dc-brand); font-size:13px; }
.dc-login__submit { min-height:48px; padding:0 var(--dc-4); border:1px solid transparent; border-radius:var(--dc-r-sm); background:var(--dc-brand); color:var(--dc-text-on); font-size:15px; font-weight:700; cursor:pointer; transition:background var(--dc-fast); }
.dc-login__submit:hover { background:var(--dc-brand-hi); }
.dc-login__foot { font-size:13px; color:var(--dc-text-sub); text-align:center; }
.dc-login__divider { display:flex; align-items:center; gap:var(--dc-3); font-size:12px; color:var(--dc-text-mute); }
.dc-login__divider::before, .dc-login__divider::after { content:""; flex:1; height:1px; background:var(--dc-line); }
.dc-login__social { display:flex; flex-direction:column; gap:var(--dc-2); }
.dc-login__social-btn { min-height:48px; border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); background:var(--dc-surface); color:var(--dc-text); font-size:14px; font-weight:600; cursor:pointer; }
.dc-login__social-btn:hover { background:var(--dc-sunken); }

Cách dùng

  • Chỉ hỏi hai thứ: email và mật khẩu — thêm ô là thêm người bỏ giữa đường
  • Khai autocomplete là username và current-password để trình duyệt và trình quản lý mật khẩu tự điền
  • Luôn để liên kết quên mật khẩu và đăng ký ngay trên màn hình này

Điểm cần lưu ý

  • Đừng nói rõ sai email hay sai mật khẩu, nhưng hãy báo lỗi bằng role=alert để trình đọc màn hình đọc được
  • Viền ô nhập phải dùng --dc-line-field, vì --dc-line quá nhạt, không đạt 3:1

Tiếp theo