다양한 이름과 주소 형식에 잘 맞는 양식을 디자인하려면 어떻게 해야 하나요? 보조 형식 결함은 사용자를 짜증 나게 하고, 사용자가 사이트를 떠나거나 구매를 포기하게 만들 수 있습니다. 가입할 수 있습니다.
이 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"
도 있는 양식 입력에 사용된 값입니다. 브라우저
무엇이 적절한지 추측만 하는 것이 아닙니다.
여러분이 제어할 수 있기 때문입니다. 관리...
브라우저에서 저장한 이름과 주소를 보고 수정할 수 있습니다.
![두 개의 Chrome 스크린샷으로 Android 휴대전화에서 자동 완성 값이 있는 양식과 없는 양식이 입력되어 있습니다. 하나는 브라우저 UI가 휴리스틱 방식으로 값을 제안하는 모습을 보여줍니다. 다른 하나는 저장된 자동 완성 값이 있을 때 UI를 표시합니다.](https://web.dev/static/articles/codelab-address-form-best-practices/image/two-screenshots-chrome-4d8d209f546ec.jpg?hl=ko)
이제 제약조건 유효성 검사 속성을 추가합니다.
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
).
![Enterkeyhint 입력 속성이 Enter 키 버튼 아이콘을 변경하는 방식을 보여주는 Android 양식의 스크린샷 두 개](https://web.dev/static/articles/codelab-address-form-best-practices/image/two-screenshots-a-form-d3f2a1ca901d8.png?hl=ko)
이제 전체 주소 양식이 다음과 같이 표시됩니다.
- 다양한 기기에서 양식을 사용해 보세요. 어떤 기기와 브라우저를 타겟팅하고 있나요? 어떻게 양식이 개선되나요?
다양한 기기에서 양식을 테스트하는 방법에는 여러 가지가 있습니다.
- Chrome DevTools 기기 모드 사용 휴대기기를 시뮬레이션할 수 있습니다.
- 컴퓨터에서 휴대전화로 URL을 보냅니다.
- BrowserStack과 같은 서비스를 사용하여 범위에 대해 테스트합니다. 다양한 기기 및 브라우저입니다.
추가 정보
분석 및 실제 사용자 모니터링: 실제 사용자를 위해 양식 디자인의 성능과 사용성을 테스트하고 모니터링할 수 있습니다. 변경사항이 적용되었는지 확인할 수 있습니다 로드 성능 및 기타 웹 바이탈을 모니터링해야 합니다. URL을 작성하지 않고 주소 양식을 통해 사이트를 이탈하는 사용자의 비율 무엇인가요? 주소 양식 페이지에서 얼마나 오래 머무는지, 상호작용 분석 (어떤 페이지) 사용자가 상호작용하거나 상호작용하지 않는 구성요소)
사용자 위치 주소의 형식은 무엇인가요? 주소에 사용하는 이름 구성요소를 포함할 수 있나요? Frank의 우편 주소 강박 가이드 는 200개가 넘는 국가의 주소 형식에 대해 자세히 설명하는 유용한 링크와 광범위한 지침을 제공합니다.
국가 선택기는 사용성이 좋지 않은 것으로 악명이 높습니다. 긴 항목 목록에는 특정 요소를 선택하지 않는 것이 가장 좋음 ISO 3166 국가 코드 표준은 현재 249개 국가를 나열하고 있습니다.
<select>
대신 다음과 같은 대안을 고려해 볼 수 있습니다. Baymard Institute 국가 선택기항목이 많은 목록에 더 나은 선택기를 설계할 수 있나요? 어떤 방식으로 설계를 보장해야 할까요? 액세스할 수 있나요?
<select>
요소는 많은 수의 항목이 있지만 적어도 거의 모든 브라우저와 보조 기기에서 사용할 수 있습니다.블로그 게시물 <input type="국가" />의 내용 국가 선택기 표준화의 복잡성입니다. 국가 이름의 현지화는 문제가 있을 수 있습니다 국가 목록에는 다양한 언어로 여러 언어로 국가 코드와 이름을 다운로드