input 태그 autocomplete(자동완성) 기능 알아보기

input 태그로 코드를 작성하고 사용자가 form 형식에 입력을 할 때, 10자 이상의 텍스트 예를 들면, 이메일이나 패스워드 같은 경우 매번 긴 문자를 입력하는 것이 사용성을 저하시킬 수 있다.

 

이 때, 자동완성 기능을 사용하면 사용자가 이전에 입력했던 내용을 자동완성 리스트로 제공하여 간편하게 입력이 가능하다.

 

우선 대부분의 브라우저에서 자동완성 기능은 input 태그의 name 속성을 기반으로 동작한다. 일부 브라우저에서는 id 속성값을 기반으로도 동작하기도 한다.

 

name 속성으로 자동완성 구현

아래 예시처럼 코드를 작성하면, autocomplete 속성을 따로 추가하지 않아도 email을 입력하는 input 태그에 포커스 시 이전에 email input에 입력했던 값 목록이 등장한다.

<form class="form">
  <div class="input-wrap">
    <label for="mail">Email</label>
    <input type="email" id="mail" name="email" />
  </div>
  <div class="input-wrap">
    <label for="password">Password</label>
    <input type="password" />
  </div>
  <button>제출하기</button>
</form>

Email 자동완성 기능

 

새로운 비밀번호 추천 기능

아래와 같이 autocomplete 에 "new-password"를 할당하면, 강력한 보안의 새로운 비밀번호를 추천해준다.

<form class="form">
  <div class="input-wrap">
    <label for="email">Email</label>
    <input type="email" id="email" />
  </div>
  <div class="input-wrap">
    <label for="password">Password</label>
    <input type="password" autocomplete="new-password" />
  </div>
  <button>제출하기</button>
</form>

강력한 보안의 비밀번호 추천

 

자동완성 기능 끄기

브라우저와 사용자에게 명시적으로 자동완성이 되면 안된다는 것을 알려주기 위해서는 autocomplete 속성에 "off"를 할당한다.

<form class="form">
  <div class="input-wrap">
    <label for="email">Email</label>
    <input type="email" id="email" autocomplete="off" />
  </div>
  <div class="input-wrap">
    <label for="password">Password</label>
    <input type="password" autocomplete="new-password" />
  </div>
  <button>제출하기</button>
</form>

autocomplete 속성 "off"