[TIL, HTML] input 의 autocomplete 속성

devdevedddddd·2021년 6월 4일
0

6월의 배움

목록 보기
2/13

input의 autocomplete속성

<input>/<select>/<textarea> 요소가 다음 조건을 만족해야 
사용자 에이전트가 자동완성을 제공할 수도 있습니다.
1. name 또는 id 특성 존재
2. <form> 요소의 자손일 것
3. 양식에 제출 (en-US) 버튼이 있을 것

자동완성으로 제안할 값의 출처는 대개 브라우저가 선택합니다. 사전 정의된 값을 사용할 수도 있으나 보통 과거에 사용자가 입력했던 값을 사용합니다.

모두가 아는 그 기능이다, 그런데

개발 중에 아래와 같은 메시지가 출력되었다.

아무래도 속성 값이 다양한 것 같았다.

간단하게 정리하자면 ,

autocomplete의 속성

1. off

브라우저가 이 필드에 값을 자동으로 넣는 것을 금지합니다. 문서나 애플리케이션이 자신만의 자동완성 기능을 구현하거나, 보안상 문제로 자동완성을 사용하지 않아야 할 경우 지정할 수 있습니다.

참고: 대부분의 최신 브라우저에서는 autocomplete을 off로 지정하더라도 브라우저가 사용자에게 계정 이름과 비밀번호 저장 여부를 묻는 것을 막을 수 없으며, 저장한 값을 사용해 자동완성하는 것도 막을 수 없습니다.

2. on

브라우저의 자동완성을 허용합니다. 아무런 안내 정보도 제공하지 않으므로, 브라우저가 스스로의 판단 하에 값을 결정합니다.

3. 그 외 다양한 속성

email
이메일 주소.

username
사용자 또는 계정 이름.

new-password
새로운 비밀번호. 계정을 생성할 때나 비밀번호를 변경할 때, new-password는 "새로운 비밀번호를 입력하세요" 또는 "비밀번호 확인"에 지정해야 합니다. 일반적인 비밀번호와 구분하는 이유는 브라우저가 기존 비밀번호를 자동완성으로 채우는 것을 피하기 위함이며, 안전한 무작위 비밀번호 생성을 제안할 곳을 결정할 때도 사용하기 때문입니다.

current-password
사용자의 현재 비밀번호.

등등의 세분화된 표준 속성이 존재한다.

필요할 때 마다 아래의 링크에서 표준속성을 찾아 쓰자.

출처 및 더 자세한 속성 정보

*유의, IE는 해당 속성을 지원하지 않는다.

profile
노력과 성장을 기록합니다.

0개의 댓글