웹마스터 팁
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
중간중간에 한번씩 종합하는 예제를 하나 만들어 볼께요.. 그럼 이해가 좀 쉬울 겁니다.
말만 어렵지 예제 보면 금방 이해하실 겁니다.
제목 | 글쓴이 | 날짜 |
---|---|---|
오늘 시험문제인 카드맞추기 게임..^^ [12] | {동준짱} | 2002.05.18 |
테이블 정렬. 상하로 딱 가운데에 맞춰지지 않을때... [2] | :: N.styLE :: | 2002.05.18 |
DHTML의 시작 - Form에 대해 (3) - Button, Select 엘리먼트 [1] | Legend | 2002.05.16 |
ActiveX control... [4] | ☆봄비ㆀ | 2002.05.11 |
iframe태그.. HTML문서안에 또하나의 HTML문서.. [9] | 신종은 | 2002.05.09 |
DHTML의 시작 - Form 예제 (폼처리 HTML) | Legend | 2002.05.09 |
하이텔에서 가져오는 서울특별시와 광역시 날씨 [3] | 김희섭 | 2002.04.30 |
배경음악과 동영상 삽입 <embed> [7] | 제이지라 | 2002.04.26 |
DHTML의 시작 - Typing 스크립트 (예제) [2] | Legend | 2002.04.19 |
DHTML의 시작 - Form에 대해 (2) - input 엘리먼트 [5] | Legend | 2002.04.18 |
DHTML의 시작 - Form에 대해 (1) [2] | Legend | 2002.04.14 |
DHTML의 시작 - CSS와 객체 관계 [2] | Legend | 2002.04.12 |
이미지에 DHTML로 테두리를 만들어보자..포토샵 저리가라~~ [4] | ZipShin | 2002.04.11 |
DHTML의 시작 - HTML 구조 및 자바스크립트 객체지정법 [4] | Legend | 2002.04.11 |
투명한 아이프레임 [15] | 파야 | 2002.04.04 |
점선테이블..만들기 [6] | 각설탕 | 2002.03.31 |
엔지오식 레이어 메뉴 구성하기 (허접) [3] | 정영순 | 2002.03.28 |
유군 스타일 웹사이트 제작법 [15] | 유군-_-)/ | 2002.03.20 |
스크롤바 색상을 이쁜것만 모와요 [6] | ZipShin | 2002.03.16 |
인코딩 정보 일본어, 중국어, 스페인어 [3] | 탐그루 | 2002.03.16 |