본문 바로가기
program

자동완성 기능 autocomplete 사용법

by 믹스 2021. 11. 26.

#2171

HTML에 autocomplete라는 것이 있다.

autocomplete 기본

자동완성 기능을 지정하는 속성으로 html에 사용된다. 기본적인 적용 방법은 다음과 같으며 각종 속성은 MDN에 잘 정리되어 있으니 참고하면 좋을 것 같다.

 

HTML autocomplete 특성 - HTML: Hypertext Markup Language | MDN

autocomplete 특성을 사용하면 사용자 에이전트의 자동완성을 허용할 양식 입력 필드를 지정할 수 있으며, 사용자 에이전트에게 어떤 정보에 대한 자동완성을 원하는지 안내할 수도 있습니다.

developer.mozilla.org

기능 해제

MDN에도 정리되어 있는데 기능을 제어하기 위하여 off를 form에 지정하거나 개별적으로 지정하는 방법이 있다. 하지만, 자동완성 기능을 꺼버리는 건 WCAG의 레벨 AA, 입력 목적 식별을 위반하게 된다는 것을 기억해 둬야 하겠다. 국내 웹 접근성 심사는 WCAG를 기준으로 하는 KWCAG이기 때문에 기능을 꺼버리는 건 별로 추천할 만한 사항은 아닌 것 같다. 혹여나 잘 모르겠다면 처음부터 autocomplete 속성 자체를 빼버리는 게 인증마크를 따는 데 있어 수월할 수도 있어 보이긴 한다.

패스워드의 경우는 좀 더 쉽게 적용 가능한데 autocomplete="new-password" 속성을 적용시켜 자동 입력을 방지하는 방법이다. 또 다른 방법은 사용자에게는 보이지 않는 input을 실제로 사용자가 사용하게 될 input보다 먼저 선언해 두어 autocomplete 기능이 그쪽에 적용되게 하는 방법이 사용 가능한 것 같다.

참고

728x90
반응형

댓글