주소를 입력하는 데 시간이 오래 걸리고 답답할 수 있습니다. 주소 입력란 2는 무엇을 위한 것인가요? 성이 없는 경우 성 필드에 무엇을 입력해야 하나요? 이러한 혼동을 피하고 사용자가 주소 양식을 작성할 수 있도록 지원하세요.
사용자 친화적인 양식 만들기
많은 양식에서 이름과 성에 각각 하나의 필드를 사용합니다.
하지만 성이 없거나 이름이 두 부분으로 구성되지 않은 경우 성 필드를 어떻게 작성해야 할까요? 이름 필드에 단일 <input>를 사용합니다. 다양한 이름 형식 처리에 대해 자세히 알아보세요.
연구에 따르면 주소 입력란 2는 사용자에게 혼란을 줄 수 있습니다. 전체 주소에 <textarea>를 사용하거나 주소 입력란 2 필드를 표시 <button> 뒤에 숨기는 것이 좋습니다.
양식 컨트롤 설명에 주의하세요.
예를 들어 미국에서는 우편번호, 영국에서는 우편번호라고 말합니다.
<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"를 사용합니다.