주소 양식 권장사항 Codelab

Sam Dutton

다양한 이름과 주소 형식에 잘 맞는 양식을 디자인하려면 어떻게 해야 하나요? 보조 형식 결함은 사용자를 짜증 나게 하고, 사용자가 사이트를 떠나거나 구매를 포기하게 만들 수 있습니다. 가입할 수 있습니다.

이 Codelab에서는 대부분의 사용자에게 적합하며 사용하기 쉽고 액세스 가능한 양식을 빌드하는 방법을 보여줍니다.

1단계: HTML 요소 및 속성 최대한 활용

이 Codelab의 이 부분은 빈 양식(제목과 버튼만 모두 사용)으로 시작합니다. 있습니다. 그런 다음 입력을 추가합니다. CSS와 약간의 자바스크립트는 이미 included.)

  • 수정할 리믹스를 클릭하여 프로젝트를 수정할 수 있도록 합니다.

  • 다음 코드를 사용하여 이름 필드를 <form> 요소에 추가합니다.

<section>
  <label for="name">Name</label>
  <input id="name" name="name">
</section>

이름 필드 하나만 사용하면 복잡하고 반복적으로 보일 수 있지만 이미 많은 작업을 수행하고 있습니다.

label의 for 속성을 다음과 일치시켜 label를 input와 연결했습니다. input의 name 또는 id입니다. 라벨을 탭하거나 클릭하면 포커스가 입력 항목으로 이동하므로 더 효과적으로 타겟팅할 수 있습니다. 손가락, 엄지 손가락, 마우스를 움직이는 데 유용합니다. 스크린 리더 알림 라벨 텍스트입니다.

name="name"은(는) 어떠신가요? 이것은 데이터와 연결된 이름('이름'이라고 함)입니다. 양식 제출 시 서버로 전송되는 이 입력에서 반환됩니다. name 속성 포함 또한 FormData API로 이 요소의 데이터에 액세스할 수 있습니다.

2단계: 사용자의 데이터 입력에 도움이 되는 속성 추가

Chrome에서 이름 입력을 탭하거나 클릭하면 어떻게 되나요? 자동 완성이 표시됩니다. 입력에 적합하다는 점을 고려할 때, 브라우저가 저장한 제안이 name 및 id 값.

이제 다음과 같이 입력 코드에 autocomplete="name"를 추가합니다.

<section>
  <label for="name">Name</label>
  <input id="name" name="name" autocomplete="name">
</section>

Chrome에서 페이지를 새로고침하고 이름 입력을 탭하거나 클릭합니다. 어떤 차이가 있나요?

미묘한 변경사항이 있습니다. autocomplete="name"를 사용하면 이제 추천이 구체적입니다. 이전에 autocomplete="name"도 있는 양식 입력에 사용된 값입니다. 브라우저 무엇이 적절한지 추측만 하는 것이 아닙니다. 여러분이 제어할 수 있기 때문입니다. 관리... 브라우저에서 저장한 이름과 주소를 보고 수정할 수 있습니다.

<ph type="x-smartling-placeholder">
</ph> 두 개의 Chrome 스크린샷으로 Android 휴대전화에서 자동 완성 값이 있는 양식과 없는 양식이 입력되어 있습니다. 하나는 브라우저 UI가 휴리스틱 방식으로 값을 제안하는 모습을 보여줍니다. 다른 하나는 저장된 자동 완성 값이 있을 때 UI를 표시합니다.
자동 완성이 아닌 추측된 값을 사용한 자동 완성 UI입니다.
를 통해 개인정보처리방침을 정의할 수 있습니다.

이제 제약조건 유효성 검사 속성을 추가합니다. maxlength, pattern, required이므로 입력 코드가 다음과 같이 표시됩니다.

<section>
  <label for="name">Name</label>
  <input id="name" name="name" autocomplete="name"
    maxlength="100" pattern="[\p{L} \-\.]+" required>
</section>

  • maxlength="100"는 브라우저가 100자(영문 기준)를 초과하는 입력을 허용하지 않음을 의미합니다.

  • pattern="[\p{L} \-\.]+"는 유니코드 문자를 허용하는 정규 표현식을 사용합니다. 마침표(마침표) 및 마침표(마침표)를 사용할 수 없습니다. 즉, Françoise 또는 Jörg와 같은 이름은 '잘못됨'. [\w 라틴 알파벳.

  • required의 의미는... 필수 항목입니다. 브라우저에서 다음 데이터가 없으면 양식을 제출할 수 없습니다. 제출하려고 하면 입력 내용이 경고하고 강조 표시됩니다. 추가 코드 없음 필수

를 통해 개인정보처리방침을 정의할 수 있습니다.

이러한 속성을 사용하거나 사용하지 않고 양식이 어떻게 작동하는지 테스트하려면 다음과 같이 데이터를 입력해 보세요.

  • pattern 속성에 맞지 않는 값을 입력해 보세요.
  • 입력란이 비어 있는 상태로 양식을 제출해 보세요. 기본 제공 브라우저 기능 경고가 표시됩니다. 해당 필드에 포커스를 설정할 수 있습니다.

3단계: 양식에 주소 입력란 추가

주소 입력란을 추가하려면 양식에 다음 코드를 추가하세요.

<section>
  <label for="address">Address</label>
  <textarea id="address" name="address" autocomplete="address"
    maxlength="300" required></textarea>
</section>

textarea는 사용자가 주소를 입력할 수 있는 가장 유연한 방법이며 자르기 및 붙여넣기입니다.

도로명, 번지수 등의 구성요소로 분할할 때는 정말로 해야 합니다. 사용자가 이해할 수 없는 입력란에 주소를 입력하려고 하도록 강요하지 마세요.

이제 우편번호와 국가 또는 지역 필드를 추가합니다. 편의상 처음 다섯 개 국가만 여기에 포함됩니다. 전체 목록은 작성된 주소 양식에 포함되어 있습니다.

<section>
  <label for="postal-code">ZIP or postal code (optional)</label>
  <input id="postal-code" name="postal-code"
    autocomplete="postal-code" maxlength="20">
</section>

<section id="country-region">
  <label for="">Country or region</label>
  <select id="country" name="country" autocomplete="country"
    required>
      <option selected value="SPACER"> </option>
      <option value="AF">Afghanistan</option>
      <option value="AX">Åland Islands</option>
      <option value="AL">Albania</option>
      <option value="DZ">Algeria</option>
      <option value="AS">American Samoa</option>
  </select>
</section>

우편번호가 선택사항임을 알 수 있습니다. 이는 많은 국가에서 우편번호를 사용하지 않기 때문입니다. Global Sourcebook에서 샘플 주소를 비롯한 194개 국가에 대한 주소 형식 지원) 국가 또는 국가 대신 지역이 사용됩니다. 전체 목록의 일부 옵션 (예: 영국)은 autocomplete 값에도 불구하고 단일 국가가 아닙니다.

4단계: 고객이 배송지 및 청구서 수신 주소를 쉽게 입력할 수 있도록 설정

매우 유용한 주소 양식을 만들었지만 사이트에 둘 이상의 주소가 필요한 경우에는 어떻게 해야 할까요? 액세스할 수 있나요? 고객이 입력할 수 있도록 양식을 업데이트해 보세요. 배송지 주소와 청구서 수신 주소를 확인할 수 있습니다. 어떻게 하면 데이터를 가능한 한 빠르고 쉽게 입력할 수 있을까요? 특히 두 주소가 동일한 경우 어떻게 하나요? 이 Codelab과 함께 제공되는 도움말에서는 여러 주소를 처리하는 기술에 대해 자세히 알아보세요. 무엇을 하든 올바른 autocomplete 값을 사용해야 합니다.

5단계: 전화번호 필드 추가

전화번호 입력을 추가하려면 양식에 다음 코드를 추가합니다.

<section>
  <label for="tel">Telephone</label>
  <input id="tel" name="tel" autocomplete="tel" type="tel"
    maxlength="30" pattern="[\d \-\+]+" enterkeyhint="done"
    required>
</section>

전화번호의 경우 한 번만 입력해야 합니다. 번호를 나눠서 사용하지 마세요. 이렇게 하면 사용자가 데이터를 입력하거나 복사하여 붙여넣을 수 있고, 확인이 더 쉬워지고, 브라우저가 자동 완성을 할 수 있습니다.

전화번호 입력의 사용자 환경을 개선할 수 있는 속성은 다음 두 가지입니다.

  • type="tel"를 사용하면 모바일 사용자가 올바른 키보드를 사용할 수 있습니다.
  • enterkeyhint="done"는 모바일 키보드의 Enter 키 라벨을 설정하여 이것이 마지막임을 표시하도록 설정합니다. 필드를 사용하여 이제 양식을 제출할 수 있습니다 (기본값은 next).
를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">Enterkeyhint 입력 속성이 Enter 키 버튼 아이콘을 변경하는 방식을 보여주는 Android 양식의 스크린샷 두 개</ph>
Enterkeyhint 속성을 사용하여 Enter 버튼 라벨을 설정합니다. '다음' '완료'를 클릭합니다.
를 통해 개인정보처리방침을 정의할 수 있습니다. 를 통해 개인정보처리방침을 정의할 수 있습니다.

이제 전체 주소 양식이 다음과 같이 표시됩니다.

  • 다양한 기기에서 양식을 사용해 보세요. 어떤 기기와 브라우저를 타겟팅하고 있나요? 어떻게 양식이 개선되나요?

다양한 기기에서 양식을 테스트하는 방법에는 여러 가지가 있습니다.

를 통해 개인정보처리방침을 정의할 수 있습니다.

추가 정보

  • 분석 및 실제 사용자 모니터링: 실제 사용자를 위해 양식 디자인의 성능과 사용성을 테스트하고 모니터링할 수 있습니다. 변경사항이 적용되었는지 확인할 수 있습니다 로드 성능 및 기타 웹 바이탈을 모니터링해야 합니다. URL을 작성하지 않고 주소 양식을 통해 사이트를 이탈하는 사용자의 비율 무엇인가요? 주소 양식 페이지에서 얼마나 오래 머무는지, 상호작용 분석 (어떤 페이지) 사용자가 상호작용하거나 상호작용하지 않는 구성요소)

  • 사용자 위치 주소의 형식은 무엇인가요? 주소에 사용하는 이름 구성요소를 포함할 수 있나요? Frank의 우편 주소 강박 가이드 는 200개가 넘는 국가의 주소 형식에 대해 자세히 설명하는 유용한 링크와 광범위한 지침을 제공합니다.

  • 국가 선택기는 사용성이 좋지 않은 것으로 악명이 높습니다. 긴 항목 목록에는 특정 요소를 선택하지 않는 것이 가장 좋음 ISO 3166 국가 코드 표준은 현재 249개 국가를 나열하고 있습니다. <select> 대신 다음과 같은 대안을 고려해 볼 수 있습니다. Baymard Institute 국가 선택기

    항목이 많은 목록에 더 나은 선택기를 설계할 수 있나요? 어떤 방식으로 설계를 보장해야 할까요? 액세스할 수 있나요? <select> 요소는 많은 수의 항목이 있지만 적어도 거의 모든 브라우저와 보조 기기에서 사용할 수 있습니다.

    블로그 게시물 <input type="국가" />의 내용 국가 선택기 표준화의 복잡성입니다. 국가 이름의 현지화는 문제가 있을 수 있습니다 국가 목록에는 다양한 언어로 여러 언어로 국가 코드와 이름을 다운로드