អេក្រង់លទ្ធផល

ប្រើសម្រាប់ទំព័របន្ទាប់ពីដំណើរការវែង៖ មានអ្វីកើតឡើង និងអ្វីដែលត្រូវធ្វើបន្ទាប់។

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

ប្រភព

HTML CSS

<section class="dc-res" aria-labelledby="dc-res-title">
  <span class="dc-res__mark dc-res__mark--ok" aria-hidden="true">
    <svg viewBox="0 0 24 24" focusable="false"><path d="M20.3 6.3 9.6 17a1.2 1.2 0 0 1-1.7 0L3.7 12.8a1.2 1.2 0 0 1 1.7-1.7l3.4 3.4 9.8-9.9a1.2 1.2 0 0 1 1.7 1.7Z"/></svg>
  </span>
  <h2 class="dc-res__title" id="dc-res-title">신청이 접수되었습니다</h2>
  <p class="dc-res__text">심사 결과는 3일 안에 등록한 번호로 문자로 보내 드립니다.</p>
  <dl class="dc-res__meta">
    <div class="dc-res__row"><dt class="dc-res__dt">접수번호</dt><dd class="dc-res__dd">2026-0912-0431</dd></div>
    <div class="dc-res__row"><dt class="dc-res__dt">접수일</dt><dd class="dc-res__dd">2026-09-12</dd></div>
  </dl>
  <div class="dc-res__actions">
    <a class="dc-res__btn dc-res__btn--main" href="#">접수 내역 보기</a>
    <a class="dc-res__btn" href="#">처음 화면으로</a>
  </div>
</section>

.dc-res {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--dc-3);
  max-width: 440px; margin: 0 auto;
  padding: var(--dc-7) var(--dc-5);
  border: 1px solid var(--dc-line);
  border-radius: var(--dc-r-lg);
  background: var(--dc-surface);
  text-align: center;
  font-family: var(--dc-font);
}
.dc-res__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: var(--dc-r-full);
}
.dc-res__mark svg { width: 32px; height: 32px; fill: currentColor; }
.dc-res__mark--ok { background: var(--dc-ok-soft); color: var(--dc-ok); }
.dc-res__mark--bad { background: var(--dc-danger-soft); color: var(--dc-danger); }
.dc-res__title { margin: 0; font-size: 20px; line-height: 1.4; color: var(--dc-text); }
.dc-res__text { margin: 0; font-size: 14px; line-height: 1.7; color: var(--dc-text-sub); }
.dc-res__meta {
  display: flex; flex-direction: column; gap: var(--dc-1);
  width: 100%; margin: var(--dc-2) 0 0;
  padding: var(--dc-3) var(--dc-4);
  border-radius: var(--dc-r-sm);
  background: var(--dc-sunken);
}
.dc-res__row { display: flex; justify-content: space-between; gap: var(--dc-3); font-size: 13px; }
.dc-res__dt { color: var(--dc-text-sub); }
.dc-res__dd { margin: 0; font-family: var(--dc-mono); color: var(--dc-text); }
.dc-res__actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--dc-2);
  width: 100%; margin-top: var(--dc-3);
}
.dc-res__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 var(--dc-5);
  border: 1px solid var(--dc-line-field);
  border-radius: var(--dc-r-sm);
  background: var(--dc-surface); color: var(--dc-text);
  font-size: 15px; font-weight: 600; text-decoration: none;
}
.dc-res__btn--main { border-color: var(--dc-brand); background: var(--dc-brand); color: var(--dc-text-on); }
@media (max-width: 420px) {
  .dc-res { padding: var(--dc-6) var(--dc-4); }
  .dc-res__btn { flex: 1 1 100%; }
}

របៀបប្រើ

ឲ្យចំណងជើងប្រាប់លទ្ធផលឲ្យចប់ — 'ពាក្យសុំត្រូវបានទទួល' មិនមែន 'រួចរាល់'
ដាក់លេខដែលគេត្រូវត្រឡប់មករកឲ្យដាច់ដោយឡែក (លេខសំណុំ, កូដកំហុស) នៅកន្លែងចម្លងបានស្រួល
ប៊ូតុងច្រើនបំផុតពីរ ហើយអេក្រង់បរាជ័យត្រូវមានផ្លូវព្យាយាមម្ដងទៀត

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

បរាជ័យប្រើ role=alert, ជោគជ័យប្រើ role=status — បើដូរគ្នា កំហុសនឹងកន្លងទៅស្ងាត់
មិនត្រូវបញ្ចប់ត្រឹម 'មានកំហុសកើតឡើង' — ប្រាប់មូលហេតុ និងជំហានបន្ទាប់

បន្ទាប់

របារសារខ្លី មតិត្រឡប់ កម្មវិធី

អូសដើម្បីផ្ទុកឡើងវិញ មតិត្រឡប់ កម្មវិធី

រង្វង់វឌ្ឍនភាព មតិត្រឡប់ កម្មវិធី វេប

ចំណុចជំហាន មតិត្រឡប់ កម្មវិធី