요약

  • datalist는 list 속성을 통해 편집 가능한 input에 추천값을 제공한다.
  • 브라우저는 추천값을 보여 주고 걸러 내며, 사용자는 필드 규칙에 맞는 다른 값도 쓸 수 있다.

창구 직원이 예상 답안 일곱 장을 펼쳐 놓고, 그 옆에 빈 종이와 펜을 놓는다. 웹 양식에서는 빈 종이가 빠진 경우가 많았다. 선택지에 내 사정이 없으면 내가 잘못 찾아온 사람이 되는 식이다. datalist는 태도를 조금 바꿨다. 작성자는 자주 나오는 답을 준비하고, 브라우저는 입력칸 옆에 띄운다. 방문자는 하나를 고르거나 계속 쓴다. 추천과 명령 사이에 빈칸 하나가 생겼다.

W3C가 2010년 3월 공개한 첫 HTML 마크업 초안은 datalist를 다른 제어 장치에 쓸 미리 정한 선택지를 담는 새 요소로 소개했다. 오래된 브라우저를 위한 대체 내용도 넣을 수 있었다. 당시의 웹은 새 입력 방식을 추가하면서도 여러 세대의 브라우저에 같은 문서를 건네야 했다. 작은 추천 목록에도 앞을 보면서 뒤를 챙기는 설계가 들어 있었다.

2011년 W3C 마크업 참고 문서는 다른 제어 장치의 선택지라는 정의를 유지했다. 여기서 역할이 갈린다. datalist는 제안을 보관하고, input은 실제 답을 받는다. 작성자가 인기 있는 이름들을 관리해도 사용자의 타자까지 소유하지는 않는다. 목록에 없는 작은 마을 이름은 입력칸의 규칙이 허용하는 한 적을 수 있다.

현재 HTML 표준의 양식 장에 따르면 비활성화되지 않고 값이 빈 문자열이 아닌 option이 추천이 된다. 추천에는 값과 표지가 있을 수 있다. 입력칸은 list가 가리키는 ID로 datalist를 찾는다. 화면의 표지는 사람이 알아보기 쉽게, 선택 뒤 칸에 들어가는 값은 시스템이 다루기 쉽게 만들 수 있다. 설명과 저장값이 각자 제 일을 한다.

입력 규칙은 브라우저가 편집 중 추천을 보여 주고 긴 목록은 걸러 낼 수 있게 한다. 표지와 값을 모두 검색하며 Unicode 정규화와 대소문자 차이도 살피라고 한다. 눈에는 똑같은 이름이 키보드와 문자 조합에 따라 다른 코드가 될 수 있다. 좋은 추천은 사용자가 어떻게 쳤는지 이해하려고 하고, 목록 관리자의 주문을 외우라고 하지 않는다.

추천을 고르면 브라우저는 직접 입력한 것처럼 그 값을 칸에 넣는다. 다른 유효한 값도 같은 칸에 쓸 수 있다. 필드의 종류와 일반적인 제한은 여전히 제출 가능 여부를 정한다. 많이 찾는 목적지는 몇 글자만으로 찾고, 목록 밖의 조용한 동네도 이름을 올릴 수 있다. 지름길이 생겼다고 길 끝에 문을 세울 이유는 없다.

작성자가 예측하고, 브라우저가 보여 주고, 사람이 답한다. 답의 범위가 정말 정해진 질문에는 닫힌 메뉴가 편하다. 사람 이름과 장소는 회의실에서 만든 목록을 금세 넘어선다. datalist는 인기 답안 카드를 잘 정리하면서도 빈 종이를 치우지 않았다. 그래서 이 작은 입력 도구가 조금 더 사람답다.