form태그 - 선택 관련 태그

[checkbox]

<input type=”checkbox”>

취미나 관심 항목 등 같은 종류의 아이템을 여러 개 선택하려고 할 때 많이 사용되는 양식태그로 같은 종류의 그룹으로 나타내기 위해 name을 모두 동일하게 정의해야 한다.

“checked”속성을 이용해서 기본으로 체크가 설정된 상태로 화면에 보여지도록 구현할 수 있다.

다음과 같은 코드를 추가한다.

 

기본으로 “JDBC”체크박스가 선택된 것을 확인할 수 있다.

 

“서버로 전송”버튼을 누른 후 주소표시줄을 확인하면 “checkbox”에 “value”속성을 정의하지 않아서 다음과 같이 어떤 것이 선택되었는지 알 수가 없다. 따라서 선택된 값을 이용해서 작업하려면 반드시 “value”속성을 정의해야 한다.

 

 

코드를 수정하여 “value”속성을 정의한다.

 

 

실행 후 submit버튼을 누르면 정상적으로 name과 value가 전송되는 것을 확인할 수 있다.

 

[radio]

<input type=”radio”>

투표하기 처럼 하나의 항목만 선택해야 하는 경우 보통 사용하는 양식태그 이며 name을 동일하게 주어야 전체 항목이 하나의 그룹으로 묶인다. 다음과 같은 코드를 추가한다.

 

실행하고 선택해보면 “name”속성을 동일하게 정의하지 않았기 때문에 같은 그룹에서 여러 개의 선택이 가능한 것을 확인할 수 있다.

 

수정하여 “name”속성을 동일하게 정의한다.

 

 

 

[select - 콤보박스]

콤보박스는  를 선택하여 목록을 나타내고 원하는 아이템을 선택할 수 있도록 하는 기능을 제공하는 양식태그로 <select>태그를 이용하여 정의한다. 각 아이템은 <option>태그로 정의하며 역시 name과 value속성을 정의해야 선택한 아이템이 서버로 전송될 수 있다.

 

 

다음과 같이 코드를 수정한다.

 

 

실행하면 추가된 콤보 상자를 볼 수 있다. 콤보 상자는 아이템을 하나만 선택할 수 있다.

 

[select - 리스트박스]

콤보 상자는 드롭 다운 버튼을 눌러야 아이템의 목록을 확인할 수 있지만 리스트 상자는 처음 실행할 때부터 아이템의 목록을 확인할 수 있다.

콤보 상자와 동일하게 <select>로 정의한 후 각 항목을 <option>으로 정의한다. <select>태그에서 “size”속성을 정의하면 콤보 상자가 리스트 상자로 변경된다.

정의된 아이템보다 size에 정의된 숫자가 작으면 수직 이동줄이 나타나며 안 보이는 아이템을 선택할 수 있도록 지원한다

 

코드 추가한다.

 

 

 

“서블릿” 아이템을 선택하고 [Ctrl]키를 누른 후 “오라클” 아이템을 선택하면 연속되지 않은 아이템을 복수 개 선택할 수 있고

 

“서블릿” 아이템을 선택하고 [Shift]키를 누른 후 “오라클” 아이템을 선택하면 연속된 아이템을 복수 개 선택할 수 있다.