[HTML] 선택태그 <select>, checkbox, radio

<select>태그는 사용자가 선택할 수 있는 목록을 만들어주는 태그입니다.

<option>태그는 <select>태그의 자식요소로 각 선택항목을 만들어주는 요소입니다. (사과, 배, 토마토 중 선택할 수 있는 목록을 만들었습니다)

잘 이해가 안간다면 일단, 아래 소스코드를 코딩해보고 실행하여 확인해보시기 바랍니다.

 

 

다음과 같이 간단한 선택목록창이 나타납니다.

 

 

 

사과를 선택하고 전송버튼을 눌러봅시다.

<option>태그의 value속성은 실제로 서버에 전달되는 값을 지정해주는 속성입니다. 예로, 사용자가 '사과'를 선택하여 전송버튼을 눌렀다면, 실제로 서버에 전달되는 값은 '사과'가 아닌 value의 속성값인 'apple'이 되는 것입니다.

 

 

<select>태그에 multiple 이라는 속성이 존재하는데, 이 속성을 넣어주면 다중선택이 가능한 선택목록창을 만들 수도 있습니다.

 

 

Ctrl키(Mac은 Command)를 누르고 선택하면 다중선택이 가능해집니다.

 

 

 

위에서 다중선택을 하기위해 multiple속성을 사용했습니다. 하지만, Ctrl키를 누르고 선택을 해야하는게 다소 불편해 보입니다.

그래서 다중선택에서 자주 사용되는게 checkbox입니다. radio는 단일선택을 할 때 사용됩니다. 두가지를 살펴보도록 하겠습니다.

name속성은 '그룹핑'이라고 생각하시면 됩니다. 제품을 구매할 때, 제품을 선택하고 사이즈를 선택해야 한다고 생각해봅시다.

두 선택지를 구분지어줄 무언가가 필요하죠? name속성은 각기 다른 선택목록을 구분지어 주는 이름입니다.

 

 

 

체크박스는 동시에 여러항목을 선택할 수 있고, radio는 한가지 항목만 선택되는 차이가 있습니다.

위의 코드를 실행하면 radio부분 사이즈 M에 자동으로 선택이 되어있습니다. 선택태그에는 checked라는 속성이 있어서, 이처럼 초기값을 지정해줄 수도 있습니다.