개발일지

모르고 있었던 input엘리먼트의 기능들

제가 모르고 있었던 html의 기능들을 간추려봅니다.

1. 하나의 input[type=”file”]에 파일을 여러개 업로드 할 수 있다.

서버에서 받는 방법을 확인할 필요가 있네요. 아마 배열로 전달될 것 같습니다만..

2. input[type=”text”]에 suggest list를 구현해 줄 수 있다.

개인적으로 좀 놀랐던 기능입니다. jQuery의 autocomplete을 native기능으로 구현할 수 있다니!
하지만 실무에서 사용하기엔 기능이 조금 부족하다는 판단입니다.

단점 1: key값으로 검색할 수 없다.
예를 들어 상장사들의 리스트를 출력해야 하지만, 삼성전자(005930)를 삼성전자, 005930으로 동시에 검색하고 싶을때!
가능한 기능이 없습니다. 라벨을 출력할 수는 있지만 오직 value로만 검색을 제안할 수 있습니다.
연구가 필요할 것 같습니다.

단점 2: 검색제안 리스트의 길이를 제한할 수 없다. 만약 suggest가 100개라고 하면 100개를 모두 출력해 버립니다.
표시 화면의 높이를 넘어설 수도 있으니.. 역시 제어가 쉽지만은 않겠네요.

3. input[type=”number”]에 step을 줄 수 있고 값 증가 인터페이스가 노출되어 있다.

number type의 input태그는 일찍이 알고 있었지만 ui가 조잡하여 관심을 끄고 있었습니다.
하지만 값을 증가시키기 위한 ui의 후킹 메소드가 존재하고, 증가값도 설정해 줄 주 있었습니다!
이건 Modernizer같은 polyfill을 쓸 가치가 있다는 판단입니다.
앞으로 컴퍼넌트 설계에는 꼭 고려해 볼 기능인 것 같네요.

4. input[type=”checkbox”]에 indeterminate 라는 true,false 외의 제3의 상태가 존재한다

체크박스에 체크했는가? 체크하지 않았는가? 외의 제 3의 상태가 존재합니다.
기능 그 자체보다도 사용 용도를 찾기가 어렵네요;;
어떤 상황에서 사용해야 할까요..?

5. input[type=”image”]이 존재한다

submit버튼을 이미지로 만들 수 있습니다.
라운드 트립 어플리케이션이나, 폼 벨리데이션에는 사용할 만 하겠네요.

See the Pen Input 엘리먼트 트리비아 by cinos (@shoveller) on CodePen.