오랜만에 다시 글을 올립니다. 바로 본론으로 들어가서 폼의 Button, Select 요소에 대해서 알아보지요.

먼저 Button 엘리먼트입니다. Input과 별다른 차이없이 사용하지만 몇가지 더 유용한 기능을 제공하므로 되도록이면 button엘리먼트를 이용하는 것이 좋습니다.
그럼 자세한 속성에 대해사 알아보지요.

*먼저 button태그는 종료태그가 있는 것이 input태그와 다르다는 것을 알고 넘어갑시다..

[name]
input요소와 마찬가지로 버튼의 값도 submit시 서버로 송신됩니다. 송신될 변수값이 되겠지요.

[value]
송신될 변수의 값이됩니다.

[type]
button, submit, reset의 3가지로 버튼을 만들지요..
input처럼 image란 타입은 없지만 더욱 유용한 기능을 제공하지요.
아래에 따로 소개하도록 합니다.

[disabled]
비활성화 속성입니다. input과 동일합니다.

[tabindex]
탭 이동 순위를 지정합니다. input과 동일

[accesskey]
마찬가지 input을 참고..

[사용이벤트 핸들러]
onfocus, onblur, onclick, onmousedown 등등 사용


그럼 특징을 알아봅시다.
일단 모든 기능은 input태그와 동일하지요. submit, reset, button을 만드는데 사용합니다.
한가지 유용한 기능이 있다면 input에서는 이미지 타입으로 이미지 버튼을 생성할 경우
버튼에 내용을 넣을 수 없지만 button은 따로 이미지와 함께 내용을 넣을 수 있다는 것이
차이지요. 종료태그가 존재하기 때문에 value값을 다르게 전달 할 수도 있지요.
또한 이미지로 reset버튼을 만드는 것이 가능하다는 것이지요.

<button type=reset>내용<img src=이미지></button>

이렇게 이미지로 리셋버튼을 만들수 있으며 버튼에 이미지말고 내용도 첨가할수 있다는 점을
알고 계시면 조금 더 유용하게 사용할 수 있을 겁니다.


다음으로 select엘리먼트에 대해서 알아보지요.
select는 option, optgroup과 함께 사용되어서 여러개의 값을 선택적으로 전송하는
폼입니다. 기본은 multiple이 아닌경우 라디오 엘리먼트와 동일한 기능을 가진다고
보시면 이해가 쉬울 겁니다.
그럼 속성으로 들어가지요.

[name]
변수명을 지정합니다. 앞에 이야기한 것과 동일.

[size]
보여줄 열의 갯수를 표시합니다. 기본으로 1열만 보이지요.

[multiple]
다중 선택을 가능하도록 하는 것이지요. 지정하지 않을 경우 기본은 단일 선택입니다.

[disabled, tabindex]
설명생략

[이벤트 핸들러]
onchange를 자주 사용, 나머지 onclick, onmousedown등등 사용가능

다음으로 option입니다. select에서 하위 요소를 지정할 때 사용하지요.
select에서 name 속성에 변수를 할당하고  option에서는 그 변수에 대한 다양한 값을
선택할 수 있도록 지정하는 부분으로 이해하시면 됩니다. 속성을 보지요.

[selected]
사전 선택입니다. 체크박스에서 미리 체크되도록 하는 경우와 동일한 기능이지요.
multiple의 경우 여러개를 사전에 선택되도록 지정하는 것이 가능합니다.

[disabled]
비활성화.

[label]
활용하지 않는 기능이므로 생략(optgroup도 활용하지 않으므로 같이 생략)

그럼 실제 사용법을 알아보지요.. 다음과같이 다중선택 하는 폼이 있다고 하면

<select multiple name=num>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option value=5>4</option>
</select>

위에서 일단 value값이 없는 것들은 내용이 value값으로 대체되어 폼으로 넘어갑니다.
물론 따로 value값이 있을 경우 value값을 넘기지요.
예를 들어 1을 선택했을 경우 폼은 num변수에 1을 할당하고 4를 선택했을 때는 지정한 값이
있으므로 5라는 값을 num에 할당하지요. multiple 처리를 위해서는 반드시 value값을 지정하도록
합시다.

문제는 다음 다중선택을 할 경우입니다. select는 아주 멍청하기때문에 다중 선택을 할경우
순서대로 모두 값을 넘겨버립니다. 즉, 1,2,3을 선택하고 전송할 경우 폼은 순서대로 값을
넘기게 됩니다. 어떻게 넘기냐구요? 1이 선택되었으니 num은 1을 할당해서 넘기고
다음에 또 보니 2도 선택되었으니 다시 또 2를 할당하고 또 3도 선택되었으니 3을 할당해서 보내지요.
결국에는 num은 3값만을 할당받아서 폼처리 스크립트로 넘어가게 되지요. 그래서 다중처리를
위해서는 따로 자바스크립트를 이용해야 합니다. 간단히 처리 스크립트를 소개하고 마치도록 하지요.
<form onsubmit=multiple(this)>
<select multiple name=num>
  <option value=1>1</option>
  <option value=2>2</option>
  <option value=3>3</option>
  <option value=4>4</option>
</select>
<form>
일단 폼이 값을 폼처리 에이전트에 넘기기전에 중간에 처리를 해야하므로 onsubmit이벤트 핸들러를
적용하여 multiple이란 함수를 통해 중간 처리를 합니다.

function multiple(form){
temp="";
for(i=0;i<form.num.children.length;i++) {// 일단 option의 갯수만큼 체크여부를 확인합니다.
   if(form.num.children[i].selected) // 요소의 체크여부를 확인합니다.
      temp+=form.num.children[i].value+";"; // 임시변수에 값을 ;로 구분하여 저장합니다.
form.num.value=temp; // 임시변수에 있는 값을 num에 할당합니다.
}

이와 같이 처리 하면 되겠지요. 1234 모두 선택했을 경우 num에는 1;2;3;4;라는 값을 담아서
폼처리 에이전트에 전달하겠지요.. 그것은 다시 php로 처리할 경우 explode함수를 이용해 ;를
기준으로 다시 배열로 나누어서 처리하면 되지요. 방법은 이렇게 됩니다.
(php로 처리하는 경우 name을 바로 num[] 이렇게 처리하는 방법도 있지요.
이렇게 할 경우 간단히 num의 배열값만 검사하면 되므로 좀더 간단히 처리가 가능하지요.)

그럼 남은 요소들은 다음에 이어서 하도록 하지요.