브라우저와 HTML 객체
브라우저와 HTML 객체
사용자와의 데이터 교환을 위해 우리들이 사용하고 있는 웹 브라우저는 HTML 객체를 포함하고 있다.
이런 HTML 객체들에 대해서 알아보기 전에 자바스크립트 객체 모형이 대한 이해가 있어야 한다.
이런 모형을 통해 자바스크립트 브라우저와 HTML 객체가 어떻게 구성되고, 연결되어 있는지 알아보도록 하자.
1) 자바스크립트 객체 계층
자바스크립트 객체 모형과 이에 내장된 객체들, 메소드, 함수들은 ASP 프로그래밍을 위한 추가 도구로서의 역할을 충분히 수행한다.
그리고 자바스크립트가 웹에서 웹과 같이 동작하도록 설계되었기 때문에
자바스크립트와 HTML 페이지의 내용 사이에 링크가 존재한다.
이 링크는 자바스크립트의 풍부한 브라우저와 HTML 객체들에 의해 제공된다.
실제 ASP에서는 이런 자바스크립트 브라우저와 HTML 객체들을 이용하여 사용자의 정보를 수집하고 있다.
이와 같이 ASP와 다른 영역에 숨어있는 자바스크립트 객체 계층의 구조를 알아보자.
자바스크립트 객체 계층
2) 브라우저 객체
브라우저 객체에 속하는 주요 요소들은 다음과 같다.
● window
● document
● location
● history
① window 객체
window 객체는 자바스크립트 객체 계층에서 가장 상위에 존재하는 객체이다.
현재 열려 있는 모든 브라우저 윈도우는 이에 대한 window 객체를 가지고 있다.
이외의 다른 객체들은 모두 하나의 window 객체의 자식이 된다.
자바스크립트는 항상 현재의 윈도우를 유지하고 있다.
현재 윈도우의 하위 객체들에 대한 모든 참조가 직접 하지 않아도 가능하다.
폼에 관련된 태그의 사용에 document.write()와 window.document.write()가 동일한 결과를 출력하는 것도
이런 이유에서이다. window 객체에서 대표적인 메소드들은 다음과 같다.
● alert(msgstr)
● close()
● confirm(msgstr)
● open(url, wname)
● prompt(msgstr)
위의 메소드들은 앞으로 ASP 작업을 하면서 자주 보게될 것들이다.
이들은 브라우저 자신의 윈도우 상태를 처리하는데 사용한다.
alert와 confirm은 메시지를 대화 상자에 나타내는데 사용한다.
단, alert는 OK만 가능한 대화 상자이고 confirm은 OK와 Cancel을 나타내어 사용자에게 선택할 수 있게 한다.
그리고 open과 close는 새로운 브라우저를 생성하거나 생성되어 있는 브라우저를 닫을 때 사용하는 메서드들이다.
앞의 메서드들을 사용하는 다음의 코드를 실행하여 보자.
● window.html
<HTML>
<HEAD>
<TITLE>window 객체</TITLE>
</HEAD>
<script language="JavaScript">
<!--
function Alertmsg() {
alert("경고창 출력입니다.");
}
function Confirmmsg() {
confirm("대화상자 출력입니다.");
}
// -->
</script>
<BODY>
<input type=button value=경고창 onclick="Alertmsg();">
<input type=button value=대화상자 onclick="Confirmmsg();">
</BODY>
</HTML>
window.html 결과
alert와 confirm을 이용하여 서로 다른 대화 상자를 출력하는 예제이다.
이외의 다른 메소드들도 똑같은 방법으로 입력하여 어떻게 출력되는지 확인하도록 하자.
② document 객체
document는 그 페이지에 있는 모든 앵커와 링크, 그리고 양식(form)뿐만 아니라
이들 요소의 모든 하위 요소들에 대한 속성들을 가지고 있는 객체이다.
또한 document는 출력되는 페이지에 대한 여러 가지 속성들도 가지고 있다.
다음은 document 객체가 가지는 메소드들이다.
● clear()
● close()
● open()
● write(str)
● writeln(str)
clear는 문서 윈도우의 내용을 삭제할 때 사용하며, clear는 자바스크립트 내에서 웹 페이지를 만들고자 할 때 내용을 비우기 위해 사용된다. open과 close 메소드는 버퍼 출력을 시작하거나 중지하는데 사용한다.
그러나 이런 메소드들보다 ASP에서의 document는 폼 객체로의 접근을 가능하게 해 주는 역할이 가장 중요하다.
③ history와 location 객체
history 객체는 이전에 방문한 URL들의 목록을 참조할 때 사용한다. history 객체는 length라는 속성을 가지고 있으며 이를 통해 얼마나 많은 URL들이 현재 목록에 들어 있는지를 알려준다. 이들은 또한 다음과 같은 메소드를 갖고 있다.
● back()
● forward()
● go(where)
back()은 현재 페이지의 이전 페이지로 이동하는 것을 나타내고, forward()는 현재 페이지의 앞 페이지로 이동하는 것을 나타낸다. 실제 back의 경우에는 ASP 작업 시 예외 처리를 할 때 자주 사용하게 된다.
그리고 go는 웹 브라우저에 저장되어 있는 방문한 URL을 기준으로 양수일 때에는 앞으로 가는 버튼을 클릭한 효과를, 음수일 때에는 뒤로가는 버튼을 클릭한 효과가 나타난다. 즉 go(-1)은 뒤로 버튼을 한 번 클릭한 것이며, go(3)은 앞으로 가기 버튼을 세 번 클릭한 것과 같다.
location 객체는 문서의 URL을 나타내는 역할을 수행한다. 이는 URL의 여러 구성 요소들을 나타내는 속성들을 갖고 있는데, 프로토콜, 호스트 이름, 경로 이름, 포트 이름 등이 있다. 현재 페이지에서 다른 페이지로의 이동의 기능을 수행할 수 있다. 다음의 예제를 살펴보자.
● go.html
<html>
<body>
<input type=button value="목록으로 가기"
onclick="javascript:self.location='http://www.neovis.pe.kr';"
</body>
</html>
go.html 결과
location 객체를 이용하여 버튼을 클릭하면 다른 페이지로 이동하는 것을 구현하였다. ASP에서 종종 사용되니 꼭 확인해야 할 것이다.
3) HTML 객체
HTML 객체는 웹에서 사용자로부터 정보를 받아오고자 할 때 사용하는 입력 객체들이다. 예를 들어 Input의 Text나 Button과 같은 것들이 포함된다. 그리고 HTML에 포함되어 있는 다른 요소들도 액세스 할 수 있는 객체이다. HTML 객체의 다음 속성들을 이용하면 페이지에 있는 여러 가지 요소들을 확인할 수 있다.
● anchors
● forms
● links
document 객체의 이들 속성은 페이지상의 앵커나 폼 양식, 링크의 모든 HTML 요소들을 나타내는 배열들로 인식하는 것이 HTML 객체이다. 지금부터 더 자세한 내용들에 대해서 알아보기로 하자.
<FORM>, <INPUT> - Text,Password,Checkbox,Hidden,button)
HTML 폼(Form) 양식
HTML에서 제공하는 폼 양식에 대해서 이미 알고 있겠지만 ASP 작업을 본격적으로 수행하기 이전에 간단하게 정리하여 보겠다. HTML에서 사용하고 있는 폼 양식으로는 크게 다음과 같은 것들이 있다.
1) <FORM>... </FORM>
폼의 시작과 끝을 나타낼 때 사용한다. 기본적인 <FORM> 태그의 사용 구문은 다음과 같다.
--------------------------------------------------------------------------
<FORM ACTION="URL" METHOD=POST NAME="FORM_NAME">
--------------------------------------------------------------------------
폼 태그의 가장 중요한 속성은 action과 method이다. action은 폼이 전송되었을 때 넘어가는 페이지의 url을 나타내는 것이며, method는 폼의 데이터를 전송하는 방법을 정의하는 곳이다.
method는 get과 post 방식의 두 가지로 구성되며 각각의 전송 방식은 조금씩 다르다. get 방식은 url 요청에 추가하는 방식이며 전송되는 url에 데이터가 출력되면서 전송되는 형태이다. post 방식은 http request 본문 내에서 전달되는 방식으로 데이터의 전송을 눈으로 확인할 수는 없다. asp에서는 두 가지 전송방식을 모두 사용하고 있으며, 경우에 따라 사용을 달리한다.
폼 태그에서 위의 속성 이외의 entype과 onsubmit이 있다. entype="multipart/form-date"라고 선언하여 자료실과 같이 폼 양식을 통해 파일을 올리고자 할 때 사용한다. 그리고 onsubmit은 폼을 전송할 때 입력에 대한 핸들러 역할을 수행한다. 예를 들어 사용자가 입력 폼에 데이터를 모두 입력하지 않았을 경우에 에러 메시지 창을 출력한다든지 하는 기능이 이에 속하게 된다.
2) <INPUT>
사용자가 입력할 수 있는 입력 필드를 만들 때 사용한다. 기본적인 <INPUT> 태그의 사용 구문은 다음과 같다.
--------------------------------------------------------------------------
<INPUT TYPE="INPUT_TYPE" NAME="INPUT_NAME" VALUE="INPUT_VALUE">
--------------------------------------------------------------------------
기본적인 양식은 위의 구문처럼 구현하면 된다. 그러나 <INPUT> 태그로 구현되는 입력 필드의 모양은 아주 다양하다.
input 태그의 속성 중 가장 중요한 것은 type과 name이다. type은 입력 필드의 모양을 결정하는 가장 중요한 키워드이고, name은 입력 필드를 구분하여 주는 이름이다. type의 값에 따라 입력 필드의 모양과 구문의 형식이 상당히 많은 변화가 있게 되는데 다음의 여러 가지 예제들을 살펴보자.
① 일반 텍스트 상자
일반 텍스트 상자를 구현할 때 사용한다. 일반 텍스트 상자의 입력 구문은 다음과 같다.
--------------------------------------------------------------------------
<input type="text" name=textbox1 size="50" maxlength="80" value="일반 텍스트 상자">
--------------------------------------------------------------------------
일반 텍스트 상자에서는 size로 상자의 크기를 설정하고, maxlength로 최대 입력 길이를 설정한다. 그리고 텍스트 상자에 초기 값의 입력이 필요할 경우에는 value에 값을 입력하여 사용한다.
② 패스워드 상자
사용자가 텍스트를 입력하면 자동으로 (*)로 변환되어 입력하게 된다. 패스워드의 입력 시 주로 사용하는 상자이다. 패스워드 상자의 입력 구문은 다음과 같다.
--------------------------------------------------------------------------
<input type="password" name="password1" size="10" maxlength="10">
--------------------------------------------------------------------------
패스워드 상자는 일반 텍스트 상자와 입력 구문의 형식이 똑같다. 다만 type에 password를 사용하며, 입력 시 텍스트는 *로 표시되는 것이 다르다. 또한 한글 입력의 경우에도 패스워드 상자에서는 영문으로 변환되어 입력된다.
③ 체크 박스
사용자의 선택여부를 나타내기 위한 상자를 나타낸다. 보통 Yes/No의 질문을 위해 사용하며 체크 박스라 한다. 체크 박스의 입력 구문은 다음과 같다.
--------------------------------------------------------------------------
<input type="checkbox" name="checkbox1" value="checkbox_value" checked>
--------------------------------------------------------------------------
체크 박스는 type에 checkbox의 입력으로 구현된다. name은 체크 박스의 이름을 나타내며, value는 체크 박스가 가지는 값을 나타낸다. 마지막으로 checked 속성은 체크 박스가 처음 실행될 때 체크되어 있는 상태로 나타내고자 할 때 사용한다.
④ 라이오 버튼
많은 옵션들 중에서 하나를 선택할 때 사용한다. 작은 원 모양의 버튼이 나타나 사용자가 선택할 수 있도록 제공한다. 라디오 버튼의 입력 구문은 다음과 같다.
--------------------------------------------------------------------------
<input type="radio" name="radio1" value="radio_value" checked>
--------------------------------------------------------------------------
체크 박스의 입력과 거의 동일하다. 그러나 체크 박스와는 달리 라디오 버튼은 여러 가지 중의 하나를 선택하는 기능을 수행해야 하기 때문에 여러 개의 라디오 버튼을 사용할 때에는 name은 동일하게 사용하고, value값을 다르게 입력하여 구분하여 준다.
⑤ 이미지
선택된 이미지의 좌표값을 반환하고자 할 때 사용한다. 사용자가 이미지를 클릭하면 xy값이 자동으로 넘어가게 된다. 이미지 타입의 입력 구문은 다음과 같다.
--------------------------------------------------------------------------
<input type="image" name="image1" src="이미지경로">
--------------------------------------------------------------------------
일반 HTML에서 이미지를 삽입하는 것과 동일하다. src에 정확한 이미지 경로만 입력되면 정상적으로 이미지가 출력되는 것을 확인할 수 있다. ASP에서 이미지 타입은 좌표값의 처리 이외의 이미지로 된 버튼으로 로그인을 처리하고자 할 때 자주 사용된다.
⑥ HIDDEN
브라우저에 의해 출력되지 않는 입력 폼이다. CGI를 위해 정보를 전달하고자 하는 경우에만 사용된다. hidden 타입의 입력 구문은 다음과 같다.
--------------------------------------------------------------------------
<input type="hidden" name="hidden1" value="hidden_value">
--------------------------------------------------------------------------
input 타입으로 서버에서 Request값으로 저장된 값은 전송 받지만, 사용자에게는 보이지 않는 입력 폼이다. 주로 ASP에서 서버에서 처리할 페이지로 변수나 데이터 값을 전송할 때 사용한다.
⑦ 버튼
사용자가 클릭할 수 있는 버튼을 나타내고자 할 때 사용한다. 버튼의 입력 구문은 다음과 같다.
--------------------------------------------------------------------------
<input type="button" name="button1" value="버튼">
--------------------------------------------------------------------------
회색 버튼으로 표시되며, value에 있는 값이 버튼의 caption 문자로 나타난다. 실제 버튼은 독립적으로 특별한 기능을 수행하지는 않고 다른 자바스크립트 소스와의 연동을 통해 많은 작업이 이루어진다.
⑧ 서브밋
폼을 전송하는데 사용하는 버튼이다. 서브밋의 입력 구문은 다음과 같다.
--------------------------------------------------------------------------
<input type="submit" name="submit1" value="전송하기">
--------------------------------------------------------------------------
입력 필드에 입력되어 있는 값들을 <form> 태그에서 정의된 action 파일로 전송하는 버튼이다. 등록 버튼으로 주로 사용된다.
⑨ 리셋
폼에 입력되어 있는 값들을 초기화하는 버튼이다. 리셋 버튼의 입력 구문은 다음과 같다.
--------------------------------------------------------------------------
<input type="reset" name="reset1" value="취소">
--------------------------------------------------------------------------
사용자가 입력하다 잘못 입력하였거나 처음부터 다시 입력하고자 할 때 사용할 수 있는 입력 폼 초기화 버튼이다. 취소 버튼으로 주로 사용된다.
이렇게 사용자 입력 필드의 양식은 아주 다양하게 존재한다. 이런 것들을 어떻게 이용할 것인가가 프로그래머의 몫인 것이다. 다음의 Input 객체 사용 예를 살펴보자.
● input.html
<HTML>
<HEAD>
<TITLE>Input 객체 사용하기</TITLE>
</HEAD>
<BODY>
<form action=input2.html name=regform method=post>
<table border=0 width=600 align=center>
<tr>
<td align=right>일반 텍스트 상자 : </td>
<td><input type=text name=text1 size=30 maxlength=50></td>
</tr>
<tr>
<td align=right>패스워드 상자 : </td>
<td><input type="password" name="password1" size="10" maxlength="10"></td>
</tr>
<tr>
<td align=right>체크 박스 : </td>
<td><input type="checkbox" name="checkbox1" value="checkbox_value" checked></td>
</tr>
<tr>
<td align=right>라디오 버튼 : </td>
<td>예<input type="radio" name="radio1" value="radio_value1" checked>
아니오<input type="radio" name="radio1" value="radio_value2"></td>
</tr>
<tr>
<td align=right>숨김(hidden) : </td>
<td><input type="hidden" name="hidden1" value="hidden_value"></td>
</tr>
<tr>
<td align=right>버튼 : </td>
<td><input type="button" name="button1" value="버튼"></td>
</tr>
<tr>
<td align=right>서브밋 : </td>
<td><input type="submit" name="submit1" value="전송하기"></td>
</tr>
<tr>
<td align=right>리셋 : </td>
<td><input type="reset" name="reset1" value="취소"></td>
</tr>
</table>
</form>
</BODY>
</HTML>
input.html 결과
<SELECT> 그리고, <OPTION>, <TEXTAREA>
3) <SELECT>... </SELECT>
콤보 박스나 리스트 박스를 나타낼 때 사용한다.
콤보 박스는 드롭 다운 목록에서 하나를 선택할 때 사용하는 것이며,
리스트 박스는 모든 리스트가 하나의 박스에 출력되고 이곳에서 선택할 때 사용하는 것이다.
<select>는 단독으로 표현되면 아무런 값이 나타나지 않고 틀만 출력된다. <select>의 입력 구문은 다음과 같다.
--------------------------------------------------------------------------
<SELECT NAME="SELECT1" SIZE="5" MULTIPLE>
--------------------------------------------------------------------------
name은 select를 나타내는 이름이고, size는 select의 모양을 결정하는 변수이다.
size가 표현 안되어 있거나 1인 경우에는 콤보 박스를 나타내고,
2이상인 경우에는 리스트 박스를 나타낸다.
그리고 multiple 속성은 리스트 박스에서 여러 개의 목록을 동시에 선택할 수 있는지에 대한 옵션이다.
다음의 사용 예제와 결과 화면을 보면서 직접 확인해 보자.
● select.html
--------------------------------------------------------------------------
<HTML>
<HEAD>
<TITLE>select 사용</TITLE>
</HEAD>
<BODY>
<select name=select1 size=1>
</select><br>
<select name=select2 size=5>
</select><br>
<select name=select3 size=5 multiple>
</select>
</BODY>
</HTML>
--------------------------------------------------------------------------
select.html 결과
4) <OPTION>
<SELECT>... </SELECT>에 포함되어 목록을 구성할 수 있는 역할을 수행한다.
<option>의 입력 구문은 다음과 같다.
--------------------------------------------------------------------------
<OPTION VALUE="OPTION_VALUE" SELECTED>
--------------------------------------------------------------------------
value는 서버 페이지에서 Request로 받을 수 있는 값을 나타내고,
selected는 페이지를 읽을 때 기본으로 선택되어진 값을 의미한다.
<option>이 앞의 <select>와 결합하여 목록을 생성하면 다음과 같다.
● option.html
--------------------------------------------------------------------------
<HTML>
<HEAD>
<TITLE>option 사용</TITLE>
</HEAD>
<BODY>
<select name=select1 size=1>
<option value="1">첫 번째 목록</option>
<option value="2">두 번째 목록</option>
<option value="3" selected>세 번째 목록</option>
<option value="4">네 번째 목록</option>
<option value="5">다섯 번째 목록</option>
</select><br>
<select name=select2 size=5>
<option value="1">첫 번째 목록</option>
<option value="2">두 번째 목록</option>
<option value="3" selected>세 번째 목록</option>
<option value="4">네 번째 목록</option>
<option value="5">다섯 번째 목록</option>
</select><br>
<select name=select3 size=5 multiple>
<option value="1">첫 번째 목록</option>
<option value="2">두 번째 목록</option>
<option value="3" selected>세 번째 목록</option>
<option value="4">네 번째 목록</option>
<option value="5">다섯 번째 목록</option>
</select>
</BODY>
</HTML>
--------------------------------------------------------------------------
option.html 결과
select의 속성에서 size와 multiple의 입력 여부에 따라 값의 선택과 박스의 모양이 다르게 출력되는 것을
꼭 확인해야 할 것이다.
5) <TEXTAREA>... </TEXTAREA>
사용자가 여러 줄의 텍스트를 입력할 수 있도록 입력 박스를 제공할 때 사용한다.
<textarea>의 입력 구문은 다음과 같다.
--------------------------------------------------------------------------
<TEXTAREA NAME="NAME1" ROWS="5" COLS="40">
--------------------------------------------------------------------------
rows는 입력 필드의 줄의 수를 나타내고, cols는 입력 필드의 폭 글자 수를 나타낸다.
실제 사용 예제를 살펴보자.
● textarea.html
--------------------------------------------------------------------------
<HTML>
<HEAD>
<TITLE>TextArea 사용</TITLE>
</HEAD>
<BODY>
<textarea name="textarea1" rows=10 cols=50></textarea>
</BODY>
</HTML>
--------------------------------------------------------------------------
textarea.html 결과
ASP와 폼 사용하기
텍스트 상자 정보 가져오기
ASP와 폼 사용하기
ASP에서 HTML 폼을 사용하는 것은 사용자에게 여러 가지 정보를 가져오기 위한 목적이 가장 크다. 이런 여러 가지 정보를 가져오는 실제 예제들을 통해서 ASP에서 폼이 어떻게 사용되는지 알아보자.
1) 텍스트 상자 정보 가져오기
가장 일반적인 형식의 정보 전달이다. 대부분의 게시판의 글 올리기에서 사용되고 있으며 ASP에서도 가장 많이 사용되고 있다. 다음의 코드를 살펴보자.
● text.asp
--------------------------------------------------------------------------
<%@ Language=VBScript %>
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
</HEAD>
<BODY>
<H3><P>텍스트 상자 정보 입력하기</P></H3>
<form action="text_r.asp" method=post>
<table border=0>
<tr>
<td>이 름 : </td>
<td><input type=text name=username size=10></td>
</tr>
<tr>
<td>전자우편 : </td>
<td><input type=text name=email size=50></td>
</tr>
<tr>
<td>소 개 : </td>
<td><textarea rows=10 cols=50 name=intro></textarea></td>
</tr>
<tr>
<td colspan= 2 align=center><input type="submit" value= "전송하기">
<input type="reset" value="취소하기" id=reset1 name=reset1></td>
</tr>
</table>
</form>
</BODY>
</HTML>
--------------------------------------------------------------------------
text.asp 실행결과
텍스트 상자의 폼 파일이 완료되었다.
간단하게 만든 폼 파일을 서버에서 처리할 수 있는 text_r.asp 파일을 만들어 보자.
● text_r.asp
--------------------------------------------------------------------------
<%@ Language=VBScript %>
<%
username = Request("username")
email = Request("email")
intro = Request("intro")
%>
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
</HEAD>
<BODY>
이름 : <%=username%> <br><br>
전자우편 : <%=email%> <br><br>
소개 : <%=intro%> <br><br>
</BODY>
</HTML>
--------------------------------------------------------------------------
text_r.asp
text.asp에서 텍스트 상자로 넘어온 username, email, intro 등을 Request로 값을 받아서 결과 화면에 출력하는 코드이다. 실제 post 방식의 데이터는 Request를 받을 때 Request.Form("폼 이름")으로 작업해야 하지만 생략하여도 상관없다. 참고로 get 방식일 경우에는 Request.QueryString("폼 이름")을 사용한다.
체크박스 사용하기
체크박스 사용하기
일반 텍스트가 아닌 체크박스의 경우 사용자가 선택한 환경에 따라 값이 달라진다. 지금부터 체크박스를 어떻게 사용하여 서버에서 처리하게 되는지 알아보자.
① 독립 체크박스 사용하기
하나의 체크 박스의 선택을 사용하는 예제이다. 다음의 코드를 살펴보자.
● check1.asp
-------------------------------------------------------------------------
<%@ Language=VBScript %>
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
</HEAD>
<BODY>
<H3><P>체크박스 사용하기</P></H3>
<form action="check1_r.asp" method=post>
<table border=0>
<tr>
<td>한글 사용</td>
<td><input type=checkbox name=korean> 한글을 사용할 경우에 체크해 주세요.</td>
</tr>
<tr>
<td colspan=2 align=center><br><br><input type="submit" value="전송하기">
<input type="reset" value="취소하기"></td>
</tr>
</table>
</form>
</BODY>
</HTML>
--------------------------------------------------------------------------
check1.asp 결과
하나의 체크박스를 폼에 등록한 모양의 파일이다. 체크 박스의 이름을 korean으로 설정하였으며 이 이름으로 Request를 받게 된다. 서버에서 처리하는 다음의 check1_r.asp 파일의 코드를 살펴보자.
● check1_r.asp
--------------------------------------------------------------------------
<%@ Language=VBScript %>
<%
korean = Request("korean")
%>
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
</HEAD>
<BODY>
<H3><P>체크박스 사용하기</P></H3>
<br>
<% if korean = "on" then %>
안녕하세요.
<% else %>
Hello.
<% end if %>
</BODY>
</HTML>
--------------------------------------------------------------------------
check1_r.asp 결과
하나의 체크박스를 사용할 경우에는 체크의 여부에 따라 Request값이 달라진다. 체크박스가 체크된 상태라면 Request("체크박스이름")으로 값을 받으면 "on"의 값이 넘어온다. 그렇기 때문의 위의 경우와 같이 if문에서 on과의 비교가 가능한 것이다.
② 여러 개의 체크박스 사용하기
여러 개의 체크박스를 사용하는 방법에는 두 가지가 있다. 하나는 앞의 독립적인 체크박스의 사용법과 마찬가지로 다른 이름을 가지는 체크박스를 여러번 사용하는 것이 있고, 다른 하나는 체크박스 그룹을 사용하는 방법이 있다. 독립적인 이름의 경우에는 앞의 경우와 마찬가지로 Request의 값에 on이 넘어왔는지 확인하는 과정만 반복 실행하면 되니 더 이상 다루지는 않겠다. 이번에는 체크박스 그룹을 사용하는 예제를 살펴보도록 하겠다. 다음의 코드를 살펴보자.
● check2.asp
--------------------------------------------------------------------------
<%@ Language=VBScript %>
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
</HEAD>
<BODY>
<H3><P>체크박스 사용하기</P></H3>
<form action="check2_r.asp" method=post>
<table border=0>
<tr>
<td align=center>사용하는 컴퓨터 언어 <br><br></td>
</tr>
<tr>
<td><input type=checkbox name=language value="ASP"> ASP
<input type=checkbox name=language value="VB"> VB
<input type=checkbox name=language value="PHP"> PHP
<input type=checkbox name=language value="VC"> VC
<input type=checkbox name=language value="Delphi"> Delphi </td>
</tr>
<tr>
<td align=center><br><br><input type="submit" value="전송하기">
<input type="reset" value="취소하기" id=reset1 name=reset1></td>
</tr>
</table>
</form>
</BODY>
</HTML>
--------------------------------------------------------------------------
check2.asp 실행결과
체크박스 그룹을 사용하는 화면이다. checkbox로 되어 있는 부분에 name이 모두 language로 동일한 것을 확인할 수 있다. 단, 모든 체크박스의 이름이 동일하기 때문에 value값은 각각을 구분할 수 있는 다른 값으로 설정되어 있어야 할 것이다. 이렇게 폼 파일의 작성이 완료되면 다음의 서버 페이지의 코드를 확인하자.
● check2_r.asp
--------------------------------------------------------------------------
<%@ Language=VBScript %>
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
</HEAD>
<BODY>
<H3><P>체크박스 사용하기</P></H3> <br>
선택하신 언어는
<% for i = 1 to Request("language").COUNT %>
<%=Request("language")(i)%>
<% next %>
입니다.
</BODY>
</HTML>
--------------------------------------------------------------------------
check2_r.asp 실행결과
체크박스 그룹으로 전송되어 오면 독립 체크박스와는 달리 배열의 형식을 가지게 된다. 우선 Request("language").COUNT를 통해서 체크된 체크박스의 수를 얻을 수 있다. 이것을 이용해 배열에 저장되어 있는 각각의 선택된 체크박스의 value 값을 Request("language")(i)를 통해 출력하게 된다.
라디오 버튼 사용하기
라디오 버튼 사용하기
라디오 버튼은 여러 가지의 선택 항목 중 사용자로 하여금 하나를 선택하게 할 때 사용한다. 체크박스 그룹과 마찬가지로 라디오 버튼도 그룹 형식으로 이루어져야 한다. 그렇지 않으면 하나의 그룹 안에서 여러 가지가 동시에 선택되는 현상을 일어난다. 다음의 코드를 살펴보자.
● radio.asp
--------------------------------------------------------------------------
<%@ Language=VBScript %>
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
</HEAD>
<BODY>
<H3><P>라디오버튼 사용하기</P></H3>
<form action="radio_r.asp" method=post>
<table border=0>
<tr>
<td align=center>제일 좋아하는 컴퓨터 언어 <br><br></td>
</tr>
<tr>
<td>
<input type=radio name=language value="ASP" checked> ASP
<input type=radio name=language value="VB"> VB
<input type=radio name=language value="PHP"> PHP
<input type=radio name=language value="VC"> VC
<input type=radio name=language value="Delphi"> Delphi
</td>
</tr>
<tr>
<td align=center><br><br>
<input type="submit" value="전송하기" id=submit1 name=submit1>
<input type="reset" value="취소하기" id=reset1 name=reset1>
</td>
</tr>
</table>
</form>
</BODY>
</HTML>
--------------------------------------------------------------------------
radio.asp 실행결과
체크박스 그룹과 동일하다. 하나의 그룹으로 선택하고자 하는 라디오 버튼의 이름은 모두 같아야만 하나의 선택만 가능하게 된다. 단, 각각의 value값을 다르게 하여 구분하는 키의 역할을 수행한다. 서버에서 실행되는 다음의 코드를 살펴보자.
● radio_r.asp
--------------------------------------------------------------------------
<%@ Language=VBScript %>
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
</HEAD>
<BODY>
<H3><P>라디오버튼 사용하기</P></H3> <br>
선택하신 언어는 <%=Request("language")%> 입니다.
</BODY>
</HTML>
--------------------------------------------------------------------------
radio_r.asp 실행 결과
라디오 버튼의 사용은 아주 간단하다. 단순히 Request를 통해 라디오 버튼의 이름만 적어주면 선택된 버튼의 value 값이 전송된다. 위의 <%=Request("language")%>라 입력하면 앞에서 선택된 라디오 버튼의 value 값이 출력되는 것이다.
리스트, 콤보 박스 사용하기
리스트 박스 사용하기
① 콤보 박스
<select>를 이용하여 콤보 박스를 사용자에게 제공하고, 선택된 값을 이용하는 방법에 대해서 알아보자.
<select>의 size가 2이상이 되지 않을 경우에만 콤보 박스가 나온다는 것은 알고 있을 것이다.
다음의 코드를 살펴보자.
--------------------------------------------------------------------------
<%@ Language=VBScript %>
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
</HEAD>
<BODY>
<H3><P>콤보박스 사용하기</P></H3>
<form action="combo_r.asp" method=post>
<table border=0>
<tr>
<td align=center>제일 좋아하는 컴퓨터 언어 <br><br></td>
</tr>
<tr>
<td>
<select name=language>
<option>VB</option>
<option selected>ASP</option>
<option>PHP</option>
<option>VC</option>
<option>Delphi</option>
</select>
</td>
</tr>
<tr>
<td align=center><br><br>
<input type="submit" value="전송하기" id=submit1 name=submit1>
<input type="reset" value="취소하기" id=reset1 name=reset1></td>
</tr>
</table>
</form>
</BODY>
</HTML>
--------------------------------------------------------------------------
combo.asp 실행결과
<select>와 <option>을 이용하여 콤보 박스를 출력하는 예제이다. 사용자가 목록에서 하나를 선택한 다음 전송하기를 클릭하여 서버 페이지를 실행한다. 다음의 서버 페이지의 코드를 살펴보자.
● combo_r.asp
--------------------------------------------------------------------------
<%@ Language=VBScript %>
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
</HEAD>
<BODY>
<H3><P>콤보박스 사용하기</P></H3><br>
선택하신 언어는 <%=Request("language")%> 입니다.
</BODY>
</HTML>
--------------------------------------------------------------------------
combo_r.asp 실행결과
콤보 박스의 경우에도 라디오 버튼과 마찬가지 하나의 값만 목록에서 선택하게 된다. 그렇기 때문에 단순히 Request로 value 값을 받아오면 된다. 앞의 경우에서처럼 option에 value가 설정되어 있지 않으며 <option>과 </option> 사이에 입력된 값이 value로 인식된다.
② 단일 선택 리스트 박스
<select> 태그에서 size를 2 이상으로 입력하면 목록이 모두 출력되어 고를 수 있도록 되어 있는 리스트 박스가 나타난다. 단일 선택으로 지정된 리스트 박스를 사용하는 다음 코드를 살펴보자.
● list1.asp
--------------------------------------------------------------------------
<%@ Language=VBScript %>
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
</HEAD>
<BODY>
<H3><P>단일 선택 리스트 박스 사용하기</P></H3>
<form action="list1_r.asp" method=post>
<table border=0>
<tr>
<td align=center>제일 좋아하는 컴퓨터 언어 <br><br></td>
</tr>
<tr>
<td>
<select name=language size=5>
<option>VB</option>
<option selected>ASP</option>
<option>PHP</option>
<option>VC</option>
<option>Delphi</option>
</select>
</td>
</tr>
<tr>
<td align=center><br><br>
<input type="submit" value="전송하기" id=submit1 name=submit1>
<input type="reset" value="취소하기" id=reset1 name=reset1>
</td>
</tr>
</table>
</form>
</BODY>
</HTML>
--------------------------------------------------------------------------
list1.asp 실행결과
목록은 이전 예제와 동일하다. 그러나 단일 선택 리스트 박스를 구현하기 위해서 <select> 태그에서 size=5의 옵션을 사용하였다. 전송하기를 클릭하면 실행되는 서버 페이지인 다음 코드를 살펴보자.
● list1_r.asp
--------------------------------------------------------------------------
<%@ Language=VBScript %>
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
</HEAD>
<BODY>
<H3><P>단일 선택 리스트 박스 사용하기</P></H3>
<br>
선택하신 언어는 <%=Request("language")%> 입니다.
</BODY>
</HTML>
--------------------------------------------------------------------------
list1_r.asp 실행결과
여러 가지 목록 중 하나만 선택하기 때문에 Request만 사용하면 선택한 항목의 value 값을 가져올 수 있다.
③ 다중 선택 리스트 박스
<select>를 이용한 리스트 박스의 목록에서 다중 선택이 가능한 목록을 사용자에게 제공할 수 있다. multiple 속성을 입력하면 이런 다중 목록의 제공이 가능하게 된다. 다음의 코드를 살펴보자.
● list2.asp
--------------------------------------------------------------------------
<%@ Language=VBScript %>
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
</HEAD>
<BODY>
<H3><P>다중 선택 리스트 박스 사용하기</P></H3>
<form action="list2_r.asp" method=post>
<table border=0>
<tr>
<td align=center>제일 좋아하는 컴퓨터 언어 <br><br></td>
</tr>
<tr>
<td>
<select name=language size=5 multiple>
<option>VB</option>
<option selected>ASP</option>
<option>PHP</option>
<option>VC</option>
<option>Delphi</option>
</select>
</td>
</tr>
<tr>
<td align=center><br><br>
<input type="submit" value="전송하기" id=submit1 name=submit1>
<input type="reset" value="취소하기" id=reset1 name=reset1>
</td>
</tr>
</table>
</form>
</BODY>
</HTML>
--------------------------------------------------------------------------
list2.asp 실행결과
<select> 태그에 multiple 속성이 입력되어 있는 것에 주의하자. 이것으로 사용자는 다중 선택이 가능하게 되는 것이다. 다음의 서버 페이지 코드를 살펴보자.
● list2_r.asp
--------------------------------------------------------------------------
<%@ Language=VBScript %>
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
</HEAD>
<BODY>
<H3><P>다중 선택 리스트 박스 사용하기</P></H3><br>
선택하신 언어는 <%=Request("language")%> 입니다.<br><br>
루프를 이용한 출력 부분 <br>
<% for i = 1 to Request("language").Count %>
<%=Request("language")(i)%>
<% next %>
</BODY>
</HTML>
--------------------------------------------------------------------------
list2_r.asp
다중 선택의 결과를 출력하는 화면이다. 다중 선택의 경우라도 단순히 Request로 출력을 하게 되면 컴마(,)로 구분된 형식의 선택된 목록을 확인할 수 있다. <%=Request("language")가 출력하는 부분이다. 그러나 실제 프로그램에 사용하기 위한 변수 같은 것으로 설정하고자 한다면 루프구조를 이용하여 배열의 형식으로 출력하여야 한다. 우선 Request("language").Count를 이용하여 선택되어진 목록의 수를 구한 후 Request("language")(i)에서 각 인덱스에 해당하는 value값을 출력하게 된다.
'Web Development > ASP' 카테고리의 다른 글
| [ASP 完] 자주 사용하는 VBScript 함수 (0) | 2009.06.06 |
|---|---|
| [ASP] 제어 구문에 대해서 (0) | 2009.06.06 |
| [ASP] 인식자(Identifiers),변수,상수,데이터 타입,연산자,데이터 형식 변환,배열 (고정 크기 배열, 동적 배열, 다차원 배열) (0) | 2009.06.06 |
| [ASP] 프로그램 구조에 대해서 (109) | 2009.06.06 |
| [ASP] 내장 객체 에 대해서 (0) | 2009.06.06 |