주소 양식

주소 입력은 시간이 오래 걸리고 불편할 수 있습니다. 주소 입력란 2란 무엇인가요? 성이 없다면 Surname 입력란에 무엇을 입력해야 할까요? 이러한 혼란을 방지하고 사용자가 주소 양식을 작성하는 데 도움을 주세요.

주소 양식이 사용하기 쉬운지 확인

많은 양식에서 이름 입력란 하나와 성 입력란 하나를 사용합니다. 성이 없거나 이름이 두 부분으로 되어 있지 않은 사람도 있습니다. 성 입력란에는 어떻게 입력해야 할까요? 이름 필드에 단일 <input>를 사용합니다. 다양한 이름 형식 처리에 대해 자세히 알아보세요.

또한 상세 주소에 단일 <input>를 사용합니다. 모든 주소에 번지가 있는 것은 아닙니다.

양식 컨트롤 설명에 주의하세요. 예를 들어 미국의 사용자는 영국 우편번호ZIP을 사용합니다. <label for="zip">ZIP or postal code (optional)</label>를 사용하여 사용자가 입력할 데이터를 알 수 있게 합니다. 우편번호 입력란을 선택사항으로 설정합니다. 모든 주소에 우편번호가 있는 것은 아닙니다.

사용자가 주소를 입력하도록 지원

autocomplete 속성을 사용하면 사용자가 주소를 다시 입력할 수 있습니다.

  • autocomplete="name"
  • autocomplete="street-address"
  • autocomplete="postal-code"
  • autocomplete="country"

autocomplete에 공백으로 구분된 여러 값을 정의할 수 있습니다. 배송지 주소가 있는 양식과 청구서 수신 주소를 입력하는 양식이 있다고 가정해 보겠습니다. 청구서 수신 주소의 우편번호를 브라우저에 알리려면 autocomplete="billing postal-code"를 사용하면 됩니다. 배송지 주소의 경우 첫 번째 값으로 shipping를 사용합니다.

enterkeyhint 속성을 사용하여 터치 키보드의 Enter 키 라벨을 변경합니다. 마지막 양식 컨트롤에 enterkeyhint="done"를 사용하고 다른 양식 컨트롤에 enterkeyhint="next"를 사용합니다.

자료