[HTML] autoComplete property

갑자기 HTML 지옥에 빠진 듯...?

은근히 내가 모르는 속성들이 있어서 배움에는 끝이 없구나라는 생각이 들었다

 

라이트 하우스에서 본 아래 항목에서 모르는 부분이 있어 공부 겸 정리해보았다

 

개발자도구에서 issues 패널 열어서 문제 해결하라고 친절하게 알려주는 라이트 하우스...

 

오른쪽 상단 점 세 개 -> more tools -> issues를 누르면 된다

 

 

form에 브라우저의 자동완성이 인식하는 id나 name 속성이 있는데 autocomplete 속성이 없으니까 해결하고 싶으면 해당 속성 추가해~라고 알려준다 

 

근데 autocomplete 속성을 처음 들어봐서 찾아보았다ㅎ

 

https://developer.mozilla.org/ko/docs/Web/HTML/Attributes/autocomplete 

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

 

자동완성을 적용할 입력 필드를 지정할 수 있고, 자동완성을 사용하기 원하는지 지정할 수 있는 속성이다

form, input, section, textarea 요소에 사용할 수 있다고 한다

 

나는 자동완성을 사용하지 않을 거기 때문에 autoComplete 값을 off로 주었다

 

         <label
            htmlFor="email"
            className="text-lg font-semibold pb-[6px] mobile_xs:text-sm mobile_sm:text-base"
          >
            email
          </label>
          <input
            required
            id="email"
            name="email"
            autoComplete="off"
            placeholder="이메일을 입력해주세요"
            className="border border-[#484368] transition duration-300 about-bg placeholder:text-sm rounded-md px-2 py-2 mobile_xs:text-xs tablet:placeholder:text-sm mobile_sm:placeholder:text-sm mobile_xs:placeholder:text-xs"
          />

 

근데 mdn을 보다보니 이렇게 적혀있었다...

 

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

 

https://developer.mozilla.org/ko/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#the_autocomplete_attribute_and_login_fields

양식 자동 완성을 끄는 방법 - 웹 보안 | MDN

The autocomplete attribute and login fields 문서를 살펴보니 new-password라는 걸 사용하면 된다는데

can i use를 보니 호환성 이슈가 있었다 아직 많은 브라우저에서 지원은 안 한다

 

현재로서는 파이어폭스만 지원하는 듯?

그래서 일단 autoComplete는 off로만 설정해놓았다...

더 좋은 방법이 있다면 알려주세요...