Formulir masuk
Layar yang harus dilewati pengguna lama dalam hitungan detik, dan yang menunjukkan jalan keluar saat mereka gagal masuk.
Pratinjau langsung
Sumber
<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); }Cara memakainya
- Minta dua hal saja: email dan kata sandi — tiap kolom tambahan menambah orang yang menyerah
- Isi autocomplete dengan username dan current-password agar peramban dan pengelola sandi bisa mengisinya
- Selalu sediakan tautan lupa sandi dan daftar di layar ini
Hal yang perlu diwaspadai
- Jangan ungkap mana yang salah, email atau sandi, tetapi umumkan kegagalannya dengan role=alert
- Garis tepi kolom harus --dc-line-field; --dc-line terlalu tipis dan tidak mencapai 3:1