សំណុំបែបបទចូល

អេក្រង់ដែលអ្នកប្រើត្រឡប់មកវិញគួរឆ្លងកាត់ក្នុងរយៈពេលពីរបីវិនាទី ហើយបើចូលមិនបាន ត្រូវប្រាប់ផ្លូវបន្ទាប់ភ្លាម។

មើលជាមុនផ្ទាល់

ប្រភព

HTML CSS

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

របៀបប្រើ

សួរតែពីរយ៉ាង៖ អ៊ីមែល និងពាក្យសម្ងាត់ — សួរច្រើនជាងនេះ អ្នកប្រើនឹងបោះបង់
កំណត់ autocomplete ជា username និង current-password ដើម្បីឲ្យកម្មវិធីរុករកបំពេញជំនួស
ដាក់តំណភ្លេចពាក្យសម្ងាត់ និងតំណចុះឈ្មោះនៅលើអេក្រង់នេះជានិច្ច

ចំណុចត្រូវប្រុងប្រយ័ត្ន

មិនបញ្ជាក់ថាខុសអ៊ីមែល ឬខុសពាក្យសម្ងាត់ ប៉ុន្តែត្រូវប្រកាសកំហុសដោយ role=alert
ស៊ុមប្រអប់បញ្ចូលត្រូវប្រើ --dc-line-field ព្រោះ --dc-line ស្រាលពេក មិនដល់ 3:1

បន្ទាប់

សំណុំបែបបទចុះឈ្មោះ គំរូបែបបទ វេប

សំណុំបែបបទអាសយដ្ឋាន គំរូបែបបទ វេប

ផ្ទាំងច្រោះ គំរូបែបបទ វេប

ជួរលទ្ធផលស្វែងរក គំរូបែបបទ វេប