웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
DHTML의 시작 - Form에 대해 (1)
2002.04.14 20:30
DHTML에서 폼은 그리 많이 사용되지 않지만 Form에 대한 내용을 요청하신 분이 계셔서 한번 폼에 대해 함 알아보지요.
폼 구성요소는 다음에 하기로 하고 일단 form에서 사용되는 속성과 메쏘드 그리고 기타 내용을 살펴보도록하지요.
[action = uri]
이 속성은 폼을 처리하는 에이전트를 지정하는 속성이지요.
자바스크립트 처리를 위해서는 javascript:함수로 쓰고 메이일 보내기에선 mailto: 이렇게도
사용이 가능하지요.
[method = get | post]
이 속성은 폼 데이터를 송신하는데 어떤 HTTP 방법을 사용 할 것인가를
지정하는 것이지요. 다들 아시리라 넘어갑니다.
[enctype = content-type]
이 속성은 method의 값이 "post"일 때, 폼을 서버에 송신하는데 사용되는 컨텐트 타입을
지정합니다. 지정하지 않으면 디폴트 값은 "application/x-www-form-urlencoded"로 됩니다. "multipart/form-data"는 INPUT 요소의 속성중 타입을 파일업로드로 지정했을때 사용하지요
[accept-charset = charset list]
이 속성은 폼을 처리하는데 서버가 받아야 하는 입력 데이터의 엔코딩 목록을 지정하는데 사용하지요. 자세한 내용을 알구 잡으시면 w3c의 html4.0문서를 디비 보세요.
[accept = content-type-list]
이 속성은 서버의 폼 처리가 바르게 되도록 하는 컴마로 분리 된 컨텐트 타입의 목록을 지정한합니다. 역시 자세한 내용은 w3c의 html4.0 문서를 디비보세요.
[name = cdata]
이 속성은 폼요소에 이름을 주어 스크립트에서 참조하도록 하기 위해 필요한 게지요.
id로 해도 상과은 없습니다.
[target]
요건 머 폼만의 속성은 아니지요.. 폼 처리 에이전트를 띄울 타겟을 지정하는 것이지요.
머 이정도는 다 아시는 거라 생각됩니다..
다음에 폼에서 적용되는 메소드에 대해서도 알아보아야겠지요.
(메쏘드는 객체의 행동을 나타낸다는 것은 다 아시지요? 음.. 모르시면 찾아보세요.. ^^;)
폼의 기능을 생각해보시면 메쏘드는 금방 알수 있을 거에요. 일단 폼이 하는 일은 폼요소의 값들을
폼처리 에이전트로 전달하는 역할을 하므로 그 행동이란 것은 다 작성했으면 보낼꺼냐 아니면 틀렸으니 다시 쓸꺼냐 둘중의 하나겠지요.? 그렇다구요.. 맞아요..
그래서 폼에는 submit(), reset()의 두가지 메쏘드가 있답니다.
다음에 폼에 적용되는 이벤트에 대해서 알아보지요.. 역시 메쏘드와 마찬가지에요.
폼에서 발생되는 이벤트는 생각해보시면 금방 알겠지요. 전송승인시 발생하는 것 하구 재설정시
발생하는 이벤트 2가지가 있겠지요? onsubmit, onreset이 있겠네요.
그럼 저번에 객체 지정법을 배운 것을 토대로 폼을 어떻게 스크립트로 처리하는지 알아보지요.
document.formName, document.forms[index]는 저번에 배운 객체지정법을 기억하고 계시면 금방
알수 있는 부분이지요. index는 폼의 순서를 나타내는 것입니다. 문서중에 첫번째 폼인 경우 0,
두번째일경우 1.. 이런식으로 되는 것이지요.. 그래서 속성과 메쏘드는 아래와 같이 쓰입니다.
document.formName.속성
document.forms[index].속성
document.formName.메쏘드(parameters)
document.forms[index].메쏘드(parameters)
document.forms.length
요 length라는 속성은 폼의 속성은 아니고 요기서는 배열의 속성으로 사용된 것이지요.
배열의 크기를 나타내는 것이지요.. 의미는 문서내의 폼의 갯수를 나타내는 것이지요.
그럼 이제 실제 몇가지 예를 들어 보지요..
일단 속성을 한번 지정해 보지요.
<form>폼 구성요소들...</form>
위가 기본 폼이지요..
달랑 위와 같이 문서에 넣으면 별로 쓸모가 없겠지요?
참 한가지 속성을 빼먹었네요.. elements라는 속성이지요.
elements는 폼의 구성요소를 배열로 담고 있는 속성입니다.
다시 위의 기본폼을 설명해 보지요..
위의 속성들을 이용하는 방법을 함 배워보지요..
회원가입을 함 받는 폼이 있다고 합시다.. 만약에 선택적으로 회원가입 폼을 처리하려고 합니다.
하나의 양식으로 a에 가입할 사람은 a사이트로 b는 b사이트로 가입을 한다고 하면
script로 선택 폼을 주고 그 선택폼을 가지고 action의 속성만을 바꾸어 주면 가능하겠지요.
if (a인가 b인가)
forms[0].action="a를 처리할 에이전트 서버 주소";
else
forms[0].action="b를 처리할 에이전트 서버 주소";
위와 같이 되겠지요.. 머 method역시 마찬가지로 get, post선택적으로 가능하게 바꿀 수도 있지요..
다음으로 메쏘드를 이용할 경우 하나의 폼을 처리하고 다시 그 내용을 가지고 다른 폼을 처리한다고 합시다.
get의 경우는 간단히 url에 값을 붙여서 보내지만 post방법은 좀 어렵지요.
그럴경우는 이전에 넘겨받은 내용으로 폼 구성요소에 값을 넣은후
그냥 스크립트로 formName.submit()해서 다음 에이전트로 넘겨주는 것도 가능하지요.
이 과정에서 약간의 데이터도 수정 및 첨가도 가능하지요.
(데이터 베이스의 구조 수정이 어려운 경우 이런 중간 과정으로 구조 수정이 아니라 데이터 조작으로 구조수정을 대신 할 수 있겠지요)
비슷한 방법으로 강제로 폼값을 지워버리는 것도 가능하지요.
대략적으로 폼에 대한 내용을 알아보았네요.
직접 하나씩 만들어 보시면 금방 이해하실 겁니다.
폼 구성요소들에 대해서는 다음에 시간이 나면 이어서 하도록 하지요.
머 궁금한 내용은 코멘트 남겨주시구요..
폼 구성요소는 다음에 하기로 하고 일단 form에서 사용되는 속성과 메쏘드 그리고 기타 내용을 살펴보도록하지요.
[action = uri]
이 속성은 폼을 처리하는 에이전트를 지정하는 속성이지요.
자바스크립트 처리를 위해서는 javascript:함수로 쓰고 메이일 보내기에선 mailto: 이렇게도
사용이 가능하지요.
[method = get | post]
이 속성은 폼 데이터를 송신하는데 어떤 HTTP 방법을 사용 할 것인가를
지정하는 것이지요. 다들 아시리라 넘어갑니다.
[enctype = content-type]
이 속성은 method의 값이 "post"일 때, 폼을 서버에 송신하는데 사용되는 컨텐트 타입을
지정합니다. 지정하지 않으면 디폴트 값은 "application/x-www-form-urlencoded"로 됩니다. "multipart/form-data"는 INPUT 요소의 속성중 타입을 파일업로드로 지정했을때 사용하지요
[accept-charset = charset list]
이 속성은 폼을 처리하는데 서버가 받아야 하는 입력 데이터의 엔코딩 목록을 지정하는데 사용하지요. 자세한 내용을 알구 잡으시면 w3c의 html4.0문서를 디비 보세요.
[accept = content-type-list]
이 속성은 서버의 폼 처리가 바르게 되도록 하는 컴마로 분리 된 컨텐트 타입의 목록을 지정한합니다. 역시 자세한 내용은 w3c의 html4.0 문서를 디비보세요.
[name = cdata]
이 속성은 폼요소에 이름을 주어 스크립트에서 참조하도록 하기 위해 필요한 게지요.
id로 해도 상과은 없습니다.
[target]
요건 머 폼만의 속성은 아니지요.. 폼 처리 에이전트를 띄울 타겟을 지정하는 것이지요.
머 이정도는 다 아시는 거라 생각됩니다..
다음에 폼에서 적용되는 메소드에 대해서도 알아보아야겠지요.
(메쏘드는 객체의 행동을 나타낸다는 것은 다 아시지요? 음.. 모르시면 찾아보세요.. ^^;)
폼의 기능을 생각해보시면 메쏘드는 금방 알수 있을 거에요. 일단 폼이 하는 일은 폼요소의 값들을
폼처리 에이전트로 전달하는 역할을 하므로 그 행동이란 것은 다 작성했으면 보낼꺼냐 아니면 틀렸으니 다시 쓸꺼냐 둘중의 하나겠지요.? 그렇다구요.. 맞아요..
그래서 폼에는 submit(), reset()의 두가지 메쏘드가 있답니다.
다음에 폼에 적용되는 이벤트에 대해서 알아보지요.. 역시 메쏘드와 마찬가지에요.
폼에서 발생되는 이벤트는 생각해보시면 금방 알겠지요. 전송승인시 발생하는 것 하구 재설정시
발생하는 이벤트 2가지가 있겠지요? onsubmit, onreset이 있겠네요.
그럼 저번에 객체 지정법을 배운 것을 토대로 폼을 어떻게 스크립트로 처리하는지 알아보지요.
document.formName, document.forms[index]는 저번에 배운 객체지정법을 기억하고 계시면 금방
알수 있는 부분이지요. index는 폼의 순서를 나타내는 것입니다. 문서중에 첫번째 폼인 경우 0,
두번째일경우 1.. 이런식으로 되는 것이지요.. 그래서 속성과 메쏘드는 아래와 같이 쓰입니다.
document.formName.속성
document.forms[index].속성
document.formName.메쏘드(parameters)
document.forms[index].메쏘드(parameters)
document.forms.length
요 length라는 속성은 폼의 속성은 아니고 요기서는 배열의 속성으로 사용된 것이지요.
배열의 크기를 나타내는 것이지요.. 의미는 문서내의 폼의 갯수를 나타내는 것이지요.
그럼 이제 실제 몇가지 예를 들어 보지요..
일단 속성을 한번 지정해 보지요.
<form>폼 구성요소들...</form>
위가 기본 폼이지요..
달랑 위와 같이 문서에 넣으면 별로 쓸모가 없겠지요?
참 한가지 속성을 빼먹었네요.. elements라는 속성이지요.
elements는 폼의 구성요소를 배열로 담고 있는 속성입니다.
다시 위의 기본폼을 설명해 보지요..
위의 속성들을 이용하는 방법을 함 배워보지요..
회원가입을 함 받는 폼이 있다고 합시다.. 만약에 선택적으로 회원가입 폼을 처리하려고 합니다.
하나의 양식으로 a에 가입할 사람은 a사이트로 b는 b사이트로 가입을 한다고 하면
script로 선택 폼을 주고 그 선택폼을 가지고 action의 속성만을 바꾸어 주면 가능하겠지요.
if (a인가 b인가)
forms[0].action="a를 처리할 에이전트 서버 주소";
else
forms[0].action="b를 처리할 에이전트 서버 주소";
위와 같이 되겠지요.. 머 method역시 마찬가지로 get, post선택적으로 가능하게 바꿀 수도 있지요..
다음으로 메쏘드를 이용할 경우 하나의 폼을 처리하고 다시 그 내용을 가지고 다른 폼을 처리한다고 합시다.
get의 경우는 간단히 url에 값을 붙여서 보내지만 post방법은 좀 어렵지요.
그럴경우는 이전에 넘겨받은 내용으로 폼 구성요소에 값을 넣은후
그냥 스크립트로 formName.submit()해서 다음 에이전트로 넘겨주는 것도 가능하지요.
이 과정에서 약간의 데이터도 수정 및 첨가도 가능하지요.
(데이터 베이스의 구조 수정이 어려운 경우 이런 중간 과정으로 구조 수정이 아니라 데이터 조작으로 구조수정을 대신 할 수 있겠지요)
비슷한 방법으로 강제로 폼값을 지워버리는 것도 가능하지요.
대략적으로 폼에 대한 내용을 알아보았네요.
직접 하나씩 만들어 보시면 금방 이해하실 겁니다.
폼 구성요소들에 대해서는 다음에 시간이 나면 이어서 하도록 하지요.
머 궁금한 내용은 코멘트 남겨주시구요..
댓글 2
-
엔카일
2002.04.14 20:36
어려워지네요-_-;; -
Legend
2002.04.14 21:02
중간중간에 한번씩 종합하는 예제를 하나 만들어 볼께요.. 그럼 이해가 좀 쉬울 겁니다.
말만 어렵지 예제 보면 금방 이해하실 겁니다.
제목 | 글쓴이 | 날짜 |
---|---|---|
XE를 홈페이지 루트에 설치하여 BGM 설치가 불가능할 때... [6] | Firstlove | 2011.05.29 |
로그인풀림방지 - 주소 고정하기 [27] | ezi | 2011.05.28 |
웹폰트의 개념과 사용법 [2] | hika1 | 2011.05.26 |
유닉스에서 디스크 용량 체크 후 호출 해주는 프로그램 | 길버트전 | 2011.05.24 |
SSH 지원안하는 웹호스팅에서 빠르게 XE설치하기.
[5]
![]() | DynamicLaser | 2011.05.22 |
드림위버로 FTP 파일 바로 수정하기 : FTP다운로드->수정->FTP업로드 번거러운 수정과정 X
[3]
![]() | Treasurej | 2011.05.21 |
XE 첨부파일 문제로 게시판이 백지화 될때... [1] | 똑디 | 2011.05.20 |
[PHP 기초] 연산자1 | 난다날아 | 2011.05.19 |
모바일레이아웃에서의 통합검색 [11] | 카르마 | 2011.05.19 |
XE 프로젝트 호스팅 SVN 내용을 Google 프로젝트 호스팅으로 이전하기
![]() | 난다날아 | 2011.05.17 |
'왕' '왕초보'를 위한 ZB4-->XE버전으로 이전시 가장 간단한 순서 [1] | 쭈영 | 2011.05.17 |
XE core 1.4.5.7 코드 오류,(상자 위젯 배경 안될때) [2] | 홍성빈닌 | 2011.05.17 |
따른사이트와 내채팅방 연동하기~!<미니온4편>
[7]
![]() | 토끼매니아 | 2011.05.15 |
XE 공식 버튼2 삽입하기
[32]
![]() | 웹엔진 | 2011.05.14 |
th 엘리먼트에 scope 속성 사용
[1] ![]() | 엘카 | 2011.05.14 |
도와 주세요!!! Explorer 6에서는 제대로 보이는데 Explorer 7 이상에서는 사진이 안보여요 [2] | 이영규616 | 2011.05.12 |
서버이전후 캐시파일 재생성 안되시는분들 [2] | 우냠냠 | 2011.05.11 |
youtube (유튜브) 동영상 block없이 게시판에 embed 하기 [23] | 쏘프티 | 2011.05.10 |
회원 관리자 두기.. | DaKi | 2011.05.09 |
CafeXE에서 마이카페 목록을 셀렉트 박스로 바꾸기
![]() | 늘푸른이 | 2011.05.07 |