서버, 클라이언트
폼을 이해하기 위해서는 우선 서버와 클라이언트라는 개념을 이해해야 한다. 서버는 정보를 제공하는 쪽이고, 클라이언트는 정보를 제공 받는 쪽을 의미한다. 웹브라우저의 주소창에 생활코딩의 홈페이지인 http://opentutorials.org를 입력하면 웹브라우저는 opentutorials.org에 해당하는 컴퓨터에게 생활코딩 컨텐츠를 요청한다. 이 맥락에서 웹브라우저는 정보를 요청하는 쪽 다시 말해서 제공 받는 쪽이기 때문에 클라이언트가 되고, opentutorials.org의 컨텐츠를 제공하는 컴퓨터는 정보를 제공하기 때문에 서버가 된다.
아래 그림은 서버와 클라이언트의 관계를 나타낸 것이다.
폼 (form)
폼이란 사용자의 데이터를 서버에 전송하는 방법이다. 일반적으로 아래와 같은 작업을 하기 위해서는 폼을 이용한다.
- 로그인을 위해서 아이디/비밀번호를 입력할 때
- 회원가입을 하기 위해서 개인정보를 입력할 때
- 블로그나 게시판에 글을 작성하거나, 파일을 전송할 때
문법
form의 문법은 아래와 같다. <form> 태그 안쪽에 텍스트를 입력 받는 텍스트 필드나, 원하는 항목을 선택 할 수 있는 라디오 버튼등이 위치한다. 이러한 요소들을 컨트롤 (control)이라고 부른다. 사용자가 컨트롤을 조작한 후에 전송 버튼을 누르면 <form> 태그의 속성인 action에 기술된 URL로 사용자가 입력한 정보를 전송한다. 서버는 이 정보를 받아서 저장하거나, 계산된 결과를 보여주는 등의 작업을 수행하게 된다.
1 2 3 | < form action = "서버로 전송한 데이터를 수신할 URL" method = "데이터를 전송하는 방법" > 텍스트 필드, 라디오 버튼, 체크 박스와 같은 컨트롤을 생성하는 태그 </ form > |
- action : 사용자가 입력한 데이터를 전송할 서버의 URL
- method : 사용자가 입력한 데이터를 전송하는 방법으로 아래와 같은 방식이 있다.
- get : action에 입력한 URL에 파라미터의 형태로 전송
- post : header의 body에 포함해서 전송
GET과 POST의 차이점
GET
- URL에 정보가 담겨서 전송된다.
- 전송할 수 있는 정보의 길이가 제한되어 있다.
- 퍼머링크로 사용될 수 있다.
POST
- header의 body에 담겨서 전송된다.
- URL 상에 전달한 정보가 표시되지 않는다.
- GET에 비해서 보안상 약간의 우위에 있다. (사실상 동일하다)
- 전송할 수 있는 데이터의 길이 제한이 없다.
- 퍼머링크로 사용할 수 없다.
- 서버 쪽에 어떤 작업을 명령할 때 사용한다.
(데이터의 기록, 삭제, 수정 등)
예제
example1.html - 사용자가 입력한 정보를 서버로 전송하는 예제 (github)
1 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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | < html > < head > < meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" > </ head > < body > < fieldset > < legend > GET </ legend > < form action = "./example2.php" method = "GET" > < p > 닉네임 : < input type = "text" name = "nickname" /> < br /> </ p > < p > 직업 : < select name = "job" > < option value = "designer" >디자이너</ option > < option value = "programmer" >프로그래머</ option > < option value = "planner" >기획자</ option > </ select > </ p > < input type = "submit" value = "전송" /> </ form > </ fieldset > < fieldset > < legend > POST </ legend > < form action = "./example2.php" method = "POST" > < p > 닉네임 : < input type = "text" name = "nickname" /> < br /> </ p > < p > 직업 : < select name = "job" > < option value = "designer" >디자이너</ option > < option value = "programmer" >프로그래머</ option > < option value = "planner" >기획자</ option > </ select > </ p > < input type = "submit" value = "전송" /> </ form > </ fieldset > </ body > </ html > |
example2.php - 사용자가 전송한 데이터를 받아서 화면에 표시해주는 예제 (github)
1 2 3 4 5 6 7 8 9 10 | < html > < head > < meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" > </ head > < body > <? php echo $_REQUEST['nickname'].'님의 직업은 '.$_REQUEST['job'].'이군요!'; ?> </ body > </ html > |
참고
- get과 post의 차이점 (Outside's DEV Story)
- 크롬 개발자 도구 Network 모니터링 사용법