양식 요소 및 양식을 대화형으로 만드는 방법을 알아본 후 사용자가 데이터를 다시 입력하지 않도록 돕는 방법을 알아보겠습니다.
자동 완성 최대한 활용하기
양식 작성은 시간이 오래 걸릴 수 있습니다. 예를 들어 구매하려는 모든 사이트에서 주소를 반복적으로 다시 입력하는 것은 좋은 쇼핑 경험은 아닙니다.
자동 완성이 도움이 될 수 있습니다. 주소는 한 번 입력합니다. 이제부터 다른 양식에 동일한 주소를 자동으로 입력할 수 있는 옵션이 브라우저에 제공됩니다.
다른 도시로 이사하셨나요? 이전 주소를 계속 옵션으로 사용하지 않아도 됩니다. 브라우저에 저장한 주소 데이터를 수정하여 최신 상태를 유지할 수 있습니다.
브라우저에서 자동 완성은 어떻게 작동하나요?
주소 입력란은 사이트마다 매우 다르게 보일 수 있습니다. 브라우저는 이것이 주소 필드인지 어떻게 알 수 있나요?
브라우저는 휴리스틱을 사용하여 주소 필드를 식별합니다.
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
속성