이번에 정리할 HTML 태그는 select입니다. 모든 학문이 그렇지만 특히 프로그래밍 공부는 이름으로부터 쓰임새를 유추하는 습관을 들여야 학습 효율이 높아짐니다. select 태그는 말 그대로 다양한 선택지 중에서 선택을 하는 드롭박스를 만드는 태그입니다. 물론 선택을 하는 사람은 웹페이지를 보고 있는 사용자 입니다. 그리고 선택된 내용은 일반적으로 웹서버로 전송해야 하겠죠.
앞서 우리는 input 태그를 공부한 적이 있습니다. input태그 역시 사용자 입력을 받는 다양한 type들을 지정하여 사용했었습니다(text, password 등등). 이렇게 사용자로 부터 입력받은 데이터들을 서버로 전송하려면 form 태그가 필요합니다. 구체적으로 form태그로 사용자 입력을 받는 태그들을 감싸주면 되는 것이죠.
그리고 입력된 데이터를 서버로 전송하라는 명령을 하는 submit 이라는 속성을 가진 input 태그가 필요합니다. 또는 button으로도 submit을 할 수 있는데 구체적인 것은 select 태그를 설명한 후에 다시 설명하겠습니다.
select와 option태그
우선 코드와 실행 결과를 먼저 보겠습니다.
브라우저의 실행결과만 간단히 캡쳐했습니다. 오른쪽 아래는 클릭했을 때의 드롭다운이 활성화 된 모습입니다.
우선 select태그는 드롭다운 박스를 만드는 틀이고 option태그로 드롭다운 내부에 아이템들을 하나씩 만들 수 있습니다. 우리가 앞서 배운 ol태그(ordered list)나 ul태그(unordered list)처럼 리스트를 만드는 태그도 내부의 아이템은 li 태그로 하나씩 만들었던 것과 비슷한 맥락입니다.
name 속성과 value 속성
모든 태그들은 다양한 속성을 가질 수 있습니다. 위 코드를 보면 select태그에는 name 속성, option태그에는 value속성이 있습니다. 이 속성들을 이해하기 위해 select태그에서 선택된 값들이 서버로 어떻게 전달되는가에 대해서 대략적으로 알아야 합니다. (어렵지 않습니다.)
다른 범용 프로그래밍 언어에 익숙하다면 이 두 속성은 변수와 그 변수에 대입되는 값으로 생각하면 되는데 구체적으로 위 코드에서 변수는 fruit가 되고 값은 사용자가 선택한 값(banana, apple, grape 셋 중에 하나)이 됩니다. 따라서 사용자가 바나나를 선택했다면 서버로 전송되는 것은 fruit=banana가 됩니다. 그리고 서버단에서는 fruit 변수가 사용된 프로그래밍을 해놓았다면 fruit에 사용자가 선택한 value(값)이 프로그램에 전달되고 그에 따른 코드를 실행하고 다시 사용자에게 결과화면을 보내주는 것이죠.
form과 submit
그러면 조금더 구체적으로 서버로 어떻게 전달되는지 알아보겠습니다. 위 코드를 form 태그로 감싸고 내부에 <input type="submit"> 태그를 추가해 보겠습니다.
action 속성
form 태그 에는 action이라는 속성이 있습니다. 이 속성은 submit(제출) 버튼을 눌렀을 때 이동할 웹페이지를 나타냅니다. 그런데 웹 페이지 주소 뒤에 추가적으로 다음과 같이 전달될 데이터 정보가 연결됩니다.
?fruit=banana
? 뒤에는 변수=값&변수=값&변수=값 ... 이런 형식으로 전달될 데이터들이 &로 연결되어 전달됩니다. 이 값들이 서버에서 어떻게 쓰이는지는 지금 당장 신경쓰지 않아도 됩니다. 단지 이렇게 전달이 되는구나~ 하는 정도만 알아두도록 하겠습니다.
optgroup태그
이 태그는 select태그 내에 있는 option태그들을 그룹화 하는데 사용하는 태그입니다.
위 코드에는 2개의 optgroup이 있습니다. 여기에는 라벨 속성이 있는데 label을 "과일1"과 "과일2로 했습니다. select태그에는 name속성이 있고 option태그는 value 속성이고 optgroup태그에는 label 속성을 쓰는게 혼동될 수도 있겠지만 앞서 설명한 것처럼 name 속성은 변수의 이름 value 속성은 변수에 할당되는 값으로 이해하면 됩니다. 그리고 label 태그는 단순히 표시되는 문자열을 뜻하는 것이구요. label은 전달될 데이터와 관련없고 표시되는 역할만 하기 때문이라고 기억해 두면 쉬울 것 같네요. 그리고 드롭다운을 눌렀을 때 다음과 같이 표시됩니다.
select 태그의 추가 속성
multiple
이 속성은 select태그의 속성입니다. 속성값은 없고 이 속성을 주게되면 복수 선택이 가능합니다.
size 속성
multiple 속성이 추가되면 스크롤바가 생기고 보여지는 아이템은 4개입니다. 그런데 multiple 속성을 사용하지 않고도 size=4를 추가해도 앞에 그림과 똑같은 결과가 나오게 할 수 있습니다.
아무튼 보여지는 아이템의 개수는 size 속성으로 조절할 수 있습니다. 앞서 작성된 코드는 optgroup의 label까지 해서 총 8개의 아이템이 있습니다. 모두 표시되도록 해보겠습니다.
required, disabled 속성
required 속성도 속성값이 없이 단독으로 쓰입니다. 이 속성이 쓰이면 선택지에서 반드시 선택을 해야만 합니다. 선택하지 않으면 선택하라는 메세지창이 생깁니다. (required 속성이 없을 때는 선택을 안하면 아무 값도 전달되지 않음)
disabled 속성은 사용자의 선택을 막아버리는 속성입니다.(비활성화)
그런데 required와 disabled 속성을 같이 사용하면 required 속성이 무시됩니다. 왜냐면 선택할 수 없는데 반드시 선택해야 한다면 모순되기 때문인데 이를 해결하기 위해서 이렇게 약속한 것이겠죠.