반복 입력 정보

무엇을 요구하나요?

같은 과정 안에서 사용자가 이미 입력한 정보를 다시 입력하게 하지 않아야 합니다. 이미 입력한 정보는 자동으로 채우거나, 고를 수 있게 해야 합니다. 운동 장애가 있는 사용자는 입력 자체가 힘들고, 인지 장애가 있는 사용자는 앞에서 무엇을 입력했는지 기억하기 어렵습니다.

자주 틀리는 예

1. 배송지를 주문자 정보와 똑같이 다시 입력

<fieldset>
  <legend>배송지</legend>
  <label for="ship-name">받는 사람</label><input id="ship-name">
  <label for="ship-addr">주소</label><input id="ship-addr">
</fieldset>

<fieldset>
  <legend>배송지</legend>
  <label><input type="checkbox" id="same-as-buyer"> 주문자 정보와 같음</label>
  <label for="ship-name">받는 사람</label><input id="ship-name" autocomplete="shipping name">
  <label for="ship-addr">주소</label><input id="ship-addr" autocomplete="shipping street-address">
</fieldset>

체크하면 주문자 정보를 채워 줍니다.

document.getElementById('same-as-buyer').addEventListener('change', (e) => {
  if (!e.target.checked) return;
  document.getElementById('ship-name').value = document.getElementById('buyer-name').value;
  document.getElementById('ship-addr').value = document.getElementById('buyer-addr').value;
});

2. autocomplete를 꺼 둠

<input id="email" autocomplete="off">

<input id="email" type="email" autocomplete="email">

이름(name), 전화번호(tel), 주소(street-address), 우편번호(postal-code) 등 알맞은 autocomplete 값을 주면 브라우저가 저장된 정보를 채워줍니다.

3. 이전 단계로 돌아가면 입력값이 지워짐

여러 단계 신청서에서 [이전]을 눌렀을 때 앞 단계 입력값이 사라지면 다시 입력해야 합니다. 단계 사이에 값을 유지하세요.

확인하는 방법

1. 회원가입·주문·신청서처럼 여러 단계로 된 과정을 끝까지 진행하며 같은 정보를 두 번 입력하는 곳이 있는지 확인하세요.
2. [이전]으로 돌아갔다가 다시 와도 값이 남아 있는지 확인하세요.
3. 확장 프로그램 페이지 검사로 잘못된 autocomplete 값을 찾을 수 있습니다.