PHP 프로그래밍

Web Programming >> PHP Programming

제5장 PHP와 자바스크립트의 활용

2. 자바스크립트로 입력 양식 다루기

앞서 이야기한 것처럼 사용자가 반드시 입력해야 할 항목을 빠뜨리지 않고 모두 입력했는지, 또는 해당 항목의 값으로 타당한 값을 입력했는지 등의 여부를 판단하기 위해서는 텍스트 입력박스나 라디오 버튼, 리스트박스등 여러 가지 유형의 입력 양식에 대하여 사용자가 어떠한 값을 입력 또는 선택했는지를 알 수 있어야 한다.

우선 하나의 예제를 보자

<html>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</table>

<p>

</form>

<a href="http://safelab.skku.ac.kr">http://safelab.skku.ac.kr</a>

</font>

</center>

</body>

</html>

[예제4.1] HTML 코드

가운데에 이름과 이메일 주소를 입력하는 두 개의 텍스트 입력박스가 있다. 여기에 사용자가 자신의 이름과 이메일 주소를 입력하고 항목 검사 버튼을 누르면 입력한 데이터가 6행에서 설정한 checkin.php3 파일로 전송된다. checkin.php3파일의 코드는 아래와 같다.

echo("입력하신 이름은 $name 이고 이메일 주소는 $email입니다.");

위 코드에서 보듯이 checkin.php3에서는 사용자가 입력한 이름과 이메일 주소 값을 변수 $name과 $email로 참조한다. 변수의 이름인 name과 Email은 [예제4.1]의 11행과 15행에서 각 입력 항목의 name값으로 준 이름과 동일하다.

따라서 입력한 값에 대해서 checkin.php3 파일의 실행 결과를 보면 다음과 같이 사용자가 텍스트 박스에 입력한 이름과 이메일 주소가 출력된다.

입력하신 이름은 정규현이고 이메일 주소는 khjung@kornux.com입니다.

즉, checkin.php3 파일과 같이 데이터를 전송 받는 PHP 파일에서는 사용자가 입력 항목에 입력한 값을 각 입력 양식의 name과 동일한 이름을 갖는 변수에 담아 저장한다. 따라서 쉽게 사용자가 입력한 값을 알 수 있다. 물론 서버 상에는 PHP 파일이 실행된 후에 가능하다. 그러나 만일 사용자가 이름과 이메일란에 아무런 값도 입력하지 않고 [항목검사] 버튼을 누르면 아래와 같이 해당 변수로는 아무런 값도 출력되지 않는다.

입력하신 이름은 이고 이메일주소는 입니다.

대부분의 경우 이러한 결과를 원하지 않을 것이다. 따라서 이러한 결과가 발생하지 않도록 하려면 사용자가 이름과 이메일란에 유효한 값을 입력했는지 체크하여 유효한 값이 입력되었을 경우 데이터를 PHP 파일로 전송하고 그렇지 않을 경우에는 사용자에게 다시 입력할 것을 요구해야 한다. 그리고 이러한 코드의 구현을 위해 자바스크립트를 사용해야 한다.

그렇다면 자바스크립트에서는 사용자가 입력한 값 "정규현"과 "khjung@kornux.com"을 어떤 방식으로 참조할까?

다음의 [예제4.2]는 사용자가 입력한 값을 자바스크립트를 이용하여 브라우저에서 확인하는 코드이다.

<html>

<head>

<!--

function checkIt(form) {

var name = document.forms[0].elements[0].value;

var email = document.forms[0].elements[1].value;

var msg = "입력하신 이름은 " + name + "이고 이메일은 " + email + "입니다.";

alert(msg);

if(!name || !email) {

alert('값을 입력하지 않았습니다. 다시 입력하여 주십시오');

return;

}

document.forms[0].submit();

}

//-->

</script>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</table>

<p>

</form>

<a href="http://safelab.skku.ac.kr">http://safelab.skku.ac.kr</a>

</font>

</center>

</body>

</html>

[예제4.2] 자바스크립트를 이용한 입력값의 참조

[예제4.2]에서는 [예제4.1]과 달리 사용자가 값을 입력하고 [항목검사] 버튼을 누르면 38행처럼 입력한 데이터를 PHP파일로 바로 보내지 않고 checkIt() 함수를 먼저 호출한다.

5행에서 18행까지의 checkIt() 함수에서는 사용자가 입력한 값을 검사하여 두 항목 중 어느 하나라도 값이 입력되지 않았을 경우 13,14행과 같이 재입력 메시지를 출력하고 함수 실행을 종료한다. 따라서 이 경우 사용자가 입력한 데이터는 26행에서 설정한 checkin.php3 파일로 전송되지 않는다.

6,7행을 보면 자바스크립트에서는 사용자가 입력한 이름과 이메일 값을 아래와 같은 방식으로 참조하는 것을 볼 수 있다.

var name = document.forms[0].elements[0].value;

var email = document.forms[0].elements[1].value;

그 결과 자바스크립트의 변수 name에는 "정규현"이, email에는 "khjung@kornux.com"이 각각 저장된다. 12~15행에서는 이 변수의 값이 null일 때, 즉 사용자가 해당 항목에 아무 값도 입력하지 않았을 경우에 메시지를 출력하고 함수의 실행을 종료한다.

6,7행에서 document는 현재의 문서를 가리키고 forms[0]은 현재의 문서 내에 존재하는 모든 폼을 배열로 인식하여 그중 첫 번째 폼, 즉 코드에서 첫 번째로 나타나는 <form>~</form> 태그 내의 사용자 입력 양식을 대표한다. 만일 <form>~</form>이 두 번 이상 나타날 경우 코드에서 나타나는 순서에 따라 forms[0], forms[1]이 되는 것이다.

26행에서 42행 사이의 코드를 보면 모두 세 개의 입력 양식이 나타난다. 즉 ,이름을 입력하는 31행의 텍스트 입력박스와 이메일을 입력하는 35행의 텍스트 입력박스, 그리고 38행의 함수를 호출하는 버튼이 그것이다. 따라서 forms[0]은 이들 세 가지의 입력 양식을 그 구성 요소로 가지고 있는 객체라고 부른다. 앞서 언급했던 document 역시 현재의 문서를 가리키는 객체이다.

폼은 document 내에 존재하는 것이기 때문에 이 폼 객체에 접근하기 위해서는 아래와 같이 접근하고자 하는 폼이 속해 있는 document 객체를 지정해주어야 한다.

document.forms[0] // 첫 번째로 나타나는 폼 객체

document.forms[1] // en 번째로 나타나는 폼 객체

그럼, 폼 객체 내에 존재하는 세 가지의 입력 양식에 각각 접근하려면 어떻게 해야 할까?

폼 객체 내에 존재하는 입력 양식도 document 객체에 대한 폼 객체의 접근 방식과 동일하다. 즉, 아래와 같이 접근하고자 하는 입력 양식이 속해 있는 폼 객체를 지정해줌으로써 각각의 입력 양식 객체에 접근할 수 있다.

그런데 품 객체가 하나의 document 내에 여러 개 존재할 수 있는 것처럼 하나의 폼 내에도 예제와 같이 여러 개의 입력 양식이 존재할 수 있다. 따라서 이들 입력 양식도 코드에서 나타나는 순서에 따라 배열로 접근해야 하며 이때 배열 이름으로는 elements를 사용한다.

즉, [예제4.2]의 폼(26~42) 내에는 모두 세 개의 입력 양식이 존재하므로 첫 번째로 나타나는 이름에 대한 텍스트 입력박스는 document.forms[0].elements[0]로, 두 번째로 나타나는 이메일에 대한 텍스트 입력박스는 document.forms[0].elements[1]로, 세 번째로 나타나는 버튼은 document.forms[0].eleme

nts[2]로 접근할 수 있다.

document.forms[0].elements[0] // 31행에서 정의한 텍스트 입력박스 객체

document.forms[0].elements[1] // 35행에서 정의한 텍스트 입력박스 객체

document.forms[0].elements[2] // 38행에서 정의한 버튼 객체

지금까지 설명한 것에서 짐작할 수 있듯이 자바스크립트에서는 모든 것을 객체로 취급한다. 따라서 사용자가 입력 양식에 입력 또는 선택한 값이 무엇인지를 확인하고자 할 때에도 우선은 각각의 입력 양식 객체에 접근한 뒤 각 객체가 가지고 있는 속성을 통해 참조해야 한다.

브라우저 윈도우는 window 객체에 속하며 이 window 객체는 자바스크립트의 객체 중에서 최상위에 존재한다. 위의 예에서 document.forms[0].elements[0]의 본래의 표현은 아래와 같다.

window.document.forms[0].elements[0]

모든 웹 문서는 브라우저를 통해서 볼 수 있으므로 브라우저 윈도우에서 불러들인 웹 문서는 자바스크립트의 관점에서 보면 브라우저 윈도우 즉, window 객체 밑에 존재하는 document 객체가 된다. 따라서 document 앞에 해당 document를 보여주고 있는 window 객체를 표시해야 하나 보통은 따로 구별할 필요가 없기 때문에 생략해도 된다. 그러나 만일 현재의 브라우저에서 링크를 클릭 하거나 함수 호출을 통해서 새로운 창을 띄웠을 경우에는 window 객체가 두 개가 되므로 구별을 위해 window 객체를 명시해 주어야 한다.

이 경우 새로운 창을 띄운 브라우저 윈도우를 부모 윈도우, 그리고 새로 생성된 창을 자식 윈도우라고 보면 자식 윈도우의 관점에서 부모 윈도우를 가리키는 window 객체는 opener라는 이름을 갖는다.

opener.document.forms[0].elements[0] // 부모윈도우내의 객체

document.forms[].elements[0] // 새로 생성된 윈도우내의 객체

한편 웹 문서에는 앞에서의 폼 양식뿐만 아니라 이미지, 하이퍼링크, 레이어, 프레임 등 여러 가지 구성 요소가 있는데 이들 역시 자바스크립트에서 객체를 통해 접근할 수 있다. 즉, 현재의 문서에서 첫 번째로 나타나는 이미지는 images라는 배열을 통해, 첫 번째로 나타나는 하이퍼링크는 links라는 배열을 통해 다음과 같이 접근할 수 잇다. 우리는 그중 여기서 폼 객체에 대해서만 다룰 것이다.

document.images[0] // 웹문서에 나타나는 이미지를 가리킨다.

document.links[0] // 웹문서에 나타나는 링크를 가리킨다.

자바스크립트에서 모든 객체는 속성(property)과 메쏘드(method)를 갖는다. 바로 이 속성을 통해서 우리는 현재의 입력박스에 사용자가 입력한 값이 무엇인지 참조할 수 있으며, 또 메쏘드를 통해서 유효하다고 판단한 입력값을 CGI 프로그램에 전달할 수도 있다. 즉, 속성과 메쏘드를 통해 여러 가지 사용자 입력 양식에 대한 접근 및 제어가 용이해지는 것이다.

이제 6,7행에서 다음의 자바스크립트 코드가 무엇을 가리키는지 알 수 있을 것이다.

var name = document.forms[0].elements[0].value; // "정규현"

var email = document.forms[0].elements[1].value; // "khjung@kornux.com"

첫 번째 줄은 현재의 문서 내에 존재하는 폼 양식 중 첫 번째 입력 양식인 이름 텍스트 입력 박스 객체에 접근하여 이 객체가 가지고 있는 value라는 속성 값을 변수 name에 할당한다는 의미이다. value라는 속성은 여러 입력 양식 중 텍스트 입력 양식, 즉 텍스트 입력박스 객체가 가지고있는 속성으로 해당 입력박스에 입력되어 있는 문자열을 담고 있다. 따라서 위의 객체에서는 해당 객체인 이름 텍스트 입력박스에 사용자가 입력한 "정규현"이라는 문자열을 가리킨다.

아래의 17행은 현재의 문서 내에 존재하는 첫 번째 폼 객체가 가지고 있는 submit()라는 메쏘드를 호출하라는 의미이다. 즉, 사용자가 입력한 값에 이상이 없음을 확인하고 이 메쏘드를 호출하게 되면 사용자가 입력한 데이터가 26행에서 지정한 checkin.php3 파일로 전송되는 것이다.

document.forms[0].submit();

[예제4.2]의 26행은 다음과 같다.

여기서 폼 태그 내에 해당 폼의 고유한 이름으로 "signform"이라는 문자열을 지정해주었다. 그러면 자바스크립트에서는 아래와 같이 배열의 인덱스 대신 고유 이름으로 해당 폼에 대한 폼 객체에 접근할 수 있다. 즉, 아래의 두 표현은 동일한 객체를 가리키는 동일한 코드이다.

document.forms[0] // 현재의 문서에서 첫 번째로 나타나는 폼을 가리키는 객체

document.signform // 이름이 "signform"인 폼을 가리키는 객체

폼 객체뿐 아니라 폼 안에 존재하는 여러 가지 입력 양식 객체에 접근할 때에도 배열의 인덱스 대신 고유 이름으로 접근할 수 있다.

document.forms[0].elements[0]

document.forms[0].name

document.signform.elements[0]

document.signform.name

품 객체 내의 첫 번째 입력 양식인 이름에 대한 텍스트 입력 양식 객체에 접근하는 방법은 위와 같이 elements 배열의 첫 번째 인덱스를 통해서 가능하지만 [예제4.2]의 31행에서 지정해 준 고유 이름 "name"으로도 객체에 대한 접근이 가능하다. 따라서 위의 네 가지 표현은 모두 이름 입력 항목 객체를 가리키는 동일한 표현이다.

보통 입력 값의 타당성을 검증하기 위하여 특정 객체에 대한 값을 조사하고자 할 때에는 네 번째 방식의 코드를 사용하지만 라디오 버튼이나 체크박스와 같이 전체 입력 값을 일괄적으로 조사하고자 할 때에는 배열의 인덱스를 이용하여 루프를 돌리기 때문에 첫 번째 코드도 자주 사용된다.

따라서 이제는 다음과 같이 해당 입력 양식 객체에 접근하여 그 객체가 가진 속성을 참조함으로써 여러 가지 입력 양식에 대해 사용자가 입력 또는 선택한 값을 쉽게 알아낼 수 있다.

document.signform.name.value // 사용자가 입력한 이름

document.signform.email.vlaue // 사용자가 입력한 이메일주소

이제 여러 가지 입력 양식을 가리키는 객체에 접근하는 방법을 알았으므로 각각의 입력 양식 객체가 가지고 있는 고유 속성과 메쏘드에 대해 예제를 통해 알아보자.

텍스트 입력 양식

텍스트 입력 양식은 흔히 게시판에서 사용자 이름과 이메일, 제목 등의 간단한 정보를 입력받을 때 쓰는 한 줄 짜리 텍스트 입력박스를 가리킨다.

텍스트 입력 양식을 만들려면 다음과 같은 형식의 HTML코드를 삽입해야 한다.

텍스트 입력 양식의 HTML 코드는 <input> 태그를 가지며 type은 text로 지정해 주어야 한다.

name은 해당 텍스트 입력 양식을 다른 입력 양식과 구별하기 위해서 부여하는 고유한 이름이다. 앞에서 이야기한 것처럼 이 이름을 통해 텍스트 입력박스에 대한 자바스크립트 객체에 접근할 수 있으므로 name은 반드시 지정하여주는 것이 좋다.

size는 텍스트 입력박스의 크기를 설정하는 것으로 이 값이 클수록 입력박스의 가로길이가 커진다. 그러나 입력박스의 크기만이 커질 뿐 실제 입력받을 수 있는 최대 문자열의 크기는 변하지 않는다.

maxlength는 텍스트 입력박스에 입력할 수 있는 최대 문자열의 크기를 가리킨다. 만일 이 값이 20이면 20개의 문자까지만 입력된다.

value는 사용자가 입력하기 전에 미리 해당 텍스트 입력박스에 표시하고 싶은 문자열을 가리킨다.

텍스트 입력 양식 객체가 가지고 있는 속성 및 메쏘드는 다음과 같다.

속성 및 메쏘드		설 명
속성 (property)	name	텍스트 입력 양식 객체가 가지는 고유 이름으로 HTML의 <input> 태그에서 name 속성으로 설정한 값을 가리킨다.
속성 (property)	value	텍스트 입력박스에 사용자가 입력한 문자열을 가리킨다.
메쏘드 (method)	focus()	이 메쏘드를 호출한 해당 객체가 가리키는 텍스트 입력박스에 커서를 위치시킨다.
메쏘드 (method)	select()	이 메쏘드를 호출한 해당 객체가 가리키는 텍스트 입력박스에 문자열이 있는 경우 이 문자열 을 선택한다.

[표4.1] 텍스트 입력 양식 객체의 속성과 메쏘드

[예제4.3]을 보자

<html>

<head>

<!--

function focusIt() {

document.signform.username.focus();

document.signform.username.select();

return true;

}

//-->

</script>

</head>

이름 : <input type="text" name="username" size="10" maxlength="20" value="정규현">

</font>

</form>

</body>

</html>

[예제4.3] 텍스트 입력 양식의 예

위 예제는 이름을 입력받을 수 있는 하나의 텍스트 입력박스를 만들고 이 텍스트 입력박스에 대한 객체의 메쏘드를 호출하여 웹 문서가 로딩된 후에 입력박스에 입력되어 있는 문자열이 자동으로 선택되도록 하는 예제이다.

위의 19행에서는 "username"이라는 고유 이름을 갖는 텍스트 입력박스를 생성한다. 따라서 이 입력 양식에 대한 객체는 이 텍스트 입력박스가 속해 있는 폼 객체의 이름이 "signform"이므로 다음과 같다.

document.signform.username // 텍스트 입력박스에 대한 객체

한편 사용자가 텍스트 입력란에 입력한 값을 알아내려면 [표4.1]에서 텍스트 입력 양식 객체의 value 속성 값을 참조하면 된다.

document.signform.username.value // 입력박스에 입력되어 있는 문자열

만일 텍스트 입력란에 커서를 위치시키려면 해당 객체의 focus() 메쏘드를 호출하면 되고 입력되어 있는 문자열이 선택되도록 하려면 select() 메쏘드를 호출하면 된다.

document.signform.username.focus()

document.signform.username.select()

만일 사용자가 이름란에 값을 입력했는지 여부를 체크하려면 아래와 같이 해당 객체의 value 값이 널 문자열(null string)인지를 확인하면 된다. 그래서 값을 입력하지 않은 경우에는 커서를 해당 입력란에 위치시키고 재 입력을 요구할 수 있다. 이는 보통 게시판의 입력 폼에서 흔히 사용하는 코드로 뒤의 게시판 개발에서도 이와 같은 코드를 이용하여 사용자가 게시판의 입력 폼에 아무런 입력을 하지 않고 데이터를 전송할 경우 다시 재입력을 요구하는 메시지 창을 띄우게 된다.

if (!document.signform.username.value) {

alert("Name 란이 비어 있습니다. \nName 란을 채워주셔야 합니다. ");

document.signform.username.focus();

return;

}

그러나 위와 같은 자바스크립트 코드로는 한계가 있다. 즉, 사용자가 입력을 전혀 하지 않은 경우만을 검사할 수 있다. 만일 사용자가 입력란에 스페이스 키만을 눌러 공백 문자열을 전달했을 경우에 위 코드의 "document.singform.username.value"는 널 문자가 아닌 공백 문자열을 가지므로 true가 된다. 따라서 이와 같이 외관상으로는 아무 값도 입력하지 않은 것처럼 보이는 경우를 위 함수만으로는 감지하지 못하므로 이때에는 제3장에서 배웠던 정규 표현식을 이용하여 입력 문자열에 대해 부가적으로 좀더 세밀한 검사를 수행하는 것이 좋다.

텍스트 영역 입력 양식

텍스트 입력 양식이 단 한 줄의 입력만을 받아들이는데 반해 텍스트 영역 입력 양식은 몇 줄 이상의 긴 글도 입력받을 수 있다. 따라서 보통 게시판의 본문은 이러한 텍스트 영역 입력 양식을 갖는다.

텍스트 영역 입력 양식을 만들려면 다음과 같은 형식의 HTML 코드를 삽입해야 한다.

텍스트 영역 입력 양식의 HTML코드에서 name은 해당 텍스트 영역 입력 양식에 대한 고유 이름이다. rows는 사용자가 입력할 텍스트 영역의 크기로 행의 수, 즉 세로 크기를 가리키며 cols는 열의 수, 즉 가로 크기를 가리킨다.

wrap은 텍스트 영역 입력 양식에 사용자가 입력한 문자열이 cols에서 지정한 가로 크기보다 더 길 경우 다음 줄에서 계속 이어 입력할 수 있도록 할 것인 지의 여부를 설정한다. 이 값이 on이면 입력한 문자열의 오른쪽 끝이 cols에서 지정한 열의 크기를 넘어설 경우 다음 줄로 넘겨서 계속 입력을 받는다. 만일 이 값이 off이면 다음 줄로 넘기지 않고 한 줄에서 계속 입력을 받는다. 이 경우에는 좌우로 긴 스크롤 바가 생기게 된다. 기본 값은 on 이다.

텍스트 영역 입력 양식 객체는 다음과 같은 속성과 메쏘드를 가진다.

속성 및 메쏘드		설 명
속성 (property)	name	텍스트 입력 양식 객체가 가지는 고유 이름으로 HTML의 <textarea> 태그에서 name 속성으로 설정한 값을 가리킨다.
속성 (property)	value	<textarea>와 </textarea>사이에 있는 문자열, 즉 사용자가 텍스트 영역에 입력한 문자열을 저장하고 있는 속성이다.
메쏘드 (method)	focus()	이 메쏘드를 호출한 해당 객체가 가리키는 텍스트 영역에 커서를 위치시킨다.
메쏘드 (method)	select()	이 메쏘드를 호출한 해당 객체가 가리키는 텍스트 영역에 문자열이 있는 경우 이 문자열을 선택한다.

[표4.2] 텍스트 영역 입력박스 객체의 속성과 메쏘드

텍스트 영역 입력박스 객체가 가진 속성과 메쏘드는 텍스트 입력박스 객체가 가진 속성 및 메쏘드와 동일한 의미를 갖는다.

다음의 예제를 보자

<html>

<head>

<!--

function focusIt() {

document.guestbook.comment.focus();

document.guestbook.comment.select();

return true;

}

function checkIt(form) {

var str = form.comment.value;

alert(str);

}

//-->

</script>

</head>

메시지본문 :<br>

<textarea name="comment" rows="10" cols="60">안녕하세요? PHP3 스크립트 언어입니다!!! 안녕하세요? PHP3 스크립트 언어입니다!!!안녕하세요? PHP3 스크립트 언어입니다!!!안녕하세요? PHP3 스크립트 언어입니다!!!</textarea>

</font>

</form>

</body>

</html>

[예제4.4] 텍스트 영역 입력 양식의 예

의의 25행에서 만든 텍스트 영역 입력박스에 미리 값을 입력해 두고 [항목검사]버튼을 클릭 했을 때 11~14행의 checkIt() 함수를 호출하여 현재 텍스트 영역 입력박스에 저장되어 있는 문자열을 출력하는 예제이다.

텍스트 영역 입력 양식에 미리 문자열을 저장하려면 [예제4.4]의 25행에서와 같이 <textarea></text

area> 사이에 저장할 문자열을 적어주면 된다. 텍스트 영역 입력 양식에 문자열을 입력한 후 [항목검사] 버튼을 클릭하면 checkIt(this.form)이라는 함수가 호출되는데 여기서 this.form은 버튼 입력 양식이 속해 있는 폼 객체를 가리키는 매개변수이다.

[예제4.4]의 경우 21행에서 현재의 [항목검사] 버튼이 속해 있는 폼이 guestbook임을 알 수 있다. 따라서 this.form은 폼 객체 document.guestbook을 가리킨다. 결국 11~14행의 checkIt(form) 함수에서 인자로 받는 form은 document.guestbook을 가리키므로 12행의 코드 var str = form.comment.value;는 다음과 같이 표현할 수 있다.

var str = document.guestbookcomment.value;

결국 현재의 텍스트 영역 입력 양식에 입력되어 있는 문자열을 변수 str에 할당하여 13행에서 메시지를 띄운다.

패스워드 입력 양식

패스워드 입력 양식은 사용자가 입력박스에 값(주로 암호)을 입력할 때 입력 값이 노출되지 않고 모두 '*'로 표시되어 나타난다는 것을 제외하고는 텍스트 입력 양식과 모든 면에서 동일하다.

패스워드 입력 양식은 다음과 같은 HTML 코드를 삽입하여 만들 수 있다.

패스워드 입력 양식의 HTML 코드는 텍스트 입력 양식의 HTML 코드와 마찬가지로 <input> 태그를 가지며 이때 type은 password로 지정해주어야 한다.

나머지 HTML 태그의 속성은 텍스트 입력 양식의 경우와 같으며 패스워드 입력 양식 객체가 갖는 속성 및 메쏘드 역시 텍스트 입력 양식 객체와 동일하다.

다음의 예제를 보자

<html>

<head>

<!--

function checkIt(form) {

var pass = form.passwd.value;

alert(pass);

}

//-->

</script>

</head>

<body>

이름 : <input type="password" name="passwd" size="10" maxlength="20">

</font>

</form>

</body>

</html>

[예제4.5] 패스워드 입력 양식의 예

위의 예제는 패스워드 입력박스에 암호를 입력하고 [항목검사] 버튼을 클릭하면 암호로 입력한 문자열을 출력하는 예제이다.

5~8행은 [항목검사] 버튼을 클릭 했을 때 실행되는 checkIt() 함수이다. 여기서는 패스워드 입력 양식 객체 document.signform.passwd의 value 속성 값을 참조하여 사용자가 입력한 암호 문자열을 출력한다. 예를 들어, 암호 입력란에 "123456"을 입력하고 항목 검사 버튼을 누르면 12행의 checkIt() 함수에서 password 객체의 value 속성에 접근하여 암호로 입력한 값을 확인할 수 있다.

버튼 입력 양식

버튼 입력 양식은 보통 해당 버튼을 클릭 했을 때 특정 함수를 실행하기 위해 사용한다. 우리는 이미 지금까지의 예제에서 이 버튼 입력 양식을 사용해왔다.

버튼 입력 양식을 만들기 위한 HTML 코드는 다음과 같다.

버튼 입력 양식의 HTML 코드 역시 <input> 태그를 가지며 type은 button 으로 지정해 주어야 한다. value는 버튼 위에 쓰여질 문자를 가리킨다. onClick은 버튼을 클릭 하는 순간에 발생하는 이벤트에 대한 이벤트 핸들러로 여기서 지정한 함수나 메쏘드가 버튼을 클릭 하는 순간에 호출, 실행된다.

버튼 입력 양식의 객체는 다음과 같은 속성과 메쏘드를 가진다.

속성 및 메쏘드		설 명
속성 (property)	name	버튼 입력 양식 객체가 가지는 고유 이름으로 HTML의 <input> 태그에서 name 속성으로 설정한 값을 가리킨다.
속성 (property)	value	버튼 위에 쓰여지는 문자열을 저장하고 있는 속성이다.
이벤트 핸들러	onClick	사용자가 버튼을 클릭하는 순간 발생하는 이벤트 핸들러로 여기서 설정한 함수나 메쏘드가 호출, 실행된다.

[표4.3] 버튼 입력 양식 객체의 속성과 메쏘드

다음의 예제를 보자

<html>

<head>

<!--

function checkIt(form) {

if(!form.username.value) {

form.username.focus();

alert("이름을 입력하지 않으셨습니다!");

return;

}

if(!form.email.value) {

form.email.focus();

alert("이메일을 입력하지 않으셨습니다!");

return;

}

alert("입력하신 이름은 " + form.username.value + "이고 이메일은 " + form.email.value + " 입니다.");

}

//-->

</script>

</head>

<body>

이름 : <br>

이메일 : <br>

</font>

</form>

</body>

</html>

[예제4.6] 버튼 입력 양식 HTML 코드

위의 예제는 이름과 이메일 두 개의 텍스트 입력란에 사용자가 자신의 이름 및 이메일 주소를 입력하고 [항목검사] 버튼을 클릭하면 사용자가 입력한 이름과 이메일 입력값을 출력하여 주는 예제이다.

위 예제 28,30행에서는 이름과 이메일 주소에 대한 텍스트 입력박스를 만들고 33행에서는 "항목검사"라는 문자열을 가진 버튼을 만든다. 사용자가 입력란에 값을 입력하고 항목 검사라는 버튼을 클릭하면 onClick에서 지정해준 함수 checkIt(thes.form)가 호출, 실행된다.

5~17행의 함수 checkIt() 은 이름과 이메일란에 사용자가 입력한 값을 아래와 같이 텍스트 입력 양식 객체의 value 속성 값을 통해 검사하여 이 값이 null일 경우 재입력을 요구하는 메시지 윈도우를 출력하고 함수의 실행을 종료한다.

document.signform.username.value // 정규현

document.signform.email.value // khjung@kornux.com

데이터 전송 및 최소 버튼(submit과 reset)

데이터 전송 버튼은 입력 양식에 사용자가 입력 또는 선택한 값들을 CGI 프로그램에 넘겨주기 위해서 사용된다. 그리고 취소 버튼은 사용자가 입력한 값들을 지우고 초기 값으로 초기화 할 때 사용하는 버튼이다.

데이터 전송 버튼을 만들려면 다음과 같은 형식의 HTML코드를 삽입해야 한다.

데이터 전송 버튼의 HTML 코드는 버튼 입력 양식과 마찬가지로 <input> 태그를 가지며 type은 submit로 지정해주어야 한다.

다음의 예제를 보자.

<html>

<body>

이름 : <br>

이메일 : <br>

</font>

</form>

</body>

</html>

[예제4.7] 데이터 전송 및 취소 버튼의 예

위의 예제는 두 개의 텍스트 입력 양식을 만들어 각각의 입력란에 이름과 이메일을 입력한 후 [전송] 버튼을 클릭 하게 되면 전송 버튼이 포함되어 있는 폼 즉, 4~16행 내의 모든 입력 양식의 값들이 4행에서 action 속성으로 설정한 print_all_data.php3 파일로 전송된다.

print_all_data.php3 파일의 내용은 다음과 같다.

while(list($key, $val) = each($HTTP_POST_VARS)) {

echo("변수 ${key}의 값은 $val<br>");

}

print_all_data.php3 파일에서는 POST 방식을 통해 넘어온 변수와 값들을 모두 출력한다. [예제4.7]의 4행에서 <form> 태그에 method 속성 값으로 "POST"를 설정하였으므로 사용자가 두 개의 입력란에 입력한 데이터는 POST 방식으로 print_all_data.php3에 넘어온다. 따라서 POST 방식으로 넘어온 값들을 저장하고 있는 배열 $HTTPPOST_VARS로부터 사용자가 입력한 값과 해당 입력 양식의 이름을 알 수 있다. 만일 사용자가 이름란에 "정규현"을, 이메일란에 "khjung@kornux.com"을 입력하고 [예제4.7]의 전송 버튼을 누르면 print_all_data.php3에 의해 아래와 같은 결과가 브라우저에 출력된다.

변수 username의 값은 정규현

변수 email의 값은 khjung@kornux.com

한편 전송 취소 버튼은 사용자가 입력한 값들을 지우고 초기 값으로 초기화 할 때 사용하는 버튼으로 12행과 같이 <input> 태그 내의 type 속성 값으로 "reset"을 설정하여 생성할 수 있다. 보통 전송 버튼 옆에 함께 나타내며 그 속성 및 객체는 버튼 입력 양식의 속성 및 button 객체의 경우와 동일하다.

hidden 입력 양식

hidden 입력 양식은 그 속성이 텍스트 입력 양식의 경우와 같다. 텍스트 입력 양식과 다른 차이점이 있다면 hidden 입력 양식은 이름 그대로 웹 페이지에 나타나지 않고 그 값을 전달한다는 점이다.

hidden 입력 양식은 위와 같은 HTML 코드를 통해 만들 수 있으며 이때 <input> 태그의 type은 "hidden"으로 설정해야 한다.

<html>

<head>

<!--

function checkIt(form) {

alert(form.username.value);

}

//-->

</script>

</head>

<body>

</font>

</form>

</body>

</html>

[예제4.8] hidden 입력 양식의 예

위의 예제를 브라우저에서 부르면 19행에서 정의한 "항목검사"라는 버튼만을 볼 수 있다. 즉, 16행에서 정의한 hidden 입력 양식은 그 값으로 "정규현"이라는 문자열을 가지지만 웹 페이지에는 출력되지 않는다. 그러나 19행에서 버튼을 클릭 하여 checkIt() 함수를 호출하면 6행으로부터 보이지 않는 입력 양식에 저장되어 있는 값 "정규현"이라는 값을 출력할 수 있다.

라디오 버튼 입력 양식

라디오 버튼은 여러 항목 중에서 한 가지만을 선택할 수 있는 특징을 가진 입력 양식이다.

라디오 버튼 양식은 아래와 같이 <input> 태그의 type 속성을 "radio"로 설정함으로써 만들 수 있다.

여기서 name은 해당 라디오 버튼을 다른 입력 양식과 구별하기 위해서 부여하는 고유 이름이다. 라디오 버튼의 경우 다른 입력 양식과 달리 여러 개의 항목 중 반드시 하나를 선택해야 하므로 선택 대상이 되는 모든 항목은 모두 동일한 name 값을 갖는다.

value는 선택 대상이 되는 라디오 버튼 각각의 항목에 할당되는 값으로 사용자가 그중 어느 하나의 항목을 선택할 경우 해당 라디오 버튼 항목이 가지고 있는 value 값이 PHP에서 라디오 버튼의 name과 동일한 이름을 가진 변수의 값으로 전달된다.

checked는 라디오 버튼을 생성할 때 미리 그중 어느 하나를 선택된 상태로 하기 위해 설정하는 옵션으로 미리 선택된 상태로 두고자 하는 라디오 버튼 항목에 위의 HTML 코드와 같이 "CHECKED"라는 옵션을 설정하면 된다. 만일 사용자가 어느 라디오 버튼을 선택하게 되면 라디오 버튼 객체의 checked 속성은 true가 된다.

라디오 버튼 객체는 [표4.4]와 같은 속성과 이벤트 핸들러를 가지며 이 속성과 이벤트 핸들러를 통해 라디오 버튼 양식에 대한 접근 및 값의 참조가 가능해진다.

속성 및 메쏘드		설 명
속성 (property)	name	라디오 버튼 객체가 가지는 고유 이름으로 HTML 의 <input>태그에서 name 속성으로 설정한 값을 가리킨다.
	value	라디오 버튼의 각각의 항목이 저장하고 있는 값
	length	하나의 라디오 버튼 그룹 내에서 선택할 수 있는 총 항목수, 즉 라디오 버튼의 총 개수를 의 미한다.
	checked	해당 객체의 라디오 버튼 항목이 선택되어 있는지 여부를 저장한다. 만일 해당 항목이 선택되 어 있으면 이 값은 true를 가지고, 그렇지 않을 경우 false를 갖는다.
이벤트 핸들러	onClick	사용자가 라디오 버튼을 클릭하는 순간에 발생하는 이벤트에 의한 이벤트 핸들러로 여기서 지정한 함수가 라디오 버튼을 클릭하는 순가 호출, 실행된다.

[표4.4] 라디오 객체의 속성과 메쏘드

다음의 예제를 보자.

<html>

<head>

<!--

function checkIt(form) {

for(var i = 0; i < form.obj1.length; i++) {

if(form.obj1[i].checked == true) {

alert(i+1 + "번째 항목을 선택하셨습니다! 선택하신 항목의 값은 " + form.obj1[i].value + " 입니다.");

break;

}

if(i == form.obj1.length) {

alert("아무것도 선택하지 않으셨습니다!");

return;

}

//-->

</script>

</head>

<body>

<b>아래의 항목중 하나를 선택하세요~!</b><p>

</form>

</font>

</body>

</html>

[예제4.9] 라디오 버튼 입력 양식의 예

위 예제는 모두 다섯 개의 라디오 버튼 항목 중 사용자가 어느 하나를 선택하고 [결과확인] 버튼을 클릭 했을 때 다섯 개 중 몇 번째 항목을 선택했으며 또 그 값은 얼마인지를 출력하는 예제이다.

[예제4.9]에서는 아래와 같이 29~33행의 코드를 통해 다섯 개의 라디오 버튼을 생성한다.

예제에서 생성한 라디오 버튼의 이름은 모두 "obj1"이며 다섯 개의 항목 중 단 한가지만을 선택할 수 있는 라디오 버튼의 특성상 이 name 속성 값은 5갱의 라디오 버튼이 모두 동일한 값을 갖는다. 그러나 value 속성 값은 각각의 항목이 서로 다른 값을 가질 수 있으며 사용자가 어떤 라디오 버튼을 선택하느냐에 따라 선택한 라디오 버튼 항목의 value 값이 name으로 지정한 "obj1"이라는 라디오 버튼의 값으로 할당된다. 즉, 사용자가 "네 번째 항목"을 선택했을 경우 "1104"이라는 값이 라디오 버튼 변수 "$obj1"의 값으로 할당된다. 만일 라디오 버튼을 생성할 때 임의의 항목, 예를 들어 "두 번째 항목"이 이미 선택된 채로 표시되도록 하려면 다음과 같이 해당 라디오 버튼의 <input> 태그 내에 "CHECKED"라는 속성을 추가해야 한다.

사용자가 다섯 개의 라디오 버튼 중 어느 하나의 라디오 버튼을 선택하고 [결과확인] 버튼을 클릭하면 35행에서 지정한 checkIt() 함수가 호출된다.

5~17행의 checkIt() 함수는 선택 대상이 되는 모든 라디오 버튼 항목을 조사하여 사용자에 의해 선택된 라디오 버튼이 있는지를 조사하고 선택된 항목이 없을 경우 아무 것도 선택하지 않았다는 메시지를 출력하고 함수의 실행을 종료한다. 그러나 다섯 개의 항목 중 사용자에 의해 선택된 라디오 버튼이 존재할 경우 이 라디오 버튼이 몇 번째이고 해당 라디오 버튼이 가지고 있는 값이 얼마인지를 출력한다.

이의 구현을 위해서는 선택 대상이 되는 라디오 버튼의 총 개수를 알아야 하는데 이는 [표4.4.]의 라디오 객체 속성 중 length 속성을 통해 참조할 수 있다. 즉, 예제에서는 라디오 버튼이 모두 다섯 개이므로 라디오 버튼 객체의 length 속성은 다음과 같이 접근할 수 있으며 그 값은 5가 된다.

document.mresearch.obj1 // 라디오 버튼 객체를 가리킨다.

document.mresearch.obj1.length // 라디오 버튼의 총 개수, 5

다음으로 하나하나의 라디오 버튼이 현재 선택되어 있는지를 확인하려면 [표4.4]의 checked 속성 값이 true인지 여부를 비교하면 된다. 그런데 라디오 버튼의 name 속성은 "obj1"로서 모두 같으므로 각각의 라디오 버튼 항목을 서로 구별할 방법이 없게 된다. 이때에는 라디오 버튼의 name을 배열로 취급하고 그 배열의 인덱스를 통해서 각각의 라디오 버튼 항목을 구별함으로써 해당 라디오 버튼이 가진 value나 checked 속성 값을 참조할 수 있다. 즉, 각각의 라디오 버튼이 가진 value 값을 참조하려면 아래와 같이 라디오 버튼 이름인 "obj1"을 배열로 취급하여 배열의 인덱스 값을 통해 각 라디오 버튼 객체의 value 속성 값에 접근할 수 있다.

document.mresearch.obj1[0].value // 1101

document.mresearch.obj1[1].value // 1102

document.mresearch.obj1[2].value // 1103

document.mresearch.obj1[3].value // 1104

document.mresearch.obj1[4].value // 1105

마찬가지 방식으로 각각의 라디오 버튼 항목이 현재 사용자에 의해 선택되었는지 여부를 체크하려면 배열 인덱스로 구분되는 해당 라디오 버튼 항목의 checked 속성 값이 true인지를 비교하면 된다.

document.mresearch.obj1[i].checked // i+1번째 항목이 선택되었으면 true를 갖는다.

만일 사용자가 "네 번째 항목"에 해당하는 라디오 버튼을 클릭 하였을 경우 네 번째 라디오 버튼의 checked 속성만이 true가 되고 나머지는 모두 false를 갖는다.

document.mresearch.obj1[0].checked // false

document.mresearch.obj1[1].checked // false

document.mresearch.obj1[2].checked // false

document.mresearch.obj1[3].checked // true

document.mresearch.obj1[4].checked // false

함수 checkIt()의 6~11행은 바로 이러한 라디오 객체의 속성을 통해 사용자가 어떠한 항목을 선택했으며 그 값이 얼마인지를 출력하는 코드이다. 만일 사용자가 다섯 개의 라디오 버튼 중 어느 하나도 선택하지 않으면 변수 I의 값은 13행에서 결국 form.obj1.length와 같아지므로 이때에는 아무 것도 입력하지 않았다는 메시지를 출력하고 함수의 실행을 종료하게 된다.

체크박스 입력양식

체크박스는 하나만 선택할 수 있는 라디오 버튼과 달리 여러 개의 항목을 함께 선택할 수 있는 특징을 갖는 입력 양식이다. 따라서 라디오 버튼이 모든 항목에 대해 동일한 이름을 갖는 것에 비해 체크박스는 모두 서로 다른 이름을 갖는다. 그리고 사용자가 여러 개의 항목을 선택한 후에 [전송] 버튼을 누르면 모든 항목 중에서 사용자가 선택한 체크박스의 변수와 값만이 전송된다.

체크박스는 다음과 같이 <input> 태그 태의 type 속성 값을 "checkbox"로 설정함으로써 만들 수 있으며 기본 형식은 다음과 같다.

여기서 name은 다른 입력 양식과 구별하기 위해서 체크입력박스가 갖는 고유한 이름이고 value는 해당 체크박스를 선택했을 때 전달되는 값이다. CHECKED 옵션은 라디오 버튼 입력 양식의 경우와 마찬가지로 체크박스를 생성할 때 미리 체크가 된 상태로 표시하고자 할 때 설정해 준다.

체크박스 객체는 다음의 [표4.5]와 같은 속성과 이벤트 핸들러를 가지며 이 속성과 이벤트 핸들러를 통해 체크박스 입력 양식에 대한 접근 및 값의 참조가 가능해진다.

속성 및 메쏘드		설 명
속성 (property)	name	체크박스 객체가 가지는 고유 이름으로 HTML의 <input>태그에서 name 속성으로 설정한 값 을 가리킨다.
	value	체크박스에서 저장하고 있는 값 HTML의 <input>태그에서 value 속성으로 설정한 값을 가리 킨다.
	checked	해당 체크박스가 사용자에 의해 체크되어 있는지 여부를 저장한다. 만일 체크박스가 체크되어 있으면 이 값은 true를 가지고, 그렇지 않은 경우에는 false를 갖는다.
이벤트 핸들러	onClick	사용자가 체크박스를 클릭 하는 순간에 발생하는 이벤트에 의한 이벤트 핸들러로 여기서 지정 한 함수가 체크박스를 클릭할 때 호출, 실행된다.

[표4.5] 체크박스 객체의 속성과 메쏘드

체크박스를 이용한 다음의 예제를 보자

<html>

<head>

<!--

function checkIt(form) {

var str = "";

for(var i = 1; i <= 5; i++) {

if(eval("form.obj" + i + ".checked") == true) {

str += i + "번째 항목을 선택하셨습니다! 선택하신 항목의 값은 " + eval("form.obj" + i + ".value") + " 입니다.\n";

}

alert(str);

}

//-->

</script>

</head>

<body>

<b>아래의 항목중 하나를 선택하세요~!</b><p>

</form>

</font>

</body>

</html>

[예제4.10] 체크박스 입력 양식의 예

위 예제는 모두 다섯 개의 체크박스 항목 중 사용자가 몇 번째 체크박스를 선택했는지, 그리고 그 체크박스의 값이 얼마인지를 출력하는 예제이다. 라디오 버튼을 사용한 [예제4.9]와 거의 비슷하지만 사용자가 동시에 여러 개를 선택할 수 있기 때문에 선택한 체크박스의 정보를 모두 출력해주어야 한다.

[예제4.10]의 26행에서 30행의 코드를 보면 앞서의 라디오 버튼과 달리 체크박스 입력 양식의 name은 모두 다르다는 것을 알 수 있다. 사용자가 이 다섯 개의 체크박스 중 일부를 선택한 뒤 [결과확인] 버튼을 클릭하면 checkIt() 함수가 실행된다.

5~14행의 checkIt() 함수에서는 아래와 같이 다섯 개의 체크박스 객체에 접근하여 각 객체가 가진 checked 속성 값을 검사한다.

if (document.mresearch.obj1.checked == true) // false

if (document.mresearch.obj2.checked == true) // true

if (document.mresearch.obj3.checked == true) // false

if (document.mresearch.obj4.checked == true) // true

if (document.mresearch.obj5.checked == true) // true

체크박스 객체의 checked 속성은 [표4.5]에서와 같이 해당 체크박스가 선택되어 있으면 true 값을 갖는다. 따라서 다섯 개의 체크박스 객체의 checked 속성을 검사하여 다섯 개의 체크박스 중 이 값이 true인 체크박스에 대해서는 몇 번째 체크박스인지, 그리고 그 체크박스의 값은 얼마인지에 대한 정보를 출력한다.

9행을 보면 아래와 같은 코드가 보인다.

if(eval("form.obj" + i + ".checked") == true) {

이 9행의 코드는 위에서 다섯줄로 표현한 코드를 루프 제어 구조를 이용하여 한 줄로 줄인 것이다. 즉, 8행에서 i 가 1부터 5까지 변함에 따라서 다섯 개의 체크박스 객체의 속성 값이 true인지를 순차적으로 비교하는 코드인데 이 경우 단순히 아래와 같이 문자열을 '+' 연산자로 더하기만 하면 객체로서 인식하지 못한다. 즉, 아래의 코드는 "form.obj1.checked"이라는 문자열을 의미할 뿐이다.

"form.obj1.checked" // 단지 문자열 "form.obj1.checked"일 뿐이다.

이 문자열 "form.obj1.checked"를 문자열이 아닌 "obj1"이라는 이름을 갖는 체크박스에 대한 객체와 그 객체의 속성 값으로 인식할 수 있도록 하기 위해서는 위에서처럼 eval() 함수를 사용한다. 즉, eval() 함수를 사용한 다음의 코드는 문자열이 아닌 속성 값을 갖는다.

eval("form.obj1.checked")

결국 8~12행의 코드는 다음과 같은 코드를 줄여서 쓴 것이라고 볼 수 있다.

if(form.obj2.checked == true) {

str += "1번째 항목을 선택하셨습니다! 선택하신 항목의 값은 " + form.obj1.vale + "입니다.\n";

}

if(form.obj2.checked ==true) {

str += "2번째 항목을 선택하셨습니다! 선택하신 항목의 값은 " + form.obj2.vale + "입니다.\n";

}

if(form.obj3.checked ==true) {

str += "3번째 항목을 선택하셨습니다! 선택하신 항목의 값은 " + form.obj3.vale + "입니다.\n";

}

if(form.obj4.checked ==true) {

str += "4번째 항목을 선택하셨습니다! 선택하신 항목의 값은 " + form.obj4.vale + "입니다.\n";

}

if(form.obj5.checked ==true) {

str += "5번째 항목을 선택하셨습니다! 선택하신 항목의 값은 " + form.obj5.vale + "입니다.\n";

}

위의 경우는 다섯 가지이지만 만일 온라인 설문지 프로그램처럼 체크할 양식이 많아지게 되면 위와 같은 방식의 코딩은 스크립트의 양이 불필요하게 커지게 되므로 [예제4.10]의 코드와 같이 for 루프를 돌려 체크하는 것이 훨씬 효율적이다.

리스트박스 양식

리스트박스는 여러 개의 목록 중에서 하나만 선택하거나 또는 여러 개를 동시에 선택할 수 있는 선택 입력 양식이다. 만일 여러 개중 하나만을 선택해야 하는 상황에서 선택 항목이 10개 이상을 넘어서게 되면 라디오 버튼보다는 리스트박스를 이용하는 것이 공간 절약 면에서도 더 좋다.

리스트박스는 <select> 태그와 <option> 태그로 만들며 HTML 양식은 다음과 같다.

<option value="101">선택항목1

<option value="102">선택항목2

<option value="103">선택항목3

</select>

위 코드는 <select> 태그 내의 <option> 태그를 이용해 세 개의 항목을 갖는 리스트로 갖는 리스트박스를 생성하며 세 개의 항목은 각각 "선택항목1", "선택항목2", "선택항목3"이라는 문자열로 리스트박스에 표시된다. <option> 태그의 value 속성은 각 항목에 대한 값으로 사용자가 세 개 중 하나의 항목을 선택하면 이 항목의 value 값이 전달된다.

만일 리스트박스를 생성할 때 미리 어떤 특정 항목이 선택되어 있도록 하려면 다음과 같이 <option> 태그 내에 selected라는 속성을 설정해주면 된다.

<option value="101">선택항목1

<option value="101" SELECTED>선택항목2

<option value="103">선택항목3

</select>

리스트박스에서 사용되는 두 개의 태그 <select>와 <option>의 속성은 각각 [표4.6], [표4.7]과 같다.

속성	설 명
name	생성할 리스트박스의 고유이름이다.
size	전체 항목중에서 화면에 나타나도록 표시할 항목의 개수를 지정한다. 만일 size="3"이면 리스트박스에 3개의 항목이 나타난다. 기본값은1.
multiple	하나이상 여러 개를 동시에 선택할 수 있도록 리스트박스를 생성하고자 할 때 선언한다.
onChange	리스트박스의 항목중에서 사용자가 다른 항목을 선택했을 때 발생하는 이벤트에 대한 이벤트 핸들러이다. 즉, 리스트박스내에서 다른 항목을 선택하면 여기서 지정한 함수가 실행된다.

[표4.6] 리스트박스중 <select> 태그의 속성

속성	설 명
value	해당 리스트항목이 가지고 있는 값을 가리킨다.
selected	해당 리스트항목이 초기에 선택된 상태로 지정하고자 할 때 선언한다.

[표4.7] 리스트박스중 <option> 태그의 속성

리스트박스 객체의 속성과 이벤트 핸들러로는 다음과 같은 것들이 있으며 이를 통해 리스트박스 객체에 대한 여러 가지 접근 및 제어가 가능하다.

속성 및 메쏘드		설 명
속성 (property)	name	리스트박스 객체가 가지는 고유 이름으로 HTML의 <select> 태그에서 name 속성으로 설정한 값을 가리킨다.
	length	리스트박스에 있는 항목의 총 개수
	selectedindex	현재의 리스트박스에서 선택되어 있는 항목의 인덱스 값으로 인덱스는 0부터 시작한다.
	options[i].text	리스트박스에서 인덱스 값이 i인 항목의 문자열
	options[i].value	리스트박스에서 인덱스 값이 i인 항목에 할당된 값
	options[i].selected	리스트박스에서 인덱스 값이 i인 항목이 현재 선택되어 있으면 true를, 그렇지 않으면 false를 갖는다
이벤트 핸들러	onChange()	사용자가 리스트박스에서 다른 항목을 선택했을 때 실행되는 이벤트 핸들러

[표4.8] 리스트박스 객체의 속성과 이벤트 핸들러

다음의 예제를 보자.

<html>

<head>

<!--

function checkIt(form) {

var str = "";

str += "선택하신 리스트의 인덱스는 [" + form.menulist.selectedIndex + "]이고 \n";

str += "선택하신 리스트명은 [" + form.menulist.options[form.menulist.selectedIndex].text + "]이며 \n";

str += "이 리스트가 가진 값은 [" + form.menulist.options[form.menulist.selectedIndex].value + "]입니다!";

alert(str);

}

//-->

</script>

</head>

<body>

<option value="100" selected>메뉴를 선택하세요

<option value="1101">선택항목 1

<option value="1102">선택항목 2

<option value="1103">선택항목 3

<option value="1104">선택항목 4

<option value="1105">선택항목 5

</select>

</form>

</body>

</html>

[예제4.11] 리스트박스의 사용 예

위의 예제는 제목까지 포함해 모두 6개의 항목을 갖는 리스트 박스에서 사용자가 하나의 항목을 선택한 후 [결과확인]버튼을 클릭 했을 때 사용자가 선택한 리스트항목의 인덱스와 문자열값, 그리고 해당 리스트항목에 할당되어 있는 값의 정보를 팝업 윈도우에 출력하는 예제이다.

[표4.8]에서 리스트박스의 총 항목 수는 리스트박스 객체의 length 속성 값을 통해 알 수 있다. 따라서 예제에서 아래와 같이 menulist라는 이름을 갖는 리스트박스 객체의 length 속성은 6이 된다.

document.menulist.length // 6

리스트박스에서는 여러 개의 리스트 항목 중하나를 선택할 수 있는데 만일 k용자가 "선택항목2"라는 문자열을 가진 항목을 선택하면 리스트박스 객체의 selectedindex 속성 값을 현재 선택된 항목의 인덱스를 가리키므로 "선택항목2"의 인덱스 "2"를 그 값으로 갖는다. 그러므로 "선택항목2"를 선택한 경우 8행의 결과 문자열 변수 str에는 다음과 같은 문자열이 저장된다.

str = "입력하신 리스트의 인덱스는 [2]이고"

한편 [표4.8]의 리스트박스 객체가 가진 속성 중에서 options[i].text와 options[i].value는 인덱스가 i인 리스트 항목의 문자열과 값을 가리킨다. 따라서 i대신 다음과 같이 현재 선택된 항목의 인덱스를 가리키는 selectedindex 값을 넘겨주면 사용자가 선택한 리스트 항목의 문자열과 그 값에 접근할 수 있다.

document.menulist.selcetedindex // "2"

document.menulist.options[document.menulist.selectedindex].text // "선택항목2"

document.menulist.options[document.menulist.selectedindex].value // "1102"

예를 들어, "선택항목2"를 선택한 경우 인덱스는 2이므로 options[2].text는 26행에서 정의한 리스트 항목의 문자열 "선택항목2"라는 값을 가지고, option s[2].value는 <option> 태그 내의 해당 항목에서 value 속성에 설정된 값 "1101"를 갖는다. 따라서 9,10행의 실행 결과 변수 str에는 다음과 같은 문자열이 저장되어 팝업 윈도우로 출력된다.

str = "입려하신 리스트의인덱스는 [2]이고 \n 선택하신 리스트명은 [선택항목2]이며\n 이 리스트가 가진 값은[1102]잊니다!

파일 업로드 양식

파일 업로드 입력 양식은 PHP로 자료실이나 파일을 첨부할 수 있는 게시판을 개발할 때 반드시 필요한 입력 양식으로 다음과 같이 <input>태그 내의 type 속성 값으로 "file"을 설정하여 줌으로써 만들 수 있다.

<input type="file" // 입력 양식이 파일 업로드 양식임을 지정

name="usefile" // 파일 업로드 양식의 고유이름을 지정

파일 업로드 양식은 주로 PHP로 파일을 처리해야 하는 경우에 필요하므로 뒤에서 자료실을 구현할 때 자세한 내용을 설명할 것이다. 여기서는 파일 업로드 양식을 만드는 기본적인 태그만을 알아두도록 하자.

3. PHP와 자바스크립트의 활용 예제

게시판 입력 값의 타당성 검사

게시판 입력 폼은 일반적으로 사용자 이름과 이메일 주소, 글의 제목, 본문, 그리고 글을 수정하거나 삭제하는데 필요한 암호로 구성되어 있다. 이 예제에서는 각각의 입력 항목에 사용자가 입력한 값을 자바스크립트와 PHP의 정규 표현식으로 검사하여 허용되지 않는 문자열을 입력하였을 경우 재입력을 요구하는 코드를 작성할 것이다.

다음의 예제를 보자.

<html>

<head>

<!--

function checkIt(form) {

if(!form.name.value) {

alert('이름을 입력하세요!');

form.name.focus();

return;

}

if(!form.subject.value) {

alert('제목을 입력하세요!');

form.subject.focus();

return;

}

if(!form.passwd.value) {

alert('비밀번호를 입력하세요!');

form.passwd.focus();

return;

}

if(!form.comment.value) {

alert('메시지본문을 입력하세요!');

form.comment.focus();

return;

}

form.submit();

}

//-->

</script>

</head>

<body>

<tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</font>

</td>

</tr>

</table>

</td>

</tr>

</table>

</form>

</body>

</html>

[예제4.12] 게시판 입력 폼의 HTML 코드

위 예제에서는 4.2절에서 다룬 각 입력 양식에 대한 자바스크립트 객체의 value 속성 값을 검사하여 사용자가 이들 입력란에 제대로 입력했는지를 체크하고 값이 모두 입력되어 있으면 34행에서 설정한 check_value.php3 파일로 입력데이터를 전송한다.

그러기 위해서는 우선 각 입력 양식에 사용자가 입력한 값을 알아야 한다. 이름 항목을 예로 들면 43행에서 이름 항목의 고유 이름은 "name"이므로 이름에 대한 자바스크립트 객체는 "document.signform.n

ame"이 되고 이 객체의 value 속성을 통해 사용자가 이름란에 입력한 값을 참조할 수 있다.

사용자가 게시판 입력 폼에 이름과 제목 등을 입력하고 [글쓰기]버튼을 클릭하면 64행에서 버튼 객체의 onClick 이벤트 핸들러에서 지정한 checkIt() 함수가 호출, 실행된다. 5~28행까지의 checkIt() 함수에서는 6행처럼 각 입력 항목에 대한 객체의 value 속성이 null 값인지를 체크하여 반드시 입력해야 할 항목에 아무 값도 입력되어 있지 않을 경우 return 문으로 함수의 실행을 종료한다. 따라서 이 경우 사용자가 입력한 값은 check_value.php3 파일로 전송되지 않는다. 8행에서 종료 전에 호출한 focus() 메쏘드는 커서의 위치를 입력해야 할 항목에 갖다놓으므로 재 입력하기가 한층 수월해진다.

이처럼 checkIt() 함수에서는 6행에서 25행까지의 코드에서 이름과 제목, 비밀번호, 메시지지 본문의 네 가지 항목에 대해 입력 값을 검사한 후에 사용자가 빠뜨리지 않고 모두 입력했을 경우 27행에서 폼 객체에 대한 submit() 메쏘드를 호출하여 사용자가 입력한 데이터를 check_value.php3 파일로 전송한다.

그러나 제3장의 정규 표현식에서 "게시판 입력 항목 확인하기" 예제를 통해 이야기한 것처럼 위의 자바스크립트 코드로는 게시판에 입력한 값의 타당성을 완전히 검증하지 못한다. 즉, 6행의 코드는 사용자가 입력 양식에 값을 전혀 입력하지 않은 경우에만 함수의 실행이 종료된다. 만일 사용자가 스페이스 키를 입력하고 전송 버튼을 누르면 6,11,16,21행은 모두 false를 반환하므로 입력 데이터가 check_value.php3 파일로 전송된다. 상식적으로 공백 문자열만 입력된 이름이나 제목, 비밀번호, 본문 등은 정상적인 문자열로 볼 수 없으므로 이에 대한 검사는 check_value.php3 파일에서 정규 표현식 함수를 이용해서 한다.

다음의 [예제4.13]은 check_value.php3 파일의 내용이다.

function popup_msg($msg) {

<!--

alert('<? echo("$msg") ?>');

history.back();

//-->

</script>

}

function error($errcode) {

switch ($errcode) {

case ("INVALID_NAME") :

popup_msg("입력하신 이름은 허용되지 않는 문자열입니다.\\n\\n올바른 이름을 입력하여 주십시오.");

break;

case ("INVALID_SUBJECT") :

popup_msg("입력하신 제목은 허용되지 않는 문자열입니다. \\n\\n올바른 제목을 입력하여 주십시오.");

break;

case ("INVALID_EMAIL") :

popup_msg("입력하신 주소는 올바른 전자우편주소가 아닙니다. \\n\\n다시 입력하여 주십시오.");

break;

case ("INVALID_PASSWD") :

popup_msg("암호는 최소 4자이상의 영문자 또는 숫자여야 합니다. \\n\\n다시입력하여 주십시오.");

break;

case ("INVALID_COMMENT") :

popup_msg("본문을 입력하지 않으셨습니다. \\n\\n다시입력하여 주십시오.");

break;

default :

}

if(!ereg("([^[:space:]]+)", $name)) {

error("INVALID_NAME");

exit;

}

if(!ereg("([^[:space:]]+)", $subject)) {

error("INVALID_SUBJECT");

exit;

}

if(ereg("([^[:space:]]+)", $email) && (!ereg("(^[_0-9a-zA-Z-]+(\.[_0-9a-zA-Z-]+)*@[0-9a-zA-Z-]+(\.[0-9a-zA-Z-]+)*$)", $email)) ) {

error("INVALID_EMAIL");

exit;

}

if(!ereg("(^[0-9a-zA-Z]{4,}$)", $passwd)) {

error("INVALID_PASSWD");

exit;

}

if(!ereg("([^[:space:]]+)", $comment)) {

error("INVALID_COMMENT");

exit;

}

<html>

<head>

<!--

BODY, TR, TH, TD {

font-size : 10pt;

}

//->

</style>

</head>

<body>

<tr>

</tr>

while(list($key, $val) = each($HTTP_POST_VARS)) {

echo("<tr>\n");

echo(" <td width=\"120\" align=\"center\" bgColor=\"lightyellow\">$key</td>\n");

echo(" <td width=\"380\" bgColor=\"lightyellow\">$val</td>\n");

echo("</tr>\n");

}

</table>

</td></tr>

</table>

</body>

</html>

[예제4.13] check_value.php3

3~15행의 함수 popup_msg()는 인자로 전달된 에러 메시지를 팝업 윈도우에 출력하는 함수이고 17~41행의 함수 error()는 사용자가 허용되지 않는 문자열을 입력한 경우 입력 항목에 대한 에러 코드를 인자로 받아 popup_msg() 함수를 호출하는 함수이다.

14~66행의 코드는 3장의 정규 표현식 [예제3.10]에서 다루었던 코드와 거의 동일하다. 즉, 여기서는 사용자가 입력한 문자열을 ereg() 함수의 패턴과 비교해 문자열 중에 공백 문자열이 아닌 유효한 문자가 하나이상 존재하면 타당한 입력 값으로 여긴다.

그러나 그렇지 않고 공백 문자열만이 존재할 경우에는 44행과 같이 error() 함수를 호출하며 이때 인자로 "INVALID_NAME"라는 에러 코드를 전달함으로써 이름 항목에 입력한 값이 허용되지 않는 문자열임을 팝업 윈도우에 출력한다.

error()함수는 $errcode라는 에러 코드 문자열을 인자로 받아 해당 항목에 대한 입력 에러 메시지를 출력하도록 popup_msg() 함수를 호출하는 역할을 한다. 여기서는 이름과 제목, 전자우편, 비밀번호, 메시지 본문에 대한 다섯 가지 입력 항목에 대한 에러 메시지를 상황에 맞게 출력할 수 있도록 제어 구조의 switch 문을 사용하였다.

popup_msg() 함수는 에러 메시지를 담은 문자열을 인자로 받아 자바스크립트의 alert() 함수를 호출하여 팝업 윈도우에 출력하는 역할을 한다. 그리고 10행을 실행하여 이전 페이지, 즉 게시판 입력폼 페이지로 다시 이동하여 재입력을 받을 수 있도록 한다.

alert() 함수를 호출하기 위해서는 자바스크립트를 사용해야 하므로 7~12행은 PHP코드임을 나타내는 '<?'와 '?>' 태그의 밖에 있다.

전자우편 주소는 사용자가 적을 수도 있고 적지 않을 수도 있다. 그러나 만일 사용자가 전자우편 주소를 입력하였을 경우에는 제대로 된 전자우편 주소를 입력했는지 53행의 정규 표현식 함수를 통해 검사하게 된다. ereg() 함수에서 사용한 전자우편 주소에 대한 패턴은 제3장에서의 코드,[예제3.10]과 동일하다.

이렇게 해서 68행까지 다섯 가지 입력 항목에 대한 타당성 검사 결과 모든 입력 값이 유효하다고 검증이 되면 70~111행에서 사용자가 입력한 데이터를 입력 항목의 이름과 입력 값으로 나누어 테이블 형태로 출력해준다.

94~104행의 코드는 앞에서 자주 보았던 코드이다. 즉, 사용자가 게시판 입력 양식에 입력하여 POST 방식으로 전송된 모든 데이터는 항목 이름(name, subject, email, passwd, comment)과 값의 쌍으로 $HTTP_POST_VARS라는 연관 배열에 저장되므로 이 배열의 모든 참조키와 그 값을 출력하면 사용자가 입력한 값을 확인할 수 있다.

만일 사용자가 입력한 그대로 출력하려면 제2장에서 이야기한 nl2br() 함수를 호출하면 된다.

while(list($key, $val) = each($HTTP_POST_VARS)) {

echo("<tr>\n");

echo(" <td width=\"120\" align=\"center\" bgColor=\"lightyellow\">

$key</td>\n");

if (!strcmp($key, "comment")) {

$val = nl2br($val);

}

echo(" <td width=\"380\" bgColor=\"lightyelow\">$val</td>\n");

echo("</tr>\n");

}

[예제4.14] 메시지 본문 입력 값의 개행 처리

사용자가 메시지 본문란에 여러 줄로 나누어 입력했던 그대로 출력하려면 [예제4.13]의 94~104행의 코드를 [예제4.14]의 코드로 수정하면 된다. [예제4.14]의 6,7행에서는 문자열 값이 메시지 분문(comment)에 대한 것이면 이 문자열에 대해 nl2br() 함수를 적용한 뒤 출력한다.

심리 테스트 프로그램

웹사이트를 돌아다니다 보면 쉽게 볼 수 있는 것이 온라인 심리 테스트 프로그램이다. 보통 이러한 프로그램들은 사용자에게 십여 가지의 질문을 제시하고 각 질문 당 몇 가지의 선택 항목을 두어 사용자가 각 질문에 한 가지씩의 항목을 선택한 후 그 결과를 전송하면 이를 처리하여 미리 정해진 결과를 선택적으로 출력하는 알고리즘을 갖는다.

우선 사용자로부터 항목을 입력받을 수 있는 설문지 양식을 만든다. 여기서는 반드시 하나의 질문에 대해 하나의 항목만을 선택해야 하므로 라디오버튼 양식을 사용해야 한다. 모두 10갱의 질문이 있으므로 서로 다른 이름을 갖는 라디오버튼은 10개 될 것이다. 물론 설문양식에 맞게 직접 HTML 로 코딩을 할 수도 있지만 PHP 프로그래밍을 통해 좀더 짧은 코드로 구현할 수 있다. [예제4.15]는 PHP로 설문지 양식을 구현한 것이다.

$question = array("당신은 언제 기분이 가장 좋습니까?",

"당신은 보통 걸음걸이가 어떻습니까?",

"당신은 사람들과 얘기를 나눌때 어떤 행동을 합니까?",

"당신은 앉아서 쉴때 어떻게 행동 합니까?",

"당신이 정말로 기뻐서 놀랐을때 어떠한 행동을 취합니까?",

"당신은 파티나 모임에 갔을때 주로 어떻게 행동합니까?",

"당신이 어떤 일에 열심히 몰두하고 있을 때 방해를 받는다면 어떻게 하겠습니까?",

"다음의 색깔중에 당신이 가장 좋아하는 색깔은?",

"당신이 잠자리에 누웠을 때, 잠들 때까지 하고 있는 자세는?",

"당신은 어떤 꿈을 자주 꿉니까? "

);

$answer = array(array("2"=>"아침에",

"4"=>"오후부터 이른 저녁까지",

"6"=>"야심한 밤"),

array("6"=>"보폭이 크며 빠른 걸음",

"4"=>"빠른 걸음이나 보폭이 작고 발걸음이 빠른 걸음",

"7"=>"빠르지 않고 고개를 들고 주위를 보며 걷는 걸음",

"2"=>"빠르지 않고 고개를 숙이고 걷는 걸음",

"1"=>"매우 느린 걸음"),

array("4"=>"팔짱을 끼고 서서",

"2"=>"자신의 손을 꼭 쥐고",

"5"=>"한손이나 양손을 엉덩이에 대고",

"7"=>"상대방을 만지거나 주무르면서",

"6"=>"자신의 턱을 만지거나 머리를 쓰다듬으면서"),

array("4"=>"무릎을 구부리고 양다리를 꼭 붙인다",

"6"=>"다리를 꼬고 있는다",

"2"=>"다리를 쭉폈다 한다",

"1"=>"한 다리를 다른 다리에 말고 있는다"),

array("6"=>"아주 크고 기쁘게 웃는다",

"4"=>"소리는 크게 내지 않고 웃는다",

"3"=>"조용하게 히히 거린다",

"5"=>"활짝 미소짓는다",

"2"=>"조용히 미소짓는다"),

array("6"=>"모든 사람이 당신의 등장을 알 수 있게끔 요란하게 나타난다 ",

"4"=>"조용하게 입장해서 당신이 아는 사람을 재빨리 찾아본다 ",

"2"=>"최대한 조용하게 입장해서 눈에 띄지 않기 위해 노력한다"),

array("6"=>"휴식을 환영하며 기꺼이 응한다 ",

"2"=>"매우 열받는다 ",

"4"=>"상황에 따라 위 두가지가 모두 될 수 있다"),

array("6"=>"빨간색이나 주황색 ",

"7"=>"까만색",

"5"=>"노란색이나 밝은 파란색 ",

"4"=>"짙은 파란색이나 자주색",

"3"=>"흰색"),

array("7"=>"똑바로 누워서 있는다 ",

"6"=>"똑바로 엎드려 있는다",

"4"=>"옆으로 누워 약간 구부려 누워 있는다 ",

"2"=>"팔배개를 하고 누워있는다 ",

"1"=>"이불을 머리 위까지 덮고 있는다"),

array("4"=>"떨어지는 꿈 ",

"2"=>"싸우거나 다투는 꿈",

"3"=>"물건이나 사람을 찾는 꿈 ",

"5"=>"날거나 물에 떠있는 꿈 ",

"6"=>"대체로 꿈을 잘 꾸지 않는다",

"1"=>"기분이 좋은 꿈")

);

<html>

<head>

<!--

BODY, TR, TH, TD {

font-size : 10pt;

}

//-->

</style>

<!--

function checkIt(form) {

for(i = 0; i < 10; i++) {

var NumOfItem = eval("form.item" + i);

for(j = 0; j < NumOfItem.length; j++) {

var IsChecked = eval("form.item" + i + "[" + j + "]");

if(IsChecked.checked == true) {

break;

}

if(j == NumOfItem.length) {

alert(i+1 + "번 질문에 답하지 않으셨습니다!");

return;

}

form.submit();

}

//-->

</script>

</head>

<body>

<p align="center"><b>◈◈◈ 성격테스트 ◈◈◈</b></p>

</td></tr>

for($i = 0; $i < sizeof($answer); $i++) {

$num = $i + 1;

echo("<tr>\n");

echo(" <td colspan=3 bgColor=lightyellow><b>$num.</b> $question[$i]</td>\n");

echo("</tr>\n");

$chr = 'a';

while(list($key, $val) = each($answer[$i])) {

echo("<tr>\n");

echo(" <td width=50 align=center bgColor=#FFC0C0>$chr</td>\n");

echo(" <td width=500 bgColor=#C0C0FF>$val</td>\n");

echo(" <td width=50 align=center bgColor=#FFC0C0><input type=\"radio\" name=\"item$i\" value=\"$key\"></input></td>\n");

echo("</tr>\n");

$chr++;

}

</table>

</td></tr>

</table>

</form>

</body>

</html>

[예제4.15] 심리 테스트 설문 양식

위의 예제 3행에서는 10개의 질문을 배열 변수 $question에 저장한다. 그리고 각 질문에 대한 선택 항목은 또 다른 배열 변수 $answer에 저장하는데 이때 각 선택 항목은 사용자가 선택했을 때 전달할 값을 가지고 있으므로 이 값을 함께 저장하기 위해서 참조키로는 해당 항목에 할당되어 있는 값을, 그리고 참조키에 대한 값으로는 선택 항목의 문자열을 담고 있는 다차원 배열로 저장하였다.

110~129행의 코드는 이 배열 변수 $question과 $answer에 저장되어 있는 질문 및 각 질문에 속하는 선택 항목을 배열의 크기, 즉 질문의 개수만큼 반복하여 출력함으로써 웹 페이지를 출력한다.

199행에서는 list() 함수를 통해 연관 배열 $answer의 참조키 즉, 해당 선택 항목에 할당되어 있는 값은 $key에, 그리고 값 즉, 해당 선택 항목의 문자열은 $val에 저장한다. 그리고 123행에서 각 선택 항목에 대한 라디오 버튼을 생성할 때 해당 라디오 버튼의 value 속성 값으로 이 $key 변수 값을 전달함으로써 각각의 라디오 버튼 양식을 만든다.

사용자가 [결과보기]버튼을 누르면 75~92행에서 정의된 함수 checkIt()이 실행된다. 이 함수는 사용자가 10개의 질문에 모두 응답했는지를 체크하여 답변 항목을 선택하지 않은 질문이 있으면 86행과 같은 메시지를 출력한다.

사용자가 심리 테스트 설문에 모두 응답하고 결과 확인 버튼을 누르면 98행에서 설정한 radio_process.php3 파일로 선택한 값들이 저장된다. 123행에서 보듯이 사용자가 선택한 10개의 라디오 버튼 항목의 값은 radio_process.php3 파일에서 $item0~$item9까지의 변수에 저장된다. radio_pro

cess.php3 파일의 내용은 다음과 같다.

$sum = 0;

for($i = 0; $i < 10; $i++) {

$value = "item" . $i;

$sum += ${$value};

}

if($sum <= 21) {

$comment = "사람들은 당신이 수줍음을 잘타고 겁이 많고 우유부단 하다고 생각하며 보살핌이 필요하고 당신이 누군가 항상 당신을 대신해서 결정을 내려주는 것을 원하는 사람이라고 생각합니다. 그리고 어떤 사건이나 누구와도 복잡하게 얽히기를 원하지 않는 사람으로 봅니다. 그들은 당신을 존재하지 않는 문제에 대해 겁을 먹는 사람으로 여깁니다. 몇몇 사람들은 당신을 지루하다고 생각합니다. 오직 당신을 아주 잘 아는 사람만이 당신이 그렇지 않다는것을 알고 있습니다. 문제점은 당신이 다른 사람이 당신 곁에 다가오는 것을 허락하지 않는다는 것입니다.";

} else if($sum > 21 && $sum <= 31) {

$comment = "당신의 친구들은 당신의 까다로움으로 상대하기 힘든 사람으로 보고 있습니다. 그들은 당신을 지나치게 주의깊다고 생각하고 있으며 따분하게 일하는 사람으로 보고 있습니다. 만약 당신이 어떤 일을 충동적이거나 급하게 처리해버리기라도 한다면 다른 사람들은 매우 놀랄 것입니다. 그들은 당신이 모든 것의 모든 면을 충분히 살펴보기를 바라고 있으며 그것을 거스르는 결정을 하기를 기대합니다. 그들은 당신의 이러한 행동이 반은 당신의 타고난 주의력 때문이고 나머지 반은 굼뜬성격 때문이라고 생각합니다";

} else if($sum > 31 && $sum <= 41) {

$comment = "다른 사람들은 당신을 이해가 빠르고 신중하고 주의깊고 실리적이라고 생각합니다. 그들은 당신을 영리하고 재능이 많다고 생각하지만 너무 소심하다고 보고 있습니다. 당신은 친구를 너무 쉽게 너무 빨리 사귀는 타입이 아니지만, 친구에 대한 의리를 무척 지키려고 하며 당신의 친구에게도 마찬가지를 바라고 있습니다. 당신을 정말로 잘 알고 있는 사람들은 당신의 믿음을 사기 위해서는 무척 많은 시간이 걸린다는것을 알고있습니다. 하지만 마찬가지로 한번 당신의 믿음을 얻게 되면 그 믿음이 오래 간다는것도 알고 있습니다.";

} else if($sum > 41 && $sum <= 51) {

$comment = "다른 사람들은 당신을 신선하고 생기발랄하고 매력적이고 재미있고 항상 즐거운, 항상 사람들의 관심의 중앙에 있는 사람이라고 생각합니다. 하지만 너무나 균형이 잡혀 있기 때문에 당신이 두각을 나타내지 못합니다. 그들은 또한 당신을 친절하고 이해심이 많으며 분별력이 있어서 그들을 즐겁게 해주고 도울수 있다고 보고 있습니다. ";

} else if($sum > 51 && $sum <= 61) {

$comment = "당신의 친구들은 당신을 활기차고, 열정적이며, 충동적인 성격의 소유자로 여기고 있습니다. 따라서 타고난 리더이고 의사결정이 빠른 사람이라고 여깁니다. (그렇지만 항상 그런것은 아닙니다.) 그들은 당신을 대담하고 모험심이 강하고 기회가 생긴다면 뭐든지 한번 도전해 보고 싶어하는 사람으로 생각합니다. 그들은 당신과 함께하기를 즐깁니다. 왜냐하면 당신이 발산하는 그 흥미로움 때문입니다.";

} else {

$comment = "다른 사람들은 당신을 조심스럽게 대해야 할 사람이라고 생각하고 있습니다. 당신은 다른 사람에게 우쭐거리며 자만심이 강하고 또 이기적인 사람으로 비춰지고 있습니다. 다른 사람들은 아마도 당신을 칭찬할 것이며 그들은 당신을 좀더 좋아할 수 있기를 바라고 있을 것입니다. 그러나 그들은 당신을 언제나 신용할수 없고 당신과 깊게 어울리기를 주저하고 있습니다.";

}

$introduction = "이 테스트는 현직 정신과 의사들이 만든 것으로 각 질문항목에 대한 답변의 결과를 집계하여 자신의 성격을 알아볼 수 있는 검사입니다.";

<html>

<head>

<!--

BODY, TR, TH, TD {

font-size : 10pt;

line-height : 14pt;

}

//-->

</style>

</head>

<body>

<tr>

<td align="center" bgColor=pink><b>[성격에 관한 심리테스트 결과]</b></td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</td></tr>

</table>

</body>

</html>

[예제4.16] radio_process.php3

위의 예제 3~7행에서는 사용자가 선택한 항목에 할당되어 있는 값을 합산하여 변수 $sum에 할당한다. 5행의 $value는 도트(.) 연산자에 의해 순서대로 item0~item9라는 문자열을 가진다. 따라서 6행의 ${$value}는 $item0~item9가 되므로 결국 설문 양식에서 각 질문에 대해 사용자가 선택한 항목에 할당되어 있는 값을 갖는 변수가 된다. 이제 이 $sum의 값이 어느 영역에 속하는 값이냐에 따라서 결과를 나타내는 문자열 변수 $comment가 출력이 된다.

[목차]