양식 요소와 양식을 대화형으로 만드는 방법을 알아본 후 사용자가 데이터를 다시 입력하지 않도록 하는 방법을 알아보겠습니다.
자동 완성 최대한 활용하기
양식 작성은 시간이 오래 걸릴 수 있습니다. 예를 들어 물건을 구매하려는 모든 사이트에서 주소를 반복해서 입력하는 것은 좋은 쇼핑 경험이 아닙니다.
자동 완성이 도움이 될 수 있습니다. 주소는 한 번만 입력하면 됩니다. 이제 브라우저에서 다른 양식에 동일한 주소를 자동으로 입력하는 옵션을 제공합니다.
다른 도시로 이사하셨나요? 기존 주소가 영구적으로 옵션으로 표시되지는 않습니다. 브라우저에 저장된 주소 데이터를 수정하여 최신 상태로 유지할 수 있습니다.
브라우저에서 자동 완성은 어떻게 작동하나요?
주소 입력란은 사이트마다 매우 다르게 표시될 수 있습니다. 브라우저는 주소 입력란인지 어떻게 알 수 있나요?
브라우저는 휴리스틱을 사용하여 주소 필드를 식별합니다.
name, type, id 속성의 값은 무엇인가요?
양식 컨트롤에 autocomplete 속성이 있나요?
브라우저는 이 정보를 기반으로 이전에 입력한 동일한 유형의 데이터로 필드를 자동 완성하는 옵션을 제공할 수 있습니다. 브라우저는 전체 양식을 자동 완성하도록 제안할 수도 있습니다.
자동 완성으로 브라우저 지원
브라우저에서 올바른 자동 완성 옵션을 제공하도록 하려면 어떻게 해야 할까요?
적절한 속성 값 사용
앞서 배운 것처럼 브라우저는 양식 컨트롤의 속성을 보고 데이터 유형을 식별할 수 있습니다.
<label for="email">Email</label>
<input type="email" name="email" id="email">
사용자가 이메일 주소를 입력해야 하는 입력란이 있나요?
email를 name, id, type 속성의 값으로 사용합니다.
브라우저에 이 입력란이 이메일 필드임을 나타내는 세 가지 힌트입니다.
자동 완성 속성
브라우저가 name, id, type 속성만으로 데이터 유형을 식별하기 어려운 다른 예도 있습니다.
여기에서 autocomplete 속성을 사용하여 도움을 줄 수 있습니다.
사용 중인 브라우저에 이름을 입력한 적이 있나요? 브라우저에서 데모의 이 입력란을 다시 채울 수 있는 옵션을 제공할 수 있습니다.
자동 완성 및 자동 완성 사용에 관한 자세한 내용은 이후 모듈에서 알아보세요.
이해도 확인
자동 완성에 대한 지식 테스트
자동 완성은 어떤 속성을 기반으로 제공되나요?
name 속성type 속성autocomplete 속성