본문 바로가기

Web Development/ASP

[ASP] 사용자에게 정보 얻기

부족하긴 하지만.. 꽤 많은 기본적인 문법들에 대해서 이야기를 했는데요..
아무리 흥미있는 내용이라고 해도, 글만 보고 있으면 지겨워 질 수 있겠죠?
그래서 오늘은.. 더 지겨워지기 전에 얼른 실습에 들어가 보려고 합니다. ^^

오늘 우리가 실습해 볼 도전 과제는...
사용자에게 정보를 입력 받아서, 그 내용을 화면에 출력하는 페이지를 만들어 보는 것입니다.
우리는 이 강좌에서 두 개의 페이지를 만들 예정입니다.

여기서 잠깐!!

제가 지난 강좌에서 '에디터 프로그램'을 준비해 주십사 부탁 드렸었는데.. 기억하시나요?
에디터 프로그램이 없으신 분들께서는 메모장(NotePad) 을 사용하셔도 됩니다만..
되도록이면 에디트플러스(EditPlus) 나, 울트라에디트(UltraEdit) 같은
전문 에디터 프로그램을 사용하실 것을 권장해 드리는 바입니다.
(참고로 메모장은.. '시작 -> 프로그램 -> 보조 프로그램 -> 메모장' 에 있습니다.)

그러면 이제.. 에디터 프로그램을 실행하시고 두개의 페이지를 만들어 보도록 하겠습니다.
두 페이지의 이름은 각각 'regist.asp' 와 'regist_ok.asp' 로 하겠습니다.
regist.asp 페이지에서는 사용자에게 정보를 입력받을 예정이고요.
regist_ok.asp 에서는 regist.asp 에서 입력된 값을 받아 화면에 출력시켜 줄 예정입니다.

준비 되셨지요? 그렇다면 이제부터 실제 코딩으로 들어가 보도록 하겠습니다.
아래 표를 참고하셔서 regist.asp 와 regist_ok.asp 페이지를 만드시기 바랍니다.

또 한번 잠깐!!

이 페이지는 asp 페이지입니다. 따라서 '웹서버' 에서만 동작하게 됩니다. (기억하시죠?)
그러므로 이 두개의 페이지를 만드신 후에는 '홈 디렉토리' 에 저장하시거나,
'가상 디렉토리' 를 만드시고 그 안에 저장하셔야만 브라우저에서 확인하실 수 있습니다.

만약 홈 디렉토리인 'C:\Inetpub\wwwroot' 안에 파일을 저장하셨다면,
브라우저 주소창에 'http://localhost/regist.asp' 처럼 입력하시면 되고요.
가상 디렉토리를 만들고, 웹 공유시에 별칭을 'taiji' 라고 지어 주셨다면,
'http://localhost/taiji/regist.asp' 와 같이 접근하시면 되겠습니다.

(여기서는 홈 디렉토리와 가상 디렉토리에 대한 부가적인 설명을 드리지 않습니다.
혹시 기억이 가물가물 하신 분들께서는 'ASP 4번째 강좌' 를 참고하시기 바랍니다.)

참고로, 아래 소스의 왼쪽에 붙어있는 숫자는 설명을 위해서 붙여놓은 행 번호입니다.
만약 소스를 복사해서 '붙여넣기' 하신다면 행 번호는 필요없으므로 복사하지 마세요~.
(이렇게 말씀드려도 '소스대로 똑같이 했는데 오류나요!' 하시는 분 꼭 계십니다. ^^)

regist.asp
1
<HTML>
<HEAD>
<TITLE>사용자로부터 정보 얻기</TITLE>
</HEAD>
<BODY>
<FORM NAME=frmInfo METHOD=POST ACTION=regist_ok.asp>
이름 : <INPUT TYPE=TEXT NAME=txtName SIZE=15><BR>
Email : <INPUT TYPE=TEXT NAME=txtEmail SIZE=30><BR>
전화번호 : <INPUT TYPE=TEXT NAME=txtPhone SIZE=20><BR>
<INPUT TYPE=SUBMIT VALUE='전송'>
</FORM>
</BODY>
</HTML>
2
3
4
5
6
7
8
9
10
11
12
13

regist_ok.asp
1
<%
DIM strName, strEmail, strPhone
 
strName = Request.Form("txtName")
strEmail = Request.Form("txtEmail")
strPhone = Request.Form("txtPhone")
 
Response.Write "이름은 = " & strName & "<BR>"
Response.Write "Email은 = " & strEmail & "<BR>"
Response.Write "전화번호는 = " & strPhone & "<BR>"
%>
2
3
4
5
6
7
8
9
10
11

음.. 위에 나온 두개의 페이지는 따로따로 만드셔야 한다는 사실.. 알고 계시지요? ^^
사실 위에 있는 regist.asp 페이지에는, 보시는 것처럼 ASP 코드가 들어있지 않습니다.
그러므로 굳이 asp 파일이 아니라 HTML 형식의 파일로 만들어도 괜찮습니다.
바꿔 말하면.. ASP 코드가 포함되어 있지 않아도 asp 파일로 사용할 수 있다는 뜻이 됩니다.

선택은 여러분들의 자유입니다. 마음에 드는 형식의 파일로 저장하시기 바랍니다.
저는 혹시나 ASP 코드가 추가될 수 있을 가능성을 생각해서 asp 파일로 저장하였습니다.

자, 우선 위의 페이지를 실행한 결과를 보도록 하겠습니다. 다음 버튼을 클릭해 주세요.


자.. 사용자들에게 입력을 받는 세개의 입력창이 나타났습니다. (볼품은 없지만요.)
여기에 정성껏 자신의 정보를 입력하고 '전송' 버튼을 누르면..
방금 내가 입력한 값들이 화면에 그대로 보여지게 됩니다.

'에게게? 겨우 이게 뭐야~' 라고 생각하실 수도 있지만, 이것은 생각보다 대단한 것입니다.
이제 우리는 우리의 웹사이트를 방문하는 사람들에게서 정보를 얻을 수가 있게 되었으니까요.
이 간단한 기능의 추가로.. 여러분의 사이트는 '단지 보여지기만' 하는 사이트가 아닌,
사용자들에게 '정보를 수집할 수 있는' 역동적인 사이트로 거듭날 수가 있는 것입니다.

좋습니다. 그렇다면 지금부터 위의 소스를 하나하나 살펴보는 시간을 가지도록 하겠습니다.

regist.asp

1. FORM 태그

regist.asp 페이지에서 눈에 띄는 것은 아무래도 6번째 줄의 <FORM> 태그일 것 같습니다.
FORM 태그는 사용자에게 '정보를 입력받는 곳의 경계를 설정' 해 주는 태그입니다.

즉, 사용자가 정보를 입력하는 여러가지 필드들은 반드시 <FORM> 과 </FORM> 내부에 있어야만 합니다.
FORM 태그 바깥에 있으면 아무리 입력을 해도 그 내용이 전달되지 않습니다.
(regist.asp 페이지에서는 6~11줄까지 FORM 태그가 감싸고 있는 것을 보실 수 있습니다.)

FORM 태그에서 중요하게 사용되는 속성은 NAME, METHOD, ACTION 등이 있는데요.
이 속성들에 대해서 조금 더 자세하게 알아보도록 하겠습니다.

1.1 NAME
- 이것은 말 그대로 FORM 의 이름을 나타냅니다.
  한 페이지 안에서 FORM 은 단지 하나가 아닌, 여러개가 사용될 수도 있는데요.
  그렇기 때문에 경우에 따라서는 이 FORM 들을 구별해야 할 필요가 생기고는 합니다.
  이 때, 각각의 FORM 들을 구분해 주는 것이 바로 NAME 속성이 되는 것입니다.

1.2 ACTION
- 현재의 페이지는 '사용자들로부터 정보를 입력받는' 페이지라는 말씀을 위에서 드렸는데요.
  이 페이지는 '단지 입력을 받을' 뿐이고, 그 정보의 처리는 다른 페이지에서 하게 됩니다.
  그렇다면 지금 입력받은 정보들을 그 '처리해 주는 페이지' 로 보내야 하겠지요?
  이 때 사용되는 속성이 바로 ACTION 속성이 되겠습니다.
  '사용자가 입력한 정보를 처리하는 페이지의 주소' 가 바로 ACTION 의 값이 되는 것이지요.
  이 주소가 정확하지 않으면 '페이지를 찾을 수 없다' 는 오류를 만나게 될 것입니다.

1.3 METHOD
- 값을 전달하는 '방식' 을 의미하는 METHOD 속성에는 두가지가 있습니다.
  하나는 'GET' 방식이고, 또 하나는 'POST' 방식인데요.
  GET 방식은 여러분들께서 주소를 입력하는 주소창에 정보를 추가해서 전달하는 방식이며,
  POST 방식은 보이지 않게 숨겨서 정보를 전달하는 방식이 되겠습니다.
  따라서 GET 방식을 사용하면 주소창에 여러분들께서 입력한 정보가 드러나게 되지요.

  그림 1. GET 방식으로 값을 전달하는 경우


  위의 주소창에서 보실 수 있는 것처럼 주소를 나타내는 content.asp 다음에
  '?seq=197&part=1' 이라는 문자열이 들어가 있는 것을 보실 수가 있겠습니다.
  이것은 content.asp 페이지로 이동할 때 seq 라는 변수에는 197 이라는 값을,
  그리고 part 라는 변수에는 1 이라는 값을 GET 방식으로 넘긴다는 의미가 되겠습니다.
  (참고로.. 페이지와 변수는 '?' 문자로 구분하고, 변수와 변수는 '&' 문자로 구분합니다.
  이 내용은 상당히 자주 접하게 될 내용이므로, 미리 알아두시면 두고두고 유용합니다. ^^)

  하지만 POST 방식으로 넘겨주는 경우에는 주소창에 아무 정보도 나타나지 않습니다.
  POST 방식의 경우, 정보는 따로 데이터 스트림이라는 곳에 저장되어 전달되기 때문이지요.

  그림 2. POST 방식으로 값을 전달하는 경우


  보시다시피 POST 방식을 사용한 경우 주소창에는 딸랑 주소만이 표시됩니다.
  어떤 변수와 어떤 값들이 전달 되는지 사용자들은 도무지 알 수가 없는 것이지요.

  자, 그럼 여기서 GET 방식과 POST 방식의 차이를 간략하게 정리해 보도록 하겠습니다.

  하나, POST 방식이 GET 방식보다 보안적 측면에서 더 우수합니다.
  주소창에서 정보가 보여지는 GET 방식보다는 POST 방식이 아무래도 더 안전하겠지요?

  둘, POST 방식이 GET 방식보다 더 많은 양을 전달할 수 있습니다.
  POST 방식은 정보의 양에 상관없이 무제한 용량을 소화할 수 있지만,
  주소(URL)의 뒤에 정보를 추가하는 GET 방식은 최대 2,047 글자를 넘어갈 수 없습니다.
  따라서 많은 양의 내용을 전달하려 할 때 GET 방식을 사용하면 곤란하겠지요. (대략 낭패~!)

  세번째, 아주 미세한 차이지만 속도는 GET 방식이 POST 방식보다 빠릅니다.
  별도의 장치 없이 주소(URL)의 뒤에 정보를 추가하는 방식인 GET 방식이,
  데이터 스트림에 따로 저장하는 POST 방식보다 더 빠르다는 것이 일반적인 중론입니다.
  (이론적으로는 그렇지만 실제로는 거의 차이가 없다고 봐도 무방하겠습니다.)

  이런 이유때문에 보통의 경우 GET 방식 보다는 POST 방식을 주로 사용합니다.
  (따라서.. 라면 이상하지만 이 강좌에서도 POST 방식을 사용하였습니다. ^^)

2. INPUT 태그

FORM 태그의 내부를 보면 7,8,9,10 번 줄에 있는 INPUT 태그를 보실 수 있습니다.
INPUT 태그는 '사용자에게 정보를 물어볼 때' 사용하는 태그인데요.
그러므로 이 태그는 '사용자의 입력을 받는' 특수한 태그라고 할 수가 있겠습니다.

INPUT 태그의 종류는 상당히 다양하지만.. 종류에 대해서는 다음 강좌에서 살펴보도록 하고,
이번 강좌에서는 '사용자들이 문자열을 입력할 수 있는' 텍스트 필드(TEXT)와,
'입력이 완료되었을 때 전송을 실행하는' 실행버튼(SUBMIT)의 경우만 다루도록 하겠습니다.

위 소스의 7 ~ 11번 줄의 소스를 옮겨보면 다음과 같습니다.

7.   이름 : <INPUT TYPE=TEXT NAME=txtName SIZE=15>
8.   Email : <INPUT TYPE=TEXT NAME=txtEmail SIZE=30>
9.   전화번호 : <INPUT TYPE=TEXT NAME=txtPhone SIZE=20>
10.   <INPUT TYPE=SUBMIT VALUE='전송'>

INPUT TYPE=TEXT 는 사용자에게 글자를 입력받는 텍스트 필드를 사용하겠다는 의미입니다.
하지만 똑같은 텍스트 필드가 3개씩이나 나오니까.. 각각을 구분해야 할 필요가 있겠지요?

이 때 서로를 구분해 주는 속성이 바로 NAME 속성입니다. 이름을 지어 주는 것이지요.
이렇게 지어준 '이름' 은 정보를 넘겼을 때 유용하게 사용되므로 잘 기억해 두셔야 합니다.
(이름을 지을때에도 저는 이름 앞에 text 의 약자인 txt 를 붙여서 지었습니다. 편합니다. ^^)

뒤에 SIZE 라는 또 하나의 속성이 보이는데요.. 이것은 텍스트 필드의 '길이' 를 의미합니다.
(영문은 사이즈 1당 글자 하나, 한글은 사이즈 2당 글자 하나가 들어가는 정도의 길이입니다.)
이름은 그다지 길지 않을 것 같으므로 사이즈를 15 정도로 주었고요.
Email 은 약간 길어질 수 있으므로 넉넉하게 30 정도로 정해 주었습니다.
만약 SIZE 값을 지정해 주지 않는다면 기본 값은 자동적으로 20 이 됩니다.

10번 줄의 SUBMIT 버튼은, 현재 FORM 안에 있는 내용들의 전송을 실행하는 버튼입니다.
이 버튼을 클릭하면 FORM 안에 있는 모든 내용들이 지정된 페이지로 전달됩니다.
(정확하게 말하자면 FORM 의 ACTION 속성에서 값으로 지정해 준 페이지로 전달됩니다.)
여기서 사용되는 VALUE 속성은 버튼 위에 쓰여지는 내용을 의미합니다.

regist_ok.asp

자.. 이제는 regist.asp 페이지에서 넘겨준 정보를 처리하는 역할을 하는 페이지인
regist_ok.asp 페이지를 한번 살펴보도록 하겠습니다.
이 페이지의 구조는 상당히 단순합니다. 소스의 중요 부분만을 살짝 옮겨와 보도록 할까요?

2.   DIM strName, strEmail, strPhone

4.   strName = Request.Form("txtName")
5.   strEmail = Request.Form("txtEmail")
6.   strPhone = Request.Form("txtPhone")

8.   Response.Write "이름은 = " & strName & "<BR>"
9.   Response.Write "Email은 = " & strEmail & "<BR>"
10.   Response.Write "전화번호는 = " & strPhone & "<BR>"

우선 2번 줄에서는 이 페이지에서 사용될 변수들을 Dim 명령어를 이용하여 선언합니다.
(ASP 에서는 반드시 선언하지 않아도 되지만.. 선언하는 것이 좋은 습관인거 아시죠? ^^)
보시는 것처럼 이름, 이메일, 전화번호를 저장할 변수 셋을 선언했네요.
(저는.. 문자열이 저장된다는 이유로 앞에 'str' 이라는 접두사를 붙여주었습니다.)

4, 5, 6번 줄은 regist.asp 페이지에서 넘긴 정보를 받는 부분이 되겠습니다.
그런데 여기서 한가지.. 우리는 regist.asp 페이지에서 POST 방식을 사용했었습니다.
이처럼 POST 방식으로 넘기는 경우 'Request.Form' 과 같은 형식으로 값을 받아야 합니다.

그렇다면 GET 방식으로 값을 넘긴 경우에는 처리가 달라지는 걸까요?
네. 그렇습니다. GET 방식인 경우 'Request.QueryString' 으로 값을 받아야 하지요.

여기서 잠깐!!

Request.QueryString (GET 방식) 과 Request.Form (POST 방식)..
초보 분들이 가장 많은 실수를 하는 부분이 바로 이 부분이라고 해도 과언이 아닙니다.

제가 받는 질문 중에서 가장 많은 질문이 바로 이 부분의 질문입니다.
POST 방식으로 넘기고 Request.QueryString 으로 받으시거나, GET 방식으로 넘기고 Request.Form 으로 받은 다음에 '아무런 값을 받아오지 못했다' 고 하시는 것이지요.

이런 경우를 대비해서 GET, POST 방식에 상관 없이 받아오는 방법이 있습니다.
QueryString 과 Form 을 생략한 Request("txtName") 처럼 받아오는 방법인데요.
하지만, 이 방법은 QueryString, Form 을 명시해 줄때보다는 효율성이 떨어진답니다.
효율성을 위해서 GET 방식일때는 Request.QueryString, POST 방식일때는 Request.Form 으로 받는 좋은 습관을 초보일때 꼭~! 들여 두시기 바랍니다. ^^)

4번 줄에서는.. regist.asp 에서 사용자가 txtName 이라는 이름(Name) 의
텍스트 필드에 입력한 내용을 고스란히 받아와서, 그 값을 strName 이라는 변수에 저장합니다.
마찬가지 방식으로 5번 줄에서는 txtEmail 의 내용을 strEmail 이라는 변수에 저장하고요.
6번 줄에서는 txtPhone 의 내용을 strPhone 이라는 변수에 저장하게 됩니다.

이처럼 각각의 변수에 저장된 값들을..
8, 9, 10 번 줄에서는 Response.Write 메소드를 이용하여 화면에 출력해 주게 됩니다.
노파심에서 한마디 드리자면, 큰 따옴표로 감싼 부분은 문자열 그대로 출력될 것이고요.
큰 따옴표가 없는 부분은 '변수' 이므로 그 안에 담겨진 값을 출력하게 됩니다.
그렇다면 '&' 문자는? 이것은 문자열과 문자열을 연결시켜 주는 역할을 하는 것이지요. ^^

그런데.. 뒤에 "<BR>" 이라는 부분이 왜 있는지 궁금해 하실지도 모르겠는데요.
Response.Write 메소드를 사용하여 화면에 출력하면 이것은 HTML 로 변환 됩니다.
따라서 이것은 HTML 의 규칙을 충실하게 따르게 되는 것이지요.
그러므로 줄을 바꾸기 위해서 "<BR>" 태그를 사용한 것입니다.
만약 "<BR>" 부분이 없다면 8, 9, 10 번줄의 내용들은 한 줄로 보여지게 될 것입니다.
(미관상 그리 좋아 보이지는 않겠지요? 나름대로 서비스라고 생각하시면 됩니다. ^^)

자.. 어떻습니까?
이렇듯 regist_ok.asp 페이지에서는 regist.asp 페이지에서 넘겨준 정보를 받아서
변수에다가 그 정보를 저장한 다음, 그 내용을 화면에 곱게~ 출력해 주었습니다.

사용자에게 정보를 얻어내는 방법... 생각보다 간단하지 않나요?
(간단하지요? 하지만 이 내용은 이제 ASP 를 본격적으로 공부하려는 여러분들에게
기본이면서도 아주~ 중요한 내용이랍니다. 반드시, 확실하게 알아두셔야만 하지요.)


자, 그럼 오늘의 강좌는 이것으로 마치도록 하겠습니다.
오늘은 사용자에게 정보를 얻는 방법(텍스트 필드만을 이용한)에 대해서 생각해 보았는데요.
다음 강좌에서는 오늘 나온 '텍스트 필드' 뿐만이 아닌, 여러가지 방식으로 사용자들에게
정보를 얻는 방법
에 대해서 알아보도록 하겠습니다.

한가지 부탁 말씀을 드리자면..
오늘의 강좌는 여러분들께서 눈으로만 따라하지 마시고, 에디터 프로그램이나 메모장에서
직접 코딩해 보신 후에 결과가 과연 제대로 나오는지 직접 확인하시는 것이 좋다는 것입니다.
경험상.. 코딩을 손으로 직접 하다보면 코딩 속도도 빨라지고, 코딩의 '감' 도 생기게 됩니다.
시간이 정 없으시거나, 테스트해 볼 환경이 안되는 분이시라면 어쩔 수 없겠지만
환경이 마련되어 있는 분들께서는 꼭 실행해 보실 것을 강력하게 권해 드립니다. ^^

지난 시간에 우리는 사용자들로부터 정보를 입력 받아서 그 내용을 화면에 출력시켜보는
상당히 간단한 regist.asp 와 regist_ok.asp 페이지를 만들어 보았습니다.
하지만 지난 시간에 이용한 방식은 단지 '텍스트 필드(INPUT TYPE=TEXT)' 만을
이용한 것이었기 때문에.. 조금은(상당히?) 심심하셨을지도 모르겠습니다.
(보통 하나의 사이트에 가입을 하려면.. 텍스트 필드 외에도 마우스로 클릭을 한다거나,
목록 중에서 하나 선택을 해야 하는 등.. 여러가지 입력 방식들을 접하게 되니까 말이지요.)
그래서 오늘은.. 많이 사용되는 다양한 입력 방식들에 대해서 살펴보고자 합니다.

사실 이 내용은 ASP 가 아닌 HTML 에 관련된 내용이지만
지난 강좌의 내용과 연결되는 부분이라서 그냥 ASP 강좌로 올리도록 하겠습니다.

자, 그럼 오늘 우리가 알아볼 내용들에 대해서 잠깐 살펴보도록 할까요?

정보를 입력받는 여러가지 방식
1. <INPUT TYPE=TEXT> 문자열을 입력받는다. (한 줄로만 가능하다.)
2. <INPUT TYPE=PASSWORD> 문자열을 입력받는다. 하지만 그 내용은 알 수 없다.
3. <INPUT TYPE=RADIO> 여러 보기 중에 하나만 선택할 때 사용한다.
 예제 1번    예제 2번    예제 3번    예제 4번    예제 5번
4. <INPUT TYPE=CHECKBOX> 항목을 선택 할지 말지 결정할 때 사용한다.
 체크 1번    체크 2번    체크 3번    체크 4번    체크 5번
5. <SELECT> 와 <OPTION> 보기를 '리스트 박스' 로 정렬해서 나타내준다.
6. <TEXTAREA> 문자열을 입력받는다. (여러 줄 입력이 가능하다.)

간략하게 오늘 알아볼 방식들의 특징과 예를 소개해 보았습니다.
(인터넷 사용을 자주 하신 분들이라면 그다지 낯설지는 않았으리라 생각합니다만..)
자, 그럼 이제부터 본격적으로 이들에 대해서 살펴보도록 하겠습니다.

1. INPUT TYPE=TEXT
- 첫번째로 살펴볼 내용은 지난 시간에 살펴 보았던 텍스트 필드(TEXT) 입니다.
  지난 시간에 말씀드린대로 텍스트 필드는 '문자열을 입력받기 위한' 용도로 사용되며,
  이름을 규정짓는 NAME 속성과, 길이를 결정하는 SIZE 속성이 있었습니다.
  오늘은 이 속성들을 포함한 여러가지 속성에 대해서 말씀드리고자 합니다.
  (지난 시간과 중복되는 내용은 간략하게 설명하고 넘어가도록 하겠습니다.)

1.1 NAME - 텍스트 필드의 이름을 의미합니다. (지난 강좌 참조)
1.2 SIZE - 텍스트 필드의 길이를 의미합니다. (지난 강좌 참조)
1.3 VALUE - 텍스트 필드에 보여지는 기본 문자열 값을 의미합니다.
1.4 MAXLENGTH - 텍스트 필드에 쓸 수 있는 최대 문자의 수를 지정합니다.
      (여기서 지정한 값보다 긴 글을 쓰기 위해 키보드를 아무리 눌러도 입력되지 않습니다.)
1.5 READONLY - 이 속성을 지정하면 텍스트 필드는 읽기 전용이 되어 쓰기가 되지 않습니다.

이 속성들을 이용한 다음 두 개의 예를 보시겠습니다.

1. <INPUT TYPE=TEXT NAME=txt1 SIZE=60 MAXLENGTH=7>

2. <INPUT TYPE=TEXT NAME=txt2 SIZE=75 VALUE='입력해 보세요' READONLY>


MAXLENGTH=7 이라는 속성을 지정한 1번 텍스트 필드에서는 7글자 이상 입력이 안됩니다.
(혹시 거짓말일지도 모르니 한번 직접 입력해 보세요. ^^)
그리고 VALUE 속성에 '입력해 보세요' 라는 값을 지정한 2번 텍스트 필드에서는
이 값이 처음부터 보여지는 것을 확인하실 수가 있으며,
READONLY 속성 때문에 글이 입력되지 않습니다.

2. INPUT TYPE=PASSWORD
- PASSWORD 는 단어의 뜻 그대로 '비밀번호' 를 입력 받을때 주로 사용합니다.
  사용 방법과 형태, 속성까지.. 모두 텍스트 필드와 완전히 일치합니다만 보안의 이유로
  우리가 입력하는 모든 값이 '*' 로 표시된다는 것이 텍스트 필드와 다른 점이 되겠습니다.

PASSWORD 의 사용 예는 다음과 같습니다.

<INPUT TYPE=PASSWORD NAME=txtPassword SIZE=75 MAXLENGTH=10>


값을 입력해 보시면 아시겠지만 어떤 글자를 입력하더라도 모두 '*' 문자로 보여지게 됩니다.
(MAXLENGTH=10 속성 때문에 최대 10글자 까지만 입력된다는 사실도 잊지 말아주세요.)

3. INPUT TYPE=RADIO
- RADIO 버튼은 여러개의 보기 중에서 단 하나만을 선택할 때 사용하는 방식입니다.
  (중,고등 학교 시절 사지선다 때문에 골치가 지끈지끈 했던 기억이 문득... ^^)
  이 RADIO 버튼에도 몇가지 속성이 있는데요. 그 내용은 다음과 같습니다.

3.1 NAME - 이 보기들의 이름을 의미합니다. 하지만 한가지 기억하셔야 할 것은 만약 보기를
      다섯 개 사용한다고 가정하면 그 다섯개의 NAME 을 모두 같게 해줘야 한다는 점입니다.
      (그래야만 같은 내용의 보기로 인정하게 되는 것입니다.)
3.2 VALUE - 이 보기의 고유 값으로서, 다음 페이지로 전달되는 실제 값입니다.
      (텍스트 필드에서의 VALUE 속성과는 의미가 다르다는 점에 주목해 주시기 바랍니다.)
3.3 CHECKED - 이 속성을 지정하면 그 보기에는 미리 체크되어 있게 됩니다.

그러면 RADIO 버튼의 사용 예도 한번 보도록 할까요?

<INPUT TYPE=RADIO NAME=rdoSample VALUE=1 CHECKED> 1번 예제
<INPUT TYPE=RADIO NAME=rdoSample VALUE=2> 2번 예제
<INPUT TYPE=RADIO NAME=rdoSample VALUE=3> 3번 예제
<INPUT TYPE=RADIO NAME=rdoSample VALUE=4> 4번 예제
<INPUT TYPE=RADIO NAME=rdoSample VALUE=5> 5번 예제

1번 예제 2번 예제 3번 예제 4번 예제 5번 예제

보시는 것처럼 다섯 개의 보기를 나열해 보았습니다.
이 중에서 1번 보기에 CHECKED 속성을 사용해서 미리 선택되어 보이게끔 설정했고요.
다른 보기를 클릭하시면 기존에 선택된 보기가 해제되는 것을 확인하실 수 있겠습니다.

4. INPUT TYPE=CHECKBOX
- CHECKBOX 는 어떤 항목을 선택할 것인지 선택하지 않을 것인지 결정할 때 사용합니다.
  (마우스로 한번 클릭하면 선택이 되고, 다시 클릭하면 선택한 것이 해제 됩니다.
  이때 선택을 한 경우에는 VALUE 에서 설정한 값이 정보를 받는 페이지로 넘어가게 되고,
  선택을 하지 않은 경우에는 아무 값도 넘어가지 않게 됩니다.)

  나머지 속성 및 사용 방법은 대체로 RADIO 버튼과 일치합니다만, 한가지!
  RADIO 버튼은 각 보기들의 NAME 이 모두 일치했던 것에 비해서, CHECKBOX 는 서로
  연관성이 없기 때문에 NAME 이 틀리다는 사실 정도는 알아두시면 좋겠습니다.

이 CHECKBOX 의 사용 예 역시 안보고 넘어가면 섭섭하겠지요? ^^

<INPUT TYPE=CHECKBOX NAME=chkSample1 VALUE=1> 체크 1번
<INPUT TYPE=CHECKBOX NAME=chkSample2 VALUE=2 CHECKED> 체크 2번
<INPUT TYPE=CHECKBOX NAME=chkSample3 VALUE=3> 체크 3번
<INPUT TYPE=CHECKBOX NAME=chkSample4 VALUE=4 CHECKED> 체크 4번
<INPUT TYPE=CHECKBOX NAME=chkSample5 VALUE=5> 체크 5번

체크 1번 체크 2번 체크 3번 체크 4번 체크 5번

5. <SELECT>
- SELECT 는 여러가지 보기를 '리스트 박스' 로 보여줄 때 사용합니다.
  SELECT 는 OPTION 과 함께 쓰여서 보기를 표시하는데요.
  여기에 쓰이는 속성을 정리하면 다음과 같습니다.

5.1 NAME - SELECT 에 사용되는 속성이며 이 항목의 이름을 의미합니다.
5.2 SIZE - SELECT 에 사용되는 속성이며 보여지는 항목의 크기를 의미합니다.
5.3 VALUE - OPTION 에 사용되는 속성이며 보기의 값을 의미합니다.
5.4 SELECTED - 이 속성을 지정하면 해당 보기가 선택되어져 나타납니다.
      (RADIO 버튼이나 CHECKBOX 의 CHECKED 속성과 같은 의미라고 생각하시면 됩니다.)
5.5 MULTIPLE - 이 속성을 지정하면 다중 선택이 가능해 집니다.

SELECT 의 사용 예는 지금까지 나온 것들과는 조금 다른데요.. 다음을 주목해 주세요.

1. <SELECT NAME=sltSample SIZE=1>
        <OPTION VALUE=1>1번 보기입니다.</OPTION>
        <OPTION VALUE=2>2번 보기입니다.</OPTION>
        <OPTION VALUE=3>3번 보기입니다.</OPTION>
        <OPTION VALUE=4 SELECTED>4번 보기입니다.</OPTION>
    </SELECT>

2. <SELECT NAME=sltSample SIZE=3 MULTIPLE>
        <OPTION VALUE=1>1번 보기입니다.</OPTION>
        <OPTION VALUE=2>2번 보기입니다.</OPTION>
        <OPTION VALUE=3>3번 보기입니다.</OPTION>
        <OPTION VALUE=4>4번 보기입니다.</OPTION>
    </SELECT>


1번에서는 SIZE를 1로 설정하고 보기의 4번째 항목에 SELECTED 속성을 지정해서
리스트 박스가 처음 나올 때부터 4번 보기가 선택 되어지게끔 설정하였습니다.
2번에서는 SIZE를 3으로 설정해서 목록이 세개가 보여지게 되었습니다.
그리고 또한 MULTIPLE 속성을 지정했는데요. 이로써 다중 선택이 가능해집니다.
(다중 선택을 하시려면 키보드 왼쪽 맨 아래에 있는 Ctrl 버튼을 누르고 클릭하시면 됩니다.)

6. <TEXTAREA>
- TEXTAREA는 사용자로부터 많은 양의 글을 입력받을 때 사용합니다.
  글을 입력받는다는 의미에서는 텍스트 필드와 비슷하지만 사용 방법은 꽤 틀립니다.
  그럼 TEXTAREA 에서 사용되는 속성에 대해서 살펴보겠습니다.

6.1 NAME - 이 TEXTAREA 의 이름을 의미합니다. (텍스트 필드와 동일)
6.2 COLS - TEXTAREA 의 가로 길이를 컬럼 단위로 지정합니다.
6.3 ROWS - TEXTAREA 의 세로 길이를 행 단위로 지정합니다.
6.4 READONLY - 읽기 전용이 되어 쓰기가 되지 않습니다. (텍스트 필드와 동일)

자, 그러면 TEXTAREA 를 사용한 예를 한번 보도록 하겠습니다.

1. <TEXTAREA NAME=txtComment COLS=70 ROWS=4></TEXTAREA>

2. <TEXTAREA COLS=70 ROWS=3 READONLY>TEXTAREA</TEXTAREA>


1번에서는 txtComment 라는 이름의 가로 70칸, 세로 4줄인 입력창을 만들었습니다.
2번에서는 "TEXTAREA" 라는 기본 값을 주었고 (텍스트 필드때와는 방식이 다르지요?)
READONLY 속성을 이용해서 값을 입력하지 못하도록 하였습니다.
(2번에서 NAME 속성이 빠진 것은 공간이 부족해서 입니다. 다른 이유는 없습니다. ^^)

자~. 오늘 알아볼 내용은 여기까지고요.
지금까지 정리한 내용을 가지고 지난 시간과 마찬가지로 두 개의 페이지를 만들어 보겠습니다.

우선, 오늘 공부해 본 내용을 이용해 사용자에게 정보를 입력받는 regist2.asp 페이지와
그 정보를 전달 받아서 화면에 출력시켜주는 regist2_ok.asp 페이지를 말이지요.

자 그럼 에디터 프로그램을 여시고 다음 두 페이지를 코딩해 보시기 바랍니다.
(어디에 어떻게 저장해서 실행해야 하는지.. 오늘 강좌에서는 언급하지 않겠습니다.
기억이 나지 않는 분들께서는 지난 강좌를 참고하고 오셔도 좋겠지요. ^^)

regist2.asp
1
<HTML>
<HEAD>
<TITLE>사용자로부터 정보 얻기 - 두번째</TITLE>
</HEAD>
<BODY>
<FORM NAME=frmInfo METHOD=POST ACTION=regist2_ok.asp>
이름 : <INPUT TYPE=TEXT NAME=txtName SIZE=30><BR>
비밀번호 : <INPUT TYPE=PASSWORD NAME=txtPassword SIZE=30><BR>
성별 : <INPUT TYPE=RADIO NAME=rdoSex VALUE='M' CHECKED> 남자
         <INPUT TYPE=RADIO NAME=rdoSex VALUE='F'> 여자<BR>
관심사 : <INPUT TYPE=CHECKBOX NAME=chkFavor1 VALUE='on'> 영화
            <INPUT TYPE=CHECKBOX NAME=chkFavor2 VALUE='on'> 만화
            <INPUT TYPE=CHECKBOX NAME=chkFavor3 VALUE='on'> 쇼핑
            <INPUT TYPE=CHECKBOX NAME=chkFavor4 VALUE='on'> 운동<BR>
직업 : <SELECT NAME=sltJob>
         <OPTION VALUE=1>중학생</OPTION>
         <OPTION VALUE=2>고등학생</OPTION>
         <OPTION VALUE=3 SELECTED>대학생</OPTION>
         <OPTION VALUE=4>직장인</OPTION>
         <OPTION VALUE=5>주부</OPTION>
         </SELECT><BR>
소개 : <TEXTAREA NAME=txtCom COLS=30 ROWS=3></TEXTAREA><BR>
<INPUT TYPE=SUBMIT VALUE='전송'>
</FORM>
</BODY>
</HTML>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

regist2_ok.asp
1
<%
DIM strName, strPassword, strSex, strJob, strComment
DIM strFavor1, strFavor2, strFavor3, strFavor4
 
strName = Request.Form ("txtName")
strPassword = Request.Form ("txtPassword")
strSex = Request.Form ("rdoSex")
strFavor1 = Request.Form ("chkFavor1")
strFavor2 = Request.Form ("chkFavor2")
strFavor3 = Request.Form ("chkFavor3")
strFavor4 = Request.Form ("chkFavor4")
strJob = Request.Form ("sltJob")
strComment = Request.Form ("txtCom")
 
Response.Write "이름은 = " & strName & "<BR>"
Response.Write "비밀번호는 = " & strPassword & "<BR>"
Response.Write "성별은 = " & strSex & "<BR>"
Response.Write "관심사(영화)는 = " & strFavor1 & "<BR>"
Response.Write "관심사(만화)는 = " & strFavor2 & "<BR>"
Response.Write "관심사(쇼핑)는 = " & strFavor3 & "<BR>"
Response.Write "관심사(운동)는 = " & strFavor4 & "<BR>"
Response.Write "직업은 = " & strJob & "<BR>"
Response.Write "소개는 = " & strComment & "<BR>"
%>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

이 두 페이지를 실행한 결과는 다음과 같습니다. (아래 버튼을 클릭해 주세요)
그리고 중복되는 설명이 많기에.. 이 두 페이지에 대한 소스 해석을 따로 하지는 않겠습니다.


오늘은 사용자들에게 정보를 얻어내는 6가지 방법에 대해서 알아보았는데요.
여러분들께서 웹 서핑을 많이 해 보셔서 아시겠지만.. 이 방식들은 상당히 자주,
그리고 거의 필수적으로 사용되므로 그 사용법을 꼭! 알아두시는 것이 좋겠습니다.

자.. 이것으로서 길었던 오늘의 강좌도 여기서 줄이도록 하겠습니다.

'Web Development > ASP' 카테고리의 다른 글

[ASP] 내장 객체 에 대해서  (0) 2009.06.06
[ASP] 개체모델에 대해서  (3) 2009.06.06
[ASP] 기본 문법 에 대하여  (0) 2009.06.06
[ASP] 기초튼튼 입문강좌  (0) 2009.06.06
[ASP] ASP로의 첫번째 도전!!  (0) 2009.06.06