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
속성