HTML form 태그를 사용하여 데이터 전송하기

form 태그를 이용해 어떤 데이터들을 전송할 수 있나요?

이전 포스팅([웹개발 HTML] 사용자가 입력할 수 있는 UI 만들기 )에서 input 태그 등을 이용해 사용자가 데이터를 입력할 수 있는 다양한 인터페이스들을 만드는 법을 살펴봤습니다. 여기서 조금의 응용을 더하면 사용자와 웹은 서로 입출력한 데이터를 주고받으며 상호작용을 할 수 있습니다.

예를 들어볼까요? 혹시 mbti 검사를 해본 적이 있을지 모르겠습니다. 저는 최근에 mbti 검사를 웹사이트에서 해본 적이 있는데요. 사용자가 문항마다 답을 선택하면(select UI) 웹에서 결과를 계산하여 최종 결과 페이지를 사용자에게 보여줍니다.

이렇게 사용자가 입력한 데이터를 웹에서 처리하는 것은 처리하는 장소에 따라 크게 두 가지로 구분할 수 있는데요. 브라우저(클라이언트) 내에서 처리하는 방식과 웹 서버에서 처리하는 방식이 있습니다. 전자의 경우는 form 태그를 사용하지 않고 자바스크립트만으로 브라우저 내에서 계산해서 필요한 내용을 업데이트해서 보여주는 방식입니다. Single Page Application으로 만들어진 웹에서 이런 방식을 많이 사용합니다. 서버에서 처리하는 방식은 form 태그를 많이 사용합니다. (form 태그를 사용하지 않는 ajax 기술도 있습니다.) form 태그를 사용하면 form 태그에 사용자가 입력한 데이터를 담아 서버에 전송하고, 서버에서 처리한 결과를 응답받아 브라우저가 새로운 액션을 취합니다. 예를 들어 로그인 form에서 id와 password를 입력하여 form에 데이터를 담아 서버에 전송하면 서버에서 로그인 처리를 하여 응답을 해주고 브라우저는 응답을 받아 로그인된 상태로 변경해줍니다.

이렇듯 form 태그는 클라이언트에서 서버로 데이터를 보내는 역할을 하는 태그입니다.

form 태그 사용 기본 예제

form 태그를 이용해 간단한 로그인 폼을 만들어서 아이디와 비밀번호를 입력하고 서버에 로그인 요청을 보낼 수 있는 HTML 코드를 작성해볼까요? 연습용 폴더를 하나 만들고 그 폴더 안에 index.html 파일과 result.html 파일을 만들어준 후 다음 코드를 따라 해 봅니다.

- index.html

<form action="./result.html" name="loginForm" method="get">
    <p>id: <input type="text" name="id" /></p>
    <p>password: <input type="password" name="password" /></p>
    <input type="submit" value="log in" />
</form>

- result.html

<span>login succeeded</span>

이제 index.html을 크롬 등의 브라우저를 이용해 실행해줍니다. 다음과 같이 생긴 로그인 폼이 잘 나오나요?

로그인 폼이 조금 못생겼긴 하지만 이것은 나중에 CSS를 사용하여 예쁘게 만들어줄 수 있습니다.

아이디와 비밀번호를 치고 로그인 버튼을 눌러봅시다. login succeeded라고 출력되는 화면으로 잘 이동되나요?

자 이제 크롬 브라우저의 개발자 도구를 켠 채 똑같이 아이디, 비밀번호를 입력하고 로그인 전송 버튼을 누르는 절차를 진행해봅시다. 정확하게는 개발자 도구에서 Network탭을 보고 싶습니다. 앞서 도입부에 말씀드렸지만 form 태그는 서버에 데이터를 전송하고, 그 기록은 Network탭에서 볼 수 있기 때문입니다.

로그인 요청이 성공적으로 처리가 되었기 때문에 Status는 200으로 나옵니다. 해당 라인을 클릭해 상세한 내용을 볼까요?

ip주소와 디렉토리명은 보안 상 가렸습니다. Request URL은 요청을 보낸 주소를 의미합니다. form 태그의 action 속성에 지정된 값이죠. result.html? 옆에 id=cocoder&password=1234는 제가 전송을 누르기 전에 input에 입력한 데이터입니다. 물음표(?) 옆에 있는 문자열을 쿼리 스트링(query string)이라고 하는데요. get방식의 요청은 이렇게 데이터를 쿼리 스트링에 담아서 보냅니다.

브라우저의 주소창을 보면 실제로 그 값이 그대로 출력되고 있음을 알 수 있습니다. 이런.. 입력한 아이디와 비밀번호가 주소창에 노출된다니.. 위험하죠? 그래서 이렇게 주소창에서의 노출을 피하려면 post방식으로 데이터를 보내야 합니다. form 태그의 method 속성의 값을 get에서 post로 바꿔봅니다.

그리고 똑같이 로그인 시도를 해봅니다. 그런데 잘되지 않고 에러가 뜰 것입니다. post방식에 대한 보안 설정이 안 돼있기 때문인데요. 생 HTML이 아니라 PHP, 자바의 Spring, 루비의 Rails 등 웹 서버를 구축하는 프레임워크들을 이용하여 개발을 하면 post방식에 대한 설정을 프레임워크단의 코드를 이용하여 간단하게 할 수 있습니다. 지금 포스팅은 HTML 만을 보고 있기 때문에 편의상 get방식의 form전송으로 실습을 하고, 실전에서는 이런 경우 post방식을 써야 한다는 사실을 인지하고 넘어가겠습니다.

뭔가 기본적인 예제지만 너무 많은 개념들이 한꺼번에 쏟아졌죠? 이제 간단한 요약정리를 진행해보겠습니다.

form 태그의 속성과 name 속성

- name: 스크립트나 서버에서 폼을 식별하기 위해 사용하는 폼의 이름

- action: 폼 데이터가 전송되는 요청 주소인 url

- method: 폼 전송 방식 (http 요청 메소드)

- enctype='multipart/form-data': form안에 파일을 첨부한다면 반드시 이 속성을 붙여주세요.

그런데 위의 예제 코드를 살펴보면 form 태그뿐만 아니라 form 태그 안에 있는 input 태그들에도 name속성이 있다는 것을 보실 수 있습니다. input 태그들에도 name을 붙인 이유가 있습니다. form 태그에 담을 데이터는 바로 form 태그에 속해 있는 하위 태그들 중에 name 속성이 붙은 태그들의 value를 담기 때문입니다. name 값이 key의 역할을 하고 value 값이 value의 역할을 하여 key: value 형태로 바인딩되어 form data에 담겨서 처리되는 것이죠.

get방식과 post방식의 대표적인 차이점

1. get 방식의 대표적인 특징

- url뒤에 쿼리 스트링(query string) 형태로 form data의 name과 value가 그대로 주소창에 노출됩니다.
- 한번 전송 시 데이터 양은 (url+쿼리 스트링의 글자 수) <= 255자 이내로 제한됩니다.

쿼리 스트링이란?

- url이 끝나는 지점에 ?를 붙고 그 뒤에 parameter=value 형태로 string 이 붙는 것을 말합니다.
- 데이터가 여러 개인 경우 각각의 parameter=value 사이에 &로 구분합니다.
- form으로 데이터를 전송하면 각 태그의 name속성 값이 parameter값이 된다.

2. post 방식의 대표적인 특징

- url에 데이터 노출이 없습니다. query string이 아니라 form data가 request body안에 들어간 채 전송됩니다. (예제에서 살펴봤듯이 크롬 개발자 도구 Network 탭에서 확인해보세요!)
- 한번 전송 시 데이터 양에 제한이 없습니다.

3. post방식에 대한 오해

post 방식은 url 뒤에 쿼리 스트링 형태로 데이터를 노출시키지 않을 뿐이지, 개발자 도구 같은 툴로 데이터를 전부 볼 수 있습니다.
즉, get 방식과 마찬가지로 보안과는 아무런 관련이 없습니다. 따라서 중요한 데이터는 post 방식을 사용하더라도 get 방식과 마찬가지로 보안솔루션을 마련해야 합니다.