ប្រអប់បញ្ចូលលើកម្មវិធី
ប្រអប់បញ្ចូលមួយបន្ទាត់សម្រាប់ម្រាមដៃ លើអេក្រង់ដែលក្តារចុចបាំងពាក់កណ្តាល។
មើលជាមុនផ្ទាល់
ប្រភព
<div class="dc-fieldapp">
<label class="dc-fieldapp__label" for="dc-fa-name">이름 <span class="dc-fieldapp__req">필수</span></label>
<input class="dc-fieldapp__input" id="dc-fa-name" type="text" placeholder="홍길동" autocomplete="name" aria-describedby="dc-fa-name-h" />
<p class="dc-fieldapp__hint" id="dc-fa-name-h">신분증에 적힌 이름 그대로 적습니다.</p>
</div>.dc-fieldapp { padding:var(--dc-4); background:var(--dc-bg); font-family:var(--dc-font); }
.dc-fieldapp__label { display:flex; align-items:center; gap:var(--dc-2); margin-bottom:var(--dc-2); font-size:14px; font-weight:600; color:var(--dc-text); }
.dc-fieldapp__req { padding:2px var(--dc-2); border-radius:var(--dc-r-full); background:var(--dc-danger-soft); color:var(--dc-danger); font-size:11px; font-weight:700; }
.dc-fieldapp__input { display:block; width:100%; min-height:48px; 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:var(--dc-font); font-size:16px; }
.dc-fieldapp__input::placeholder { color:var(--dc-text-mute); }
.dc-fieldapp__input:focus { outline:none; border-color:var(--dc-brand); box-shadow:0 0 0 3px var(--dc-brand-soft); }
.dc-fieldapp__input.is-error { border-color:var(--dc-danger); }
.dc-fieldapp__input.is-error:focus { box-shadow:0 0 0 3px var(--dc-danger-soft); }
.dc-fieldapp__hint { margin:var(--dc-2) 0 0; font-size:13px; line-height:1.5; color:var(--dc-text-mute); }
.dc-fieldapp__err { margin:var(--dc-2) 0 0; font-size:13px; font-weight:600; line-height:1.5; color:var(--dc-danger); }
.dc-fieldapp__row { display:flex; gap:var(--dc-2); }
.dc-fieldapp__row .dc-fieldapp__input { flex:1 1 auto; min-width:0; }
.dc-fieldapp__pre { display:inline-flex; align-items:center; min-height:48px; padding:0 var(--dc-3); border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); background:var(--dc-sunken); color:var(--dc-text-sub); font-size:16px; white-space:nowrap; }
.dc-fieldapp__area { display:block; width:100%; min-height:96px; padding: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:var(--dc-font); font-size:16px; line-height:1.5; resize:vertical; }
.dc-fieldapp__area::placeholder { color:var(--dc-text-mute); }
.dc-fieldapp__area:focus { outline:none; border-color:var(--dc-brand); box-shadow:0 0 0 3px var(--dc-brand-soft); }របៀបប្រើ
- ដាក់ស្លាកនៅពីលើប្រអប់ ដើម្បីឲ្យឃើញពេលកំពុងសរសេរ — អក្សរណែនាំក្នុងប្រអប់មិនជំនួសស្លាកទេ
- ទំហំអក្សរ ១៦px ឬធំជាង បើតូចជាងនេះ iOS នឹងពង្រីកអេក្រង់ពេលចុចប្រអប់
- ប្រអប់ដែលទទួលតែលេខ ត្រូវដាក់ inputmode ដើម្បីបើកក្តារចុចលេខ
ចំណុចត្រូវប្រុងប្រយ័ត្ន
- កុំឲ្យកម្ពស់តិចជាង ៤៨px — ចន្លោះតូចពីលើក្តារចុចពិបាកចុចណាស់
- ដាក់សារកំហុសនៅក្រោមប្រអប់ ហើយភ្ជាប់ដោយ aria-describedby; បន្ទាត់ក្រហមតែម្យ៉ាងមិនប្រាប់អ្វីទេ