|
|
|
|
|
|
| |
 최초 작성일 |
:
2003년 08월 26일 |
|
최종 수정일 |
:
2004년 05월 17일 |
|
|
작성자 |
:
Dukyoung (김덕영) |
|
편집자 |
:
Taeyo (김 태영) |
|
|
읽음수 |
:
61,046회
|
|
|
강좌 목록으로 돌아가기
|
|
|
|
|
필자의 잡담~
5월 8일 결혼한 덕방구님의 ASP 강좌입니다. 이제 결혼도 하고, 안정권에 접어들은 만큼 더욱 자주 강좌가 올라오지 않을까 싶네요 ^^ 하하하.... |
|
|
|
지난 시간에 우리는 사용자들로부터 정보를 입력 받아서 그 내용을 화면에 출력시켜보는
상당히 간단한 regist.asp 와 regist_ok.asp 페이지를 만들어 보았습니다.
하지만 지난 시간에 이용한 방식은 단지 '텍스트 필드(INPUT TYPE=TEXT)' 만을
이용한 것이었기 때문에.. 조금은(상당히?) 심심하셨을지도 모르겠습니다.
(보통 하나의 사이트에 가입을 하려면.. 텍스트 필드 외에도 마우스로 클릭을 한다거나,
목록 중에서 하나 선택을 해야 하는 등.. 여러가지 입력 방식들을 접하게 되니까 말이지요.)
그래서 오늘은.. 많이 사용되는 다양한 입력 방식들에 대해서 살펴보고자 합니다.
사실 이 내용은 ASP 가 아닌 HTML 에 관련된 내용이지만
지난 강좌의 내용과 연결되는 부분이라서 그냥 ASP 강좌로 올리도록 하겠습니다.
자, 그럼 오늘 우리가 알아볼 내용들에 대해서 잠깐 살펴보도록 할까요?
간략하게 오늘 알아볼 방식들의 특징과 예를 소개해 보았습니다.
(인터넷 사용을 자주 하신 분들이라면 그다지 낯설지는 않았으리라 생각합니다만..)
자, 그럼 이제부터 본격적으로 이들에 대해서 살펴보도록 하겠습니다.
1. INPUT TYPE=TEXT
- 첫번째로 살펴볼 내용은 지난 시간에 살펴 보았던 텍스트 필드(TEXT) 입니다.
지난 시간에 말씀드린대로 텍스트 필드는 '문자열을 입력받기 위한' 용도로 사용되며,
이름을 규정짓는 NAME 속성과, 길이를 결정하는 SIZE 속성이 있었습니다.
오늘은 이 속성들을 포함한 여러가지 속성에 대해서 말씀드리고자 합니다.
(지난 시간과 중복되는 내용은 간략하게 설명하고 넘어가도록 하겠습니다.)
1.1 NAME - 텍스트 필드의 이름을 의미합니다. (지난 강좌 참조)
1.2 SIZE - 텍스트 필드의 길이를 의미합니다. (지난 강좌 참조)
1.3 VALUE - 텍스트 필드에 보여지는 기본 문자열 값을 의미합니다.
1.4 MAXLENGTH - 텍스트 필드에 쓸 수 있는 최대 문자의 수를 지정합니다.
(여기서 지정한 값보다 긴 글을 쓰기 위해 키보드를 아무리 눌러도 입력되지 않습니다.)
1.5 READONLY - 이 속성을 지정하면 텍스트 필드는 읽기 전용이 되어 쓰기가 되지 않습니다.
이 속성들을 이용한 다음 두 개의 예를 보시겠습니다.
MAXLENGTH=7 이라는 속성을 지정한 1번 텍스트 필드에서는 7글자 이상 입력이 안됩니다.
(혹시 거짓말일지도 모르니 한번 직접 입력해 보세요. ^^)
그리고 VALUE 속성에 '입력해 보세요' 라는 값을 지정한 2번 텍스트 필드에서는 이 값이 처음부터 보여지는 것을 확인하실 수가 있으며, READONLY 속성 때문에 글이 입력되지 않습니다.
2. INPUT TYPE=PASSWORD
- PASSWORD 는 단어의 뜻 그대로 '비밀번호' 를 입력 받을때 주로 사용합니다.
사용 방법과 형태, 속성까지.. 모두 텍스트 필드와 완전히 일치합니다만 보안의 이유로
우리가 입력하는 모든 값이 '*' 로 표시된다는 것이 텍스트 필드와 다른 점이 되겠습니다.
PASSWORD 의 사용 예는 다음과 같습니다.
값을 입력해 보시면 아시겠지만 어떤 글자를 입력하더라도 모두 '*' 문자로 보여지게 됩니다.
(MAXLENGTH=10 속성 때문에 최대 10글자 까지만 입력된다는 사실도 잊지 말아주세요.)
3. INPUT TYPE=RADIO
- RADIO 버튼은 여러개의 보기 중에서 단 하나만을 선택할 때 사용하는 방식입니다.
(중,고등 학교 시절 사지선다 때문에 골치가 지끈지끈 했던 기억이 문득... ^^)
이 RADIO 버튼에도 몇가지 속성이 있는데요. 그 내용은 다음과 같습니다.
3.1 NAME - 이 보기들의 이름을 의미합니다. 하지만 한가지 기억하셔야 할 것은 만약 보기를
다섯 개 사용한다고 가정하면 그 다섯개의 NAME 을 모두 같게 해줘야 한다는 점입니다.
(그래야만 같은 내용의 보기로 인정하게 되는 것입니다.)
3.2 VALUE - 이 보기의 고유 값으로서, 다음 페이지로 전달되는 실제 값입니다.
(텍스트 필드에서의 VALUE 속성과는 의미가 다르다는 점에 주목해 주시기 바랍니다.)
3.3 CHECKED - 이 속성을 지정하면 그 보기에는 미리 체크되어 있게 됩니다.
그러면 RADIO 버튼의 사용 예도 한번 보도록 할까요?
보시는 것처럼 다섯 개의 보기를 나열해 보았습니다.
이 중에서 1번 보기에 CHECKED 속성을 사용해서 미리 선택되어 보이게끔 설정했고요.
다른 보기를 클릭하시면 기존에 선택된 보기가 해제되는 것을 확인하실 수 있겠습니다.
4. INPUT TYPE=CHECKBOX
- CHECKBOX 는 어떤 항목을 선택할 것인지 선택하지 않을 것인지 결정할 때 사용합니다.
(마우스로 한번 클릭하면 선택이 되고, 다시 클릭하면 선택한 것이 해제 됩니다.
이때 선택을 한 경우에는 VALUE 에서 설정한 값이 정보를 받는 페이지로 넘어가게 되고,
선택을 하지 않은 경우에는 아무 값도 넘어가지 않게 됩니다.)
나머지 속성 및 사용 방법은 대체로 RADIO 버튼과 일치합니다만, 한가지!
RADIO 버튼은 각 보기들의 NAME 이 모두 일치했던 것에 비해서,CHECKBOX 는 서로
연관성이 없기 때문에 NAME 이 틀리다는 사실 정도는 알아두시면 좋겠습니다.
이 CHECKBOX 의 사용 예 역시 안보고 넘어가면 섭섭하겠지요? ^^
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가지 방법에 대해서 알아보았는데요.
여러분들께서 웹 서핑을 많이 해 보셔서 아시겠지만.. 이 방식들은 상당히 자주,
그리고 거의 필수적으로 사용되므로 그 사용법을 꼭! 알아두시는 것이 좋겠습니다.
자.. 이것으로서 길었던 오늘의 강좌도 여기서 줄이도록 하겠습니다.
어느덧 여름도 마지막인데요.. 여름의 마무리 잘 하시고요.
다음 강좌때 반갑게 또 뵙도록 하겠습니다. 그럼 안녕히 계세요~. ^^
|
|
authored by
|
:{3} 
({4})