HTML datalist 태그 사용 방법 (with select 요소 차이점)
input 창에 어떤 변수값을 받는 경우를 필요로 할 때 간단하게 사용할 수 있는 태그가 두 가지 있습니다. 제목에서 언급한 <datalist> 태그와 <select> 태그입니다. 이 두가지 태그가 어떤 차이점이 있는지, 그리고 최신 버전인 <datalist> 태그는 어떤 식으로 사용하는지 알아보겠습니다. 생각보다 너무 쉽습니다. 먼저 아래의 예시를 살펴보시기 바랍니다.
datalist 사용 방법
See the Pen <datalist> Tag by rgy0409 (@rgy0409) on CodePen.
먼저 텍스트 출력을 위한 <label> 태그는 필수입니다. 그리고 <input> 태그를 사용함으로서 입력창을 만듭니다. 뒤이어 바로 오늘의 주인공인 <datalist> 태그를 사용하고 자식 요소로서 여러가지 <option> 태그들이 들어가게 됩니다. 즉 각 태그의 기능은 다음과 같습니다.
label : 원하는 문구(텍스트) 입력
input : 입력창 생성
datalist : 입력 가능한 값 또는 사용자가 직접 입력 가능한 값
option : 대략적으로 예상해둔 값을 미리 입력해둠
잘 모르시겠다면 위의 미리보기에서 입력창을 클릭해 보세요. 그러면 어떤 원리로 돌아가는지 금새 알 수 있습니다.
보시면 이렇게 option의 생성 개수 만큼, 그리고 option 태그 안 value에 지정해둔 변수명이 그대로 출력이 되고 있음을 알 수 있습니다.
datalist의 장점 중 하나는 바로 이렇게 자동완성 기능을 제공한다는 것입니다. 따라서 원하는 값을 더욱 빨리 찾아 입력할 수 있습니다.
또 다른 장점은 option에 없는 데이터 처리도 가능하다는 점입니다. 분명 개발자는 스라소니라는 value의 option을 태그로 생성한 상태가 아닙니다. 하지만 이렇게 사용자가 임의로 작성한 변수값도 그대로 입력해 받아들입니다.
주의사항
input과 datalist 태그는 서로 동기화가 되어야 합니다. 위의 태그 코드를 살펴보시면 input 안에는 list 옵션을 부여했고 해당 list 명과 datalist의 id명은 서로 같아야 합니다. 이 부분만 주의하시면 될 것 같습니다.
datalist CSS 제어가 되는가?
안 됩니다. 다만 자바스크립트를 사용해서 스타일 변경은 가능합니다. 그런데 이런 선택상자를 굳이 스타일을 만들어줄 필요가 있을지는 살짝 의문입니다. 자바스크립트를 사용해서라도 확인을 하시려면 아래의 코드펜을 살펴보시면 될 것 같습니다.
Custom DataList CSS
...
codepen.io
단 input 태그에 대한 CSS 제어는 가능합니다.
<select> 태그와의 차이점
See the Pen <select> Tag by rgy0409 (@rgy0409) on CodePen.
앞서 설명드렸듯 datalist는 미리 입력된 값 외에 사용자가 임의로 입력한 변수값도 데이터 입력을 받습니다. 단 select는 위의 예제에도 나와있듯 개발자가 미리 입력한 값 외에는 데이터를 받을 수 없습니다. 또한 자동완성같은 기능을 사용할 수 없기에 option값이 많을수록 원하는 값을 찾는데 시간이 걸릴 수 있습니다. 끝.
