HTML_선택목록 (feat. <select>, <option>)

우리는 흔히 웹서핑 도중에 쇼핑같은 것을 할때 선택목록을 마주하게 된다.

<select>, <option>은 이렇게 사용자가 무언가를 선택할때 만들 수 있는 태그이다.

dropdown list라고 불리는데,

어떻게 출력되는지 확인해보자

 

먼저 이 리스트를 사용자가 선택하면 서버로 보낸다는 가정 하에

폼태그도 같이 적어 보았다.

예재

<select>태그의 이름을 color로 지정했다.

즉, 선택하고 전송하게 되면 color=red 이런식으로 전송되도록 설정한 것이다.

이후 dropdown list에 항목을 입력하는데

생각보다 간단하다.

option (선택사항)을 활용해 값을 지정해 주면 된다.

 

그런데 여러개를 선택하게 할땐 어떻게 작성해야할까?

물론 위 dropdown list를 여러개 적을 수 있지만

다중선택이 가능한 list를 생성할 수 있다.

예재

이렇게 여러개를 선택할 수 있다.

달라진것은 select 태그에 multiple속성을 추가만 해주었다.

 

사용자가 여러개의 선택지를 고를 때 활용하면 좋겠다.

하지만, 다중선택 할 때 shift나 ctrl키를 누른채 선택해야하기 때문에

이를 사용자에게 알릴 필요가 있을 것 같다.