इनलाइन त्रुटि

भरेको कुरा किन मिलेन भन्ने त्यही बाकसको तल देखाउनुपर्दा प्रयोग गर्ने टुक्रा।

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

स्रोत

HTML CSS

<div class="dc-field">
  <label class="dc-field__label" for="dc-ie-phone">휴대전화 번호</label>
  <input class="dc-field__input dc-field__input--bad" id="dc-ie-phone" name="phone" type="tel" value="010-1234" autocomplete="tel" aria-invalid="true" aria-describedby="dc-ie-phone-msg">
  <p class="dc-field__msg dc-field__msg--bad" id="dc-ie-phone-msg">
    <svg class="dc-field__msg-icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M8 1.4a6.6 6.6 0 1 0 0 13.2A6.6 6.6 0 0 0 8 1.4Zm.8 10.2H7.2V10h1.6v1.6Zm0-3H7.2V4.2h1.6v4.4Z"/></svg>
    <span>번호 11자리를 모두 입력해 주세요. 예) 010-1234-5678</span>
  </p>
</div>

.dc-field {
  display: flex; flex-direction: column; gap: var(--dc-2);
  max-width: 360px;
  font-family: var(--dc-font);
}
.dc-field__label { font-size: 13px; font-weight: 600; color: var(--dc-text); }
.dc-field__input {
  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;
}
.dc-field__input--bad {
  border-width: 2px; border-color: var(--dc-danger);
  box-shadow: 0 0 0 3px var(--dc-danger-soft);
}
.dc-field__msg {
  display: flex; align-items: flex-start; gap: var(--dc-2);
  margin: 0; font-size: 13px; line-height: 1.55;
}
.dc-field__msg-icon { flex: none; width: 16px; height: 16px; margin-top: 2px; fill: currentColor; }
.dc-field__msg--bad { color: var(--dc-danger); font-weight: 600; }
.dc-field__msg--ok { color: var(--dc-ok); }
.dc-errform {
  display: flex; flex-direction: column; gap: var(--dc-5);
  max-width: 440px;
  font-family: var(--dc-font);
}
.dc-errsum {
  max-width: 440px; padding: var(--dc-4);
  border: 1px solid color-mix(in srgb, var(--dc-danger) 40%, transparent);
  border-left: 4px solid var(--dc-danger);
  border-radius: var(--dc-r-sm);
  background: var(--dc-danger-soft);
  font-family: var(--dc-font);
}
.dc-errsum__title { margin: 0 0 var(--dc-2); font-size: 14px; font-weight: 700; color: var(--dc-text); }
.dc-errsum__list { display: flex; flex-direction: column; gap: var(--dc-1); margin: 0; padding: 0; list-style: none; }
.dc-errsum__link { display: inline-block; font-size: 13px; color: var(--dc-danger); text-decoration: underline; }

कसरी प्रयोग गर्ने

के गलत भयो भन्ने मात्र नभई के लेख्नुपर्छ भन्नुहोस् — उदाहरण पनि दिनुहोस्
पठाउने बटन थिचेपछि नभई बाकस छोड्दा जाँच्नुहोस्
धेरै बाकस बिग्रिए माथि त्रुटि सारांश राखी प्रत्येकमा जाने लिंक दिनुहोस्

ध्यान दिनुपर्ने कुरा

रातो किनारा मात्रै भए वर्णअन्धलाई थाहै हुन्न — अक्षर र आइकन पनि राख्नुहोस्
aria-invalid र aria-describedby बिना स्क्रिन रिडरले त्रुटि पढ्दैन

अर्को

गोलो प्रगति प्रतिक्रिया एप वेब

पङ्क्तिभित्रको सूचना प्रतिक्रिया एप वेब

सूचना ब्यानर प्रतिक्रिया वेब

प्रगति पट्टी प्रतिक्रिया एप वेब