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