[HTML5] input 테그에 autocomplete 속성 제대로 활용하기

최근 웹브라우저들은 폼(Form)을 자동으로 입력해주는 기능을 탑재하고 있습니다. 사용자 입장에서는 매번 같은 내용을 반복해서 입력하지 않아도되기 때문에 상당히 편리한 기능이지요. 하지만 이 기능이 제대로 동작하게 하기 위해서는 HTML 문서를 작성할 때 신경을 써주어야 하는 부분이 있습니다. 바로 autocomplete 이라는 속성(Attribute)입니다.

1. 사용법


autocomplete 은 input 테그에 사용되는 속성으로, 이를 설정해두면 자동 입력기능이 활성화 됩니다. 이 속성을 적절하게 설정해주면 브라우저가 등록되어 있는 내용을 자동으로 입력해 줍니다. 대표적인 항목은 아래와 같습니다.

  • name: 성명
  • family-name: 성
  • given-name: 이름
  • email: 이메일주소
  • postal-code: 우편번호
  • address-level1: 주소(도, 시)
  • address-level2: 주소(시, 군, 구)
  • address-line1: 상세주소 1
  • address-line2: 상세주소 2
  • organization: 직장명
  • off: 자동입력 기능을 사용하지 않음

그 외의 항목들에 대해서는 WHATW Standard에서 AutoFill(링크)에 관련한 사양을 확인해 보시기 바랍니다. autocomplete 속성을 off로 설정할 수 있지만 현재 대부분의 브라우저에서는 이 설정을 무시하고 있기때문에 사실상 의미가 없습니다. 따라서 자동입력 기능의 사용여부는 유저에게 맡기고, 사용하는 유저가 편리하게 이용할 수 있도록 하는 것이 좋습니다.

2. 주의점

autocomplete 기능은 name 속성을 기준으로 동작하기 때문에, name 속성의 값을 위의 명명규칙에 따라 지정하지 않으면 autocomplete 기능이 동작하지 않으며 의도치 않게 엉뚱한 곳에 값을 입력하여 사용자를 쓸데없이 불편하게 만들 수 있으니 주의하시기 바랍니다.

성명을 성과 이름으로 분리하는 것은 브라우저마다 다르게 동작하는 경우가 있으므로 성명(name)으로 입력받는 것이 좋습니다. 또 주소의 경우에도 select 를 사용하면 자동 입력이 되지 않기 때문에 input을 사용합니다. 생년월일 자동입력은 크롬에서 동작하지 않습니다. 전화번호나 우편번호를 하이픈 단위로 끊어서 입력받는 경우가 많은데 autocomplete을 이용한다면 하나의 입력란에서 받는것이 좋습니다.

3. 기타 알아두면 좋은 기능들

iOS에서는 영문 입력시 첫글자를 대문자로 변환하거나 스펠링 체크를 하는 기능이 있습니다. 하지만 이 기능은 경우에 따라 사용자를 불편하게 만들 수 있는데 autocorrect와 autocapitalize라는 속성의 값을 off로 설정하여 이를 사용하지 않도록 할 수 있습니다.


폼 입력 도중에 사용자가 실수로 뒤로 가기나 새로고침등을 누르는 경우가 있습니다. 기존에 입력한 내용이 죄다 날아가기 때문에 여간 짜증가는 일이 아닙니다. 하지만 폼을 이탈할 때 사용자에게 confirm을 띄워서 사용자에게 확인을 요청할 수 있습니다.

window.addEventListener('beforeunload' function (event) {
  var confirmationMessage = '입력 내용이 모두 사라집니다.';
  event.returnValue = confirmationMessage;

  return confirmationMessage;
});

beforeunload 이벤트는 Mobile Safari에서는 지원하지 않습니다.

참조

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>