브라우저 자동완성 기능의 미래

Form element 에 autocomplete 기능이 소개된 것은 1999년 Internet Explorer 5이 최초였다. 이후 각 브라우저 별로 산발적으로 지원하던 자동완성 기능은 HTML5에 이르러 표준화 되었다.

HTML5 스펙은 2012년 12월 17일 버전으로 기준으로 함.

이전 스펙에서 autocomplete attriute 는 “on” 또는 “off” 값만 가질 수 있었으나 최근의 스펙에서는 on, off 외에 공백으로 분리된 토큰들을 가질 수 있다. 이에 따르면 attribute 이 on, off 가 아니라면 아래와 같은 순서로 동작한다.

첫 8글자가 “section-” 으로 시작하는 경우 필드가 이름을 가진 그룹에 속함을 나타낼 수 있다. (선택사항)

예를들어, 양식에 두개의 배송주소가 있을 때 아래처럼 마크업 할 수 있다.

<fieldset>
 <legend>Ship the blue gift to...</legend>
 <p> <label> Address:     <input name=ba autocomplete="section-blue shipping street-address"> </label>
 <p> <label> City:        <input name=bc autocomplete="section-blue shipping region"> </label>
 <p> <label> Postal Code: <input name=bp autocomplete="section-blue shipping postal-code"> </label>
</fieldset>
<fieldset>
 <legend>Ship the red gift to...</legend>
 <p> <label> Address:     <input name=ra autocomplete="section-red shipping street-address"> </label>
 <p> <label> City:        <input name=rc autocomplete="section-red shipping region"> </label>
 <p> <label> Postal Code: <input name=rp autocomplete="section-red shipping country"> </label>
</fieldset>

어떤 토큰은 둘 중 하나일 수 있다. (선택사항)
- shipping 은 이 필드가 배송 주소 또는 연락처 정보의 일부임을 나타냄
- billing 은 이 필드가 청구 주소 또는 연락처 정보의 일부임을 나타냄
다음 두 옵션 중 하나
- 어떤 토큰이 아래 autofill field string 중 하나:
  - “name”
  - “honorific-prefix”
  - “given-name”
  - “additional-name”
  - “family-name”
  - “honorific-suffix”
  - “nickname”
  - “organization-title”
  - “organization”
  - “street-address”
  - “address-line1”
  - “address-line2”
  - “address-line3”
  - “locality”
  - “region”
  - “country”
  - “postal-code”
  - “cc-name”
  - “cc-given-name”
  - “cc-additional-name”
  - “cc-family-name”
  - “cc-number”
  - “cc-exp”
  - “cc-exp-month”
  - “cc-exp-year”
  - “cc-csc”
  - “language”
  - “bday”
  - “bday-day”
  - “bday-month”
  - “bday-year”
  - “sex”
  - “url”
  - “photo”

아래 순서대로
1. 어떤 토큰이 아래 값들 중 하나 (선택사항)
  - home, work, mobile, fax, pager
2. 어떤 토큰이 아래 autofill field 스트링 중 하나
  - tel, tel-country-code, tel-national, tel-area-code, tel-local, tel-local-prefix, tel-local-suffix, tel-extension, email, impp

즉, 이 스펙에 따르면 아래와 같은 경우의 수가 존재한다.

<input name="country" autocomplete="on">
<input name="country" autocomplete="off">
<input name="country" autocomplete="country">
<input name="country" autocomplete="shipping country">
<input name="country" autocomplete="section-a shipping country">
<input name="billing_home_tel" autocomplete="section-a billing home tel">

이런 상세한 분류를 통해 브라우저가 앞으로 더 강력한 자동완성기능을 갖게 될 것이다.

예를 들어 명세서 청구주소는 집이지만, 배송은 회사에서 받게 되는 경우가 있을 수 있다. 이런 경우 billing 에 집 주소, 집 연락처가 저장될 것이고 shipping 에는 회사 연락처 등이 저장되는 형태로 세분화가 가능해질 것이다.

브라우저 자동완성 기능의 미래

참고