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