लगइन फारम

फर्केर आउने प्रयोगकर्ताले सेकेन्डमै पार गर्नुपर्ने पर्दा — अड्किए कहाँ जाने भन्ने बाटो पनि यहीँ हुनुपर्छ।

प्रत्यक्ष पूर्वावलोकन

स्रोत

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 पुग्दैन

अर्को

खाता खोल्ने फारम फारम ढाँचा वेब

ठेगाना फारम फारम ढाँचा वेब

फिल्टर प्यानल फारम ढाँचा वेब

खोज नतिजाको पङ्क्ति फारम ढाँचा वेब