사용자가 데스크톱과 모바일에서 최대한 쉽게 주소 데이터를 입력할 수 있는 양식을 만듭니다. 양식이 자동 완성, 유효성 검사, 데이터 입력 제약 조건에 대한 내장 브라우저 기능을 최대한 활용하도록 합니다.
구현 방법
아래에는 성공적인 주소 양식을 만들기 위한 가장 중요한 가이드라인이 나와 있습니다.
의미 있고 유효한 HTML 사용
양식 작성을 위해 빌드된 요소와 속성을 최대한 활용하세요.
<form>,<input>,<label>,<button>type,autocomplete,inputmode
이를 통해 내장된 브라우저 기능을 사용 설정하고 접근성을 개선하며 마크업에 의미를 더할 수 있습니다.
<label> 요소를 사용하여 데이터 입력을 위한 양식 입력란에 라벨을 지정합니다.
<input>, <select> 또는 <textarea>에 라벨을 지정하려면 <label>를 사용합니다. 라벨의 for 속성에 입력의 id과 동일한 값을 지정하여 라벨을 입력과 연결합니다.
HTML 속성 최대한 활용하기
적절한 <input> 요소 <type> 속성을 사용하여 모바일에서 올바른 키보드를 제공하고 브라우저에서 기본 제공되는 기본 유효성 검사를 사용 설정하여 사용자가 데이터를 쉽게 입력할 수 있도록 합니다.
이메일 주소에는 항상 type="email"를, 전화번호에는 type="tel"를 사용합니다.
<!-- type="email"/"tel" gives mobile users the right keyboard and enables built-in validation -->
<input type="email" id="email" name="email" autocomplete="email" required>
<input type="tel" id="phone" name="phone" autocomplete="tel">
접근성을 개선하고 사용자가 데이터를 다시 입력하지 않도록 모든 <input>, <select>, <textarea> 요소에는 적절한 autocomplete 속성이 있어야 합니다(SHOULD).
유용한 버튼 만들기
버튼에는 <button>을 사용합니다. <input type="submit">를 사용할 수도 있지만 div 또는 버튼 역할을 하는 다른 임의의 요소를 사용해서는 안 됩니다. 버튼 요소는 접근성 있는 동작, 기본 제공 양식 제출 기능을 제공하며 쉽게 스타일을 지정할 수 있습니다.
각 양식 제출 버튼에 해당 버튼의 기능을 설명하는 값을 지정합니다. 결제까지의 각 단계에서 진행 상황을 보여주고 다음 단계를 명확하게 알려주는 설명이 포함된 클릭 유도 문구를 사용하세요. 예를 들어 배송지 주소 양식의 제출 버튼에 계속 또는 저장 대신 결제 진행이라는 라벨을 지정합니다.
가능한 경우 단일 이름 입력 사용
이름, 성, 경칭 또는 기타 이름 부분을 별도로 저장해야 하는 타당한 이유가 없는 한 사용자가 단일 입력을 사용하여 이름을 입력할 수 있도록 허용합니다. 단일 이름 입력을 사용하면 양식이 덜 복잡해지고 잘라내기 및 붙여넣기가 가능하며 자동 완성이 더 간단해집니다.
국제 이름을 허용합니다. 유효성 검사를 위해 라틴 문자만 일치하는 정규 표현식을 사용하지 마세요. 라틴어 전용은 라틴 알파벳이 아닌 문자가 포함된 이름이나 주소를 사용하는 사용자를 제외합니다. 대신 유니코드 문자 일치를 허용하고 백엔드가 입력과 출력 모두에서 유니코드를 안전하게 지원하는지 확인하세요. 정규 표현식의 유니코드는 최신 브라우저에서 잘 지원됩니다.
다양한 주소 형식 허용
주소 양식을 만들 때는 한 국가 내에서도 다양한 주소 형식이 있다는 점에 유의하세요. '일반적인' 주소에 대해 추측하지 마세요.
가능하면 상세 주소에 단일 <textarea> 요소를 사용합니다.
<!-- textarea handles multi-line international address formats that split inputs can't accommodate -->
<textarea id="address" name="address" autocomplete="street-address" required></textarea>
다양한 국내외 주소 형식에 가장 유연한 옵션입니다.
데이터 모델에 별도의 주소 입력란이 필요한 경우 자동 완성이 계속 작동하도록 address-line1, address-line2 (필요한 경우 address-line3) autocomplete 토큰과 함께 한 줄에 하나의 <input>를 사용합니다. 이러한 토큰이 없는 입력란에 상세 주소를 분할하지 말고 첫 번째 줄만 필수 입력란으로 설정하세요.
<!-- Alternative: one input per line, each with its own autocomplete token -->
<input type="text" id="address-line1" name="address-line1" autocomplete="address-line1" required>
<input type="text" id="address-line2" name="address-line2" autocomplete="address-line2">
사용자가 실수로 데이터 필드를 누락하지 않도록 지원
필수 입력란에 required 속성을 추가합니다.
<input type="text" id="city" name="city" autocomplete="address-level2" required>
대체 전략
자동 완성은 점진적 개선입니다. 자동 완성을 지원하지 않는 브라우저에서는 사용자가 주소 세부정보를 직접 입력해야 합니다. 의미론적 HTML 제약 조건 (예: type, inputmode, required)은 표준 양식 유효성 검사로 계속 적절하게 작동합니다.