Đến nội dung chính
EN KO VI NE KM ID
Thiết kế danh thiếp English Bộ sưu tập nhân vật 16 mẫu · PNG / SVG / PDF

Biểu mẫu địa chỉ

Tách phần do tra cứu mã bưu chính điền ra khỏi phần người dùng tự gõ, để một lỗi chính tả không làm giao sai hàng.

Mẫu biểu mẫu

Xem trước trực tiếp

Nguồn

<form class="dc-addr" action="#" method="post" novalidate>
  <h2 class="dc-addr__title">받는 곳</h2>

  <div class="dc-addr__field">
    <label class="dc-addr__label" for="dc-ad-zip">우편번호</label>
    <div class="dc-addr__row">
      <input class="dc-addr__input dc-addr__input--zip" id="dc-ad-zip" name="zip" type="text" inputmode="numeric" autocomplete="postal-code" maxlength="5" value="06236" readonly>
      <button class="dc-addr__search" type="button">주소 검색</button>
    </div>
    <p class="dc-addr__hint">검색으로 고른 주소가 들어갑니다. 직접 고치지 않습니다.</p>
  </div>

  <div class="dc-addr__field">
    <label class="dc-addr__label" for="dc-ad-base">기본 주소</label>
    <input class="dc-addr__input" id="dc-ad-base" name="address1" type="text" autocomplete="address-line1" value="서울 강남구 테헤란로 123" readonly>
  </div>

  <div class="dc-addr__field">
    <label class="dc-addr__label" for="dc-ad-detail">상세 주소</label>
    <input class="dc-addr__input" id="dc-ad-detail" name="address2" type="text" autocomplete="address-line2" placeholder="동 · 호수 · 층">
  </div>

  <div class="dc-addr__field">
    <label class="dc-addr__label" for="dc-ad-memo">배송 기사에게 남길 말 <span class="dc-addr__opt">선택</span></label>
    <input class="dc-addr__input" id="dc-ad-memo" name="memo" type="text" placeholder="안 계시면 경비실에 맡겨 주세요">
  </div>

  <label class="dc-addr__check">
    <input class="dc-addr__checkbox" type="checkbox" checked>
    <span>기본 배송지로 저장</span>
  </label>

  <button class="dc-addr__submit" type="submit">이 주소로 저장</button>
</form>
.dc-addr { display:flex; flex-direction:column; gap:var(--dc-4); width:100%; max-width:460px; 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-addr__title { font-size:18px; font-weight:700; color:var(--dc-text); }
.dc-addr__field { display:flex; flex-direction:column; gap:var(--dc-2); }
.dc-addr__label { font-size:13px; font-weight:600; color:var(--dc-text); }
.dc-addr__opt { margin-left:var(--dc-1); padding:1px var(--dc-2); border-radius:var(--dc-r-full); background:var(--dc-sunken); color:var(--dc-text-mute); font-size:11px; font-weight:600; }
.dc-addr__row { display:flex; gap:var(--dc-2); align-items:center; }
.dc-addr__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-addr__input::placeholder { color:var(--dc-text-mute); }
.dc-addr__input:focus { border-color:var(--dc-brand); box-shadow:0 0 0 3px var(--dc-brand-soft); }
.dc-addr__input[readonly] { background:var(--dc-sunken); color:var(--dc-text-sub); }
.dc-addr__input--zip { flex:0 0 120px; width:120px; letter-spacing:.06em; }
.dc-addr__input--bad { border-color:var(--dc-danger); }
.dc-addr__search { flex:0 0 auto; min-height:44px; padding:0 var(--dc-4); border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); background:var(--dc-sunken); color:var(--dc-text); font-size:13px; font-weight:600; cursor:pointer; }
.dc-addr__search:hover { background:var(--dc-brand-soft); color:var(--dc-brand-text); }
.dc-addr__select { 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; }
.dc-addr__grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--dc-3); }
.dc-addr__hint { font-size:12px; color:var(--dc-text-mute); }
.dc-addr__error { font-size:12px; color:var(--dc-danger); }
.dc-addr__check { display:flex; align-items:center; gap:var(--dc-2); min-height:44px; font-size:13px; color:var(--dc-text-sub); cursor:pointer; }
.dc-addr__checkbox { width:20px; height:20px; accent-color:var(--dc-brand); }
.dc-addr__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-addr__submit:hover { background:var(--dc-brand-hi); }
@media (max-width:420px) {
  .dc-addr { padding:var(--dc-4); }
  .dc-addr__grid { grid-template-columns:1fr; }
}

Cách dùng

  • Mã bưu chính và địa chỉ gốc lấy từ tra cứu và để chỉ đọc — địa chỉ gõ tay là nơi sinh ra giao hàng sai
  • Chỉ để hai ô cho người dùng: số nhà hoặc số phòng và lời nhắn cho người giao
  • Với địa chỉ nước ngoài, cho chọn quốc gia trước rồi đổi các ô theo nước đó

Điểm cần lưu ý

  • Đừng dùng disabled cho ô chỉ đọc: giá trị không được gửi và trình đọc màn hình bỏ qua. Hãy dùng readonly
  • Thêm inputmode=numeric cho ô mã bưu chính để điện thoại hiện bàn số

Tiếp theo