[HTML] 폼(form)의 이해 / 데이터 처리 과정 공부하기

폼(form) 요소는 알게 모르게 웹에서 많이 사용한다. 사용자의 정보를 알기 위한 입력할 틀로 사용되기 때문이다.

form 요소를 사용하여 사용자로부터 입력을 받을 수 있고 사용자가 입력한 데이터를 서버로 보낼 때도 form 요소를 사용한다.

 

 

<form action="처리할페이지주소" method="get|post"></form>

 

 

action 속성은 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시한다.

이렇게 전달받은 데이터를 처리하는 스크립트 파일을 폼 핸들러(form-handler)라고 한다.

method 속성은 입력받은 데이터를 서버에 전달할 방식을 명시한다.

 

즉, 사용자가 form 요소를 통해 입력한 데이터는 action 속성에 명시된 위치로 method 속성의 방식으로 전달된다.

 

 

 

 

1. 폼 태그 동작방법

---

1. 폼이 있는 웹 페이지를 방문한다.

2. 폼 내용을 입력한다.

3. 폼 안에 있는 모든 데이터를 웹 서버로 보낸다.

4. 웹 서버는 받은 폼 데이터를 처리하기 위해 웹 프로그램으로 넘긴다.

5. 웹 프로그램은 폼 데이터를 처리한다.

 

6. 처리결과에 따른 새로운 html 페이지를 웹 서버에 보낸다.

7. 웹 서버는 받은 html 페이지를 브라우저에 보낸다.

8. 브라우저는 받은 html 페이지를 보여준다.

 

 

 

 

1. 폼 태그 동작방법 과정 이미지

 

 

2. 폼 태그 속성

---

폼 태그 속성에는 name, action, method, target 등이 있다. 폼 속성을 이용하여 전송할 때 어디로 보내야 하는지

그리고 어떤 방법으로 보낼지 정합니다. 폼 태그 속성은 아래 포스팅으로 클릭하자.

 

 

 

[HTML] form 태그 사용하는 다양한 방법 / 개념잡기

 

 

전송할 http 메소드 종류인 GET과 POST는 브라우저에서 폼 데이터를 가져와 서버로 보내는 똑같은 기능을 수행하지만 방식은 다릅니다. GET은 폼 데이터를 URL 끝에 붙여서 눈에 보이게 보내지만 POST 방식은 내부적으로 보이지 않게 보낸다.

 

 

 

 

위쪽은 get 방식 아래는 post 방식이다.

 

 

 

URL 끝에 데이터를 붙여 보내는 GET 방식은 데이터가 외부에 노출되어 보안에 취약하다. 그래서 보내려는 데이터가 개인정보나 보안을 해야 하는 경우는 POST 방식을 사용해야 합니다.

또한, Http 메소드 정의에서 GET 방식은 지정된 리소스에서 데이터를 요청하는 경우인 읽을 때 사용하는 메소드입니다.

반면 POST 방식은 지정된 리소스에서 데이터를 처리할 경우인 쓰고, 수정, 삭제할 때 사용한다.