FORM 태그란?
정의:
웹상에서 사용자 정보를 입력하는 여러(text, button, checkbox, file, hidden, image, password, radio, reset, submit)방식의 영역을 제공하며, 사용자로부터 할당된 데이터를 서버로 전송하는 역활을 담당한다.
어트리뷰트:
id: 객체를 대표하는 인식 자(id 값은 페이지당 하나씩만 존재할 수 있습니다.)를 지정하거나 반환합니다.
보통 CSS나 자바스크립트 코드에서 해당 객체를 제어하기 위해 지정합니다.
-
css code: #id
-
javascript code: document.getElementById('id');
name: 객체의 이름을 지정하거나 반환합니다.
지정된 name 속성을 통해 자바스크립트 코드에서 아래와 같이 접근 가능합니다.
-
document.login;
-
document.login.id;
-
document.login.pass;
action: 객체가 서버로 전송되는 주소를 지정하거나 반환합니다.
- 이메일 주소("mailto:yanione@google.com")방식으로도 전송 가능합니다.(이 부분에 대해서는 테스트를 통해 더 자세히 알아보도록 하겠습니다.)
method: 서버에 데이터를 전송하기 위한 메시지 전송 방식을 지정하거나 반환합니다. 지정 가능한 method로는 head, trace, put, delete, connect가 있습니다.
method 방식에 대한 참고 사이트
@W3C
http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html
@그린세상님의 이글루
http://dialup.egloos.com/139627
대표적인 전송 방식으로는 get, post 방식이 있으며, 이 두 방식의 가장 큰 차이점으로는 데이터의 길이 제한과 노출방식에 있습니다.
GET 전송 방식:
길이 제한:
서버로 전송될 주소의 파라메터 문자열(a='b')에 대한 길이 제한이 존재합니다.
파라메터 제한 길이는 2048바이트를 가집니다.
- 파라메터 길이 계산
URL: http://google.co.kr?a=test&b=test
위 주소 형식의 파라메터 길이는?
http://google.co.kr(주소) 및 각 파라메터를 구분 짓는 특문('?', '&')을 뺀 나머지를 계산합니다.
길이: 12바이트입니다.
노출방식:
파라메터 문자열은 주소에 포함되며, 그에 따른 형식은 아래와 같습니다.
https://www.google.co.kr/?sclient=psy-ab&hl=ko&newwindow=1&site=&source=hp&q=mohwa&oq=mohwa&aq=f
https://www.google.co.kr/(주소)
?sclient=psy-ab&hl=ko&newwindow=1&site=&source=hp&q=mohwa&oq=mohwa&aq=f(파라메터)
POST 전송 방식:
길이 제한:
주소 길이를 제외한 키와 쌍으로 이루어진 파라메터 문자열에 대한 길이 제한은 존재하지 않습니다.
노출방식:
파라메터 문자열은 외부로 노출되지 않습니다. 만약, 파라메터 문자열을 확인하기 위해서는 별도의 프로그램(wire shark, http watch)사용하여 전송 데이터를 확인할 수 있습니다.
enctype: 지정된 서버 주소로 요청 Content-Type(MIME(Multipurpose Internet Mail Extensions))을 지정하거나 반환합니다.
대표적인 Content-Type으로는 일반 문자열 전송 시 쓰이는 "application/x-www-form-urlencoded" 타입 과 파일 전송 시 쓰이는 "multipart/form-data" 가 존재합니다.
또한, GET 전송 방식은 HTTP Header Content-Type이 존재하지 않습니다.
더 자세한 설명은 아래 Content-Type에 대한 링크를 참조 하시기 바랍니다.
http://mohwaproject.tistory.com/entry/HTTPS%EB%9E%80
onsubmit(이벤트):
Input 태그의 전송 타입인("submit", "image")버튼 및 Enter키 를 클릭 시 객체(FORM)가 포함하는 모든 사용자 입력 필드의 데이터를 지정된 서버 주소로 전송하는 이벤트 입니다.
만약, 자바스크립트 핸들러가 해당 이벤트에 할당 되었다면, 할당된 자바스크립트 코드가 실행됩니다.
더 자세한 설명은 아래 "Form 객체의 기본 이벤트를 막는 방법"에 대한 링크를 참조 하시기 바랍니다.
아래는 지금까지 설명드린 FORM 객체의 속성값에 대한 변화를 상황 별로 테스트한 예제입니다.
로그인 시 쓰이는 공통 자바스크립트 코드
-
var Member = (function(){
-
-
-
return new (function(){
-
-
function init(){
-
-
return this;
-
}
-
-
init.prototype = {
-
login: login
-
};
-
-
-
return init;
-
-
}());
-
-
-
function login(f){
-
-
var id = document.getElementById('id');
-
var pass = document.getElementById('pass');
-
-
if (!id.value || !pass.value) return false;
-
}
-
-
-
})();
1. method = post, enctype = "application/x-www-form-urlencoded"
로그인 코드:
-
<form id="login" method="post" target="login_frm" action="http://naver.com" enctype="application/x-www-form-urlencoded" onsubmit="return Member.login(this)">
-
<fieldset>
-
<input type="text" id="id" name="id" />
-
<input type="password" id="pass" name="pass" />
-
</fieldset>
-
<input type="submit" value="폼제출" />
-
</form>
-
-
로그인폼:
Form 객체에 할당된 서버로 전송 시 변화
- 해당 코드와 같이 Form 객체에 정의된 어트리뷰트값이 아래와 같이 적용되어있습니다.
위에서 언급한 바와같이 POST 전송 방식은 파라메터가 문자열이 외부(주소)로 노출되지 않습니다.
전송된 POST 파라메터 문자열(데이터)
2. method = post, enctype = "multipart/form-data"
로그인 코드:
Form 객체에 할당된 서버로 전송 시 변화
- 아래의 목록 중 Content-Type을 제외한 나머지 모두가 이전 방식과 동일합니다.
3. method = get, enctype = "application/x-www-form-urlencoded"
로그인 코드
-
<form id="login" name="login" method="get" target="login_frm" action="http://naver.com" enctype="application/x-www-form-urlencoded" onsubmit="return Member.login(this)">
-
<fieldset>
-
<input type="text" id="id" name="id" />
-
<input type="text" id="pass" name="pass" />
-
</fieldset>
-
<input type="submit" value="폼제출" />
-
</form>
-
로그인폼:
Form 객체에 할당된 서버로 전송 시 변화
- 해당 코드와 같이 Form 객체에 정의된 어트리뷰트값이 아래와 같이 적용되어있습니다.
위에서 언급한 바와같이 GET 전송 방식은 파라메터가 문자열이 외부(주소)로 노출됩니다.
전송된 GET 파라메터 문자열(데이터)
4. method = get, action = "mailto:yanione@nate.com(메일)", enctype = "application/x-www-form-urlencoded"
로그인 코드
-
<form id="login" name="login" method="post" target="login_frm" action="mailto:yanione@google.com" enctype="application/x-www-form-urlencoded" onsubmit="return Member.login(this)">
-
<fieldset>
-
<input type="text" id="id" name="id" />
-
<input type="text" id="pass" name="pass" />
-
</fieldset>
-
<input type="submit" value="폼제출" />
-
</form>
-
-
로그인 폼
Form 객체의 action 속성에 Mail 방식을 정의하면 아래와 같은 메시지가 반환됩니다.
