Skip to content
EN KO VI NE KM ID
Design business cards Character collection 16 designs · PNG / SVG / PDF

Address form

Keeps what a postcode lookup fills in apart from what a person types, so one typo does not misroute a delivery.

Form patterns

Live preview

Source

<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; }
}

How to use it

  • Fill the postcode and base address from a lookup and keep them read-only — hand-typed addresses are where deliveries go wrong
  • Leave the person two fields: the unit detail and a note for the courier
  • For overseas addresses let people pick the country first, then swap the fields — order and names differ by country

Watch out for

  • Do not use disabled for read-only fields: the value is not submitted and screen readers skip it. Use readonly
  • Put inputmode=numeric on the postcode so phones show a number pad

Next