[HTML/CSS] 1%의 UX향상을 위한 방법, datalist

 

안녕하세요 무택입니다 :)

오늘은 UX를 조금, 아주 조금이라도 향상시킬 수 있는 팁 datalist에 대해 써보겠습니다.

datalist는 `input`에서 텍스트를 입력받을 때, 몇몇 예시를 보여주는 기능입니다.

`select`를 사용하기에는 선택사항이 정해져 있는 건 아니고,

`input`을 사용할 때 선택사항을 보여줘서 선택할 수 있는, 약간의 편리성을 더해주는 기능입니다.

 

사용방법

사용방법은 어렵지 않습니다.

See the Pen [HTML/CSS] input의 datatlist 추가 by TytanLee (@TytanLee) on CodePen.

 

`input의 list`와 `datalist의 id`만 일치시켜 주면 선택사항을 노출시킬 수 있습니다.

 

 

사용에 적합한 상황

• 텍스트를 입력받아야 하는데, 사용자들이 많이 입력하는 사항이 있다?
• 텍스트를 입력받아야 하는데, 오타가 많은 단어라 분류작업이 어렵다?

 

위 같은 경우에 예시 텍스트를 보여주면 선택하기 쉽기 때문에 조금의 ux향상에 도움이 될 수 있습니다.

 

하지만 위에 나와있듯이 이 기능은 "텍스트를 입력받는 상황"에서만 사용이 적합합니다.

만약 "선택사항을 골라야 하는 상황"이라면 당연히 select를 사용해 기획하는 게 더 ux면에서 좋습니다.

 

그렇기 때문에 위 datalist는 그냥 '아 이런 기능도 있구나.. 우리 서비스에 이 기능을 넣으면 좋은 부분이 있을까?'정도로만 생각하고 넘어가면 좋을 것 같습니다.

 

---

같이 보면 좋은 글

[HTML] input 자동완성 비활성화하기

[HTML] input 자동완성 비활성화하기

 

[무료 템플릿 공유] SNS 운영의 필수템! 매력적인 피드 만들기

[무료 템플릿 공유] SNS 운영의 필수템! 매력적인 피드 만들기