[html]autocomplete attributes

갑자기 autocomplete?

[DOM] Input elements should have autocomplete attributes (suggested: "username"): (More info: https://goo.gl/9p2vKq) 

Input 태그에 autocomplete 속성을 지정하라는 경고창이 떴다.
경고창에 대해 알아보고 없애고자 경고창에 있는 chromium에 들어가니

[chromium] autocomplete attributes

브라우저에서 유저들이 폼 양식을 편안하게 만들어주기 위해 최선을 다하고 있는데 브라우저들이 아무리 노력하고 있어도 웹 개발자로서 유저들이 최고의 경험을 위해 해야 할 것들이 있다고 한다. 그것은 웹 페이지를 접속 쉽게 하는 것!

브라우저가 더 쉽게 접근하게 하는 방법에는 여러 방법이 있지만 오늘은 autocomplete 속성을 사용하는 법만을 살펴보려 한다.

autocomplete 사용 예시

아래 chromium 사이트에 들어가면 Sign-in Form, Email First Sign-in Form, Sign-up Form 의 예시들이 아주 잘 쓰여있어 참고하기 정말 좋았다!
[chromium](예시 있음)

autocomplete은 뭘까?

MDN HTML autocomplete 특성

MDN에 찾아보니 autocomplete은

• 브라우저의 자동완성을 허용할 양식 입력 필드를 지정할 수 있는 속성이다
• 브라우저에게 어떤 정보를 자동완성하게 하길 원하는지 안내할 수도 있다
• 자동완성으로 제안할 값의 출처는 대부분 브라우저가 선택

사용할 수 있는 태그

<input>, <textarea>, <select>, <form>

• <input>, <textarea>, <select> 에서 autocomplete 속성을 지정하지 않으면 -> 브라우저는 조상 form 또는 form 특정값을 id 특성으로 사용하는 <form>의 autocomplete 특성을 사용
• 에이전트에서 자동완성을 제공하기 위해서 <input>, <textarea>, <select> 가 만족해야하는 조건

1. name 또는 id 특성 존재
2. <form> 요소의 자손일 것
3. 양식에 제출 버튼이 있어야

값

• off -> 필드에 자동으로 값을 넣는 것을 금지하지만 off 를 지정하더라도 브라우저가 자동완성을 넣을수도 있다고한다.
• on -> 브라우저의 자동완성을 허용 -> 상세한 값을 설정하지않았기 때문에 브라우저가 알아서 판단해 값을 넣어줌

상세한 값

• name -> 더욱 상세한 name 에 대한 값으로는 honorific-prefix, family-name 등이 있다.
• email
• username
• new-password
• current-password

... 등이 있다(더 많은 값은 MDN 참조하기)

느낀점

브라우저는 정말 더욱 사용자가 편리하고 이탈하지 않도록 많은 노력을 하고 있구나를 느꼈다. 나도 나의 사이트를 더욱 아끼고 더욱 사용자의 입장에서 이탈하고 싶지 않게, 더욱더 편하게, 자연스럽게 사용할 수 있도록 노력을 해야겠다!