HTML - Form을 이해하고 사용하자

이번에는 HTML의 element 중에서 form에 대해 알아보려고 합니다. form은 화면을 개발할 때 div만큼 많이 사용하는 요소 중에 하나입니다. 바로 데이터를 전송하는 데에 있어서 form이 가진 역할이 있기 때문인데요. form이 가진 의미(Semantic)를 생각해본다면 당연한 이야기입니다. 그러면 본격적으로 form을 이해하고 사용하는 방법에 대해 알아보도록 하겠습니다.

HTML의 일반 요소와 Form의 차이

<form action="/message" method="post">
    <div>
        <label for="name">Name:</label>
        <input type="text" id="name" />
    </div>
    <div>
        <label for="mail">E-mail:</label>
        <input type="email" id="mail" />
    </div>
    <div>
        <label for="msg">Message:</label>
        <textarea id="msg"></textarea>
    </div>
</form>

HTML의 form은 무엇일까요? 위에서 제시한 코드를 보았을 때 HTML에서 사용되는 기존 요소들과 form의 차이점은 없습니다. 오히려 사용법이 다르지 않기 때문에 차이를 알 수가 없습니다. HTML의 일반 요소와 form의 가장 큰 차이점은 사용방법이 아니라 쓰임새에 있습니다. form은 단순한 요소가 아니라 사용자(클라이언트)와 웹 서버가 서로 통신하는 기술 중 하나의 방법입니다.

 

 form은 HTML을 작성할 때 주로 사용자에게 정보를 입력받거나 전달받기 위해 사용되는 요소입니다. form에 기입된 값은 submit 이벤트가 발생하면, 정의된 method(유형)으로 action(목적지)에 전송됩니다. 전송된 데이터는 웹 서버에서 처리하고, 결과에 따라 페이지를 이동하거나 알림을 주기도 합니다. 결론적으로 form은 사용자(클라이언트)와 웹 서버 간의 통신을 위해 정의된 HTML 요소입니다.

클라이언트와 서버의 통신

간단하게 그림을 통해서 클라이언트/서버 통신이 무엇인지 확인해보도록 하겠습니다.

클라이언트와 서버간의 통신

 일반적으로 웹은 그림과 같이 사용자(클라이언트)가 서버에 무언가 요청하고 서버가 응답하는 형태를 취합니다. 이를 용어로는 클라이언트/서버 아키텍처라고도 합니다. 이때 요청과 응답에 사용되는 프로토콜은 HTTP 혹은 HTTPS이며, 대부분의 웹 서버는 HTTP(S)를 처리할 수 있도록 만들어져 있습니다.

 

 form은 클라이언트와 서버 간의 통신 방법 중 하나입니다. 사용자가 브라우저 혹은 애플리케이션을 통해 서버에 특정 기능을 요청하고 응답을 받는 과정은 form을 사용하지 않고도 가능합니다.

 

 

데이터를 전달하는 Form

form을 사용해서 서버에 요청을 할 때 중요한 속성은 method와 action입니다. method와 action은 어떤 방식(method)으로 어떤 기능(action)을 요청할지 정의하는 form의 속성입니다.

method 속성

method는 데이터를 어떤 방식으로 전달할지 결정합니다. HTTP protocol 사양은 다양한 방식(PUT, PATCH 등)을 제공하지만,  form은 GET, POST 이 두 가지 방식만 사용할 수 있습니다. GET과 POST의 차이는 데이터를 보낼 때 body가 없느냐(GET), body가 있느냐(POST)가 가장 큰 차이점입니다.

 

GET 방식

<form action="http://hello.com" method="get">
  <input name="message" value="Hello">
  <button>Send a message</button>
</form>

GET 방식을 이용해 HTTP 프로토콜로 데이터를 전달하면 아래와 같습니다.

GET /?message=Hello HTTP/1.1
Host: hello.com

POST 방식

<form action="http://hello.com" method="post">
  <input name="message" value="Hello">
  <button>Send a message</button>
</form>

POST 방식을 이용해 HTTP 프로토콜로 데이터를 전달하면 아래와 같습니다.

POST / HTTP/1.1
Host: hello.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 13

message=Hello

action 속성

action은 어떤 기능을 요청할지 정의합니다. action의 값은 반드시 유효한 URL이어야 합니다. 유효하지 않은 URL을 사용한다면, 정상적으로 기능이 동작하지 않습니다.

 

-. 도메인의 URL을 기준으로 action을 정의하는 방법

<form action="http://hello.com">

-. 상대 경로를 사용해 같은 도메인의 URL을 기준으로 action 정의하는 방법

<form action="/greeting">

끝맺음

form은 클라이언트와 서버 간의 통신에서 중요한 역할을 하는 HTML 요소 중 하나입니다. 어떻게 보면 별 것 아닌 HTML의 요소 일 수 있지만, form이 가진 의미를 알고 사용한다면 조금 더 유용하게 사용할 수 있지 않을까 생각이 들어 이 글을 작성하였습니다. form은 글을 작성하거나 상품 등록과 같은 화면을 만들 때 사용하면 유용합니다. 조금 더 의미를 있게 사용하면 검색 기능에도 활용할 수 있습니다. 구글의 검색 기능도 개발자 툴을 이용해 보시면 form을 사용하고 있다는 것을 알 수 있습니다.

같이 보면 좋은 글

2021.05.19 - [프로그래밍/HTML, CSS] - HTML - 부트스트랩으로 회원가입 양식(Form) 화면 만들기