[ HTML ] 브라우저 자동 완성 기능의 표준 name 값 정리

< 대표적인 표준 name 값 (autocomplete을 위한 표준 값) >

이름	name	사용자의 이름을 입력 받는 필드
성	honorific-prefix	사용자의 성(이름 앞에 오는 존칭) 입력 받는 필드
성/이름(전체)	given-name	사용자의 성과 이름을 받는 필드
성(일반 이름)	family-name	사용자의 성을 받는 필드
이메일 주소	email	사용자의 이메일 주소를 받는 필드
전화번호	tel	사용자의 전화번호를 받는 필드
주소(전체)	address	사용자의 전체 주소를 받는 필드
집 주소(스트리트)	street-address	사용자의 집 주소(거리 주소)를 받는 필드
도시	address-level2	사용자의 도시를 받는 필드
주/도/구	address-level1	사용자의 주/도/구를 받는 필드
우편번호	postal-code	사용자의 우편번호를 받는 필드
국가	country	사용자의 국가를 받는 필드
생일	bday	사용자의 생일을 받는 필드
성별	gender	사용자의 성별을 받는 필드
직업	organization	사용자의 직업을 받는 필드
사용자 이름	username	사용자의 아이디 또는 사용자명을 받는 필드
비밀번호	password	사용자의 비밀번호를 받는 필드
새 비밀번호	new-password	사용자의 새 비밀번호를 받는 필드
확인 비밀번호	current-password	사용자의 현재 비밀번호를 받는 필드
신용카드 번호	cc-number	사용자의 신용카드 번호를 받는 필드
카드 만료일	cc-exp	신용카드 만료일을 받는 필드
카드 보안 코드	cc-csc	신용카드 보안 코드를 받는 필드

 

자동완성관련 중요한 사항

1. 브라우저 저장 범위

브라우저는 사이트 전체(도메인 기준)에서 사용자가 입력한 데이터를 저장하고, 자동 완성 데이터를 제공. 즉, 같은 도메인 내에서 여러 페이지에서 입력된 값들이 공유됨

 

2. name 속성 공유

name 속성이 같으면, 다른 HTML 파일에 있어도 자동 완성 데이터가 공유됨. 예를 들어, 첫 번째 HTML 파일에서 name="email"을 설정하고, 두 번째 HTML 파일에서 같은 name="email"을 설정하면, 첫 번째 파일에서 입력한 이메일 값이 자동으로 제시

 

3. autocomplete=“on” 속성

autocomplete="on" 속성을 사용하면, 사용자가 입력한 값들이 브라우저 캐시에 저장되고, 이후 같은 도메인 내에서 자동 완성 데이터를 제공. 이는 브라우저가 데이터를 기억하여 다시 입력할 필요 없이 자동으로 값을 제시해줌

 

4. name 속성의 중요성

name 속성이 동일하면 자동 완성 데이터를 공유할 수 있기 때문에, 입력 필드의 name 값은 매우 중요. 만약 자동 완성을 활용하려면, 정확한 name 속성을 설정해야 함.

 

5. type 속성 관계

type 속성이 달라도 name 값이 같으면 자동 완성 데이터가 공유됨. 예를 들어, type="text"와 type="email"이 다르더라도, 브라우저는 name 속성을 기준으로 데이터를 저장하므로 같은 name 값을 가진 필드는 자동 완성 기능을 공유함.

 

 

자동 완성은 autocomplete="on" 속성을 사용하여 활성화

사용자가 사이트를 방문할 때마다 입력한 데이터가 저장되어 나중에 다시 사용할 수 있게 됨

name 속성의 표준 값은 브라우저에서 자동 완성 기능을 제대로 동작시키기 위한 중요한 기준!!