ប្រអប់បញ្ចូលអក្សរ

ប្រើសម្រាប់តម្លៃមួយជួរ ដែលស្លាក និងអក្សរជំនួយត្រូវប្រាប់ជាមុនថាគួរបំពេញអ្វី។

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

ប្រភព

HTML CSS

<div class="dc-field">
  <label class="dc-field__label" for="dc-field-name">받는 분 이름</label>
  <input class="dc-field__input" id="dc-field-name" type="text" name="name" placeholder="홍길동" aria-describedby="dc-field-name-help">
  <p class="dc-field__help" id="dc-field-name-help">주문서와 택배 송장에 그대로 인쇄됩니다.</p>
</div>

.dc-field {
  display: flex; flex-direction: column; gap: var(--dc-2);
  max-width: 420px; font-family: var(--dc-font);
}
.dc-field__label {
  font-size: 14px; font-weight: 600; color: var(--dc-text); line-height: 1.3;
}
.dc-field__req { color: var(--dc-danger); margin-left: 2px; }
.dc-field__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-family: inherit; font-size: 15px; line-height: 1.4;
  transition: border-color var(--dc-fast), box-shadow var(--dc-fast);
}
.dc-field__input::placeholder { color: var(--dc-text-mute); }
.dc-field__input:hover { border-color: var(--dc-line-bold); }
.dc-field__input:focus {
  outline: none; border-color: var(--dc-brand);
  box-shadow: 0 0 0 3px var(--dc-brand-soft);
}
.dc-field__input[aria-invalid="true"] { border-color: var(--dc-danger); }
.dc-field__input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--dc-danger-soft); }
.dc-field__input[disabled] {
  background: var(--dc-sunken); color: var(--dc-text-mute);
  border-color: var(--dc-line); cursor: not-allowed;
}
.dc-field__help { margin: 0; font-size: 13px; line-height: 1.5; color: var(--dc-text-sub); }
.dc-field__error {
  margin: 0; display: flex; align-items: flex-start; gap: var(--dc-1);
  font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--dc-danger);
}
.dc-field__ok {
  margin: 0; display: flex; align-items: flex-start; gap: var(--dc-1);
  font-size: 13px; line-height: 1.5; color: var(--dc-ok);
}

របៀបប្រើ

ដាក់ស្លាកនៅពីលើប្រអប់ជានិច្ច — អក្សរគំរូខាងក្នុងនឹងបាត់ពេលចាប់ផ្ដើមសរសេរ
អក្សរជំនួយត្រូវការមុនពេលសរសេរ សារកំហុសត្រូវការក្រោយពេលសរសេរ
សរសេរវិធីកែ មិនត្រឹមប្រាប់ថាខុស៖ «សូមសរសេរជាទម្រង់ 010-1234-5678»

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

មិនត្រូវប្រាប់កំហុសដោយពណ៌តែមួយ — ត្រូវមានអក្សរ និងរូបសញ្ញា
ស៊ុមប្រើ --dc-line-field ព្រោះបន្ទាត់ស្ដើងជាងនេះបាត់ក្នុងរបៀបងងឹត

បន្ទាប់

ប្រអប់បញ្ចូលលើកម្មវិធី ការបញ្ចូល កម្មវិធី

ប្រអប់លេខកូដ ៦ ការបញ្ចូល កម្មវិធី

របារស្វែងរកខាងក្រោម ការបញ្ចូល កម្មវិធី

ប្រអប់បញ្ចូលចំនួនប្រាក់ ការបញ្ចូល កម្មវិធី