form 태그를 이용한 POST 요청 인코딩 타입 속성 3가지

HTML form 태그의 enctype 속성 3가지

HTML form 태그를 이용하여 특정 서버에 POST 요청을 통해 HTTP 요청 메시지 바디에 데이터(form data)를 보낼 경우 인코딩 타입을 지정할 수 있는데, 이때 form 태그의 enctype 속성을 이용할 수 있다. enctype의 속성 값 즉, 인코딩 타입은 다음과 같이 3개의 타입이 할당될 수 있다.

 

1. application/x-www-form-urlencoded

2. multipart/form-data

3. text/plain

 

※ 참고 : form 태그의 enctype에 대한 정의들

 

1. The enctype attribute of the FORM element specifies the content type used to encode the form data set for submission to the server.

 - https://www.w3.org/TR/html401/interact/forms.html#h-17.13.4.1 

 

2. The enctype attribute specifies how the form-data should be encoded when submitting it to the server.

 - https://www.w3schools.com/tags/att_form_enctype.asp

 

3. The enctype property is the MIME type of content that is used to submit the form to the server.

 - https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/enctype

 

속성 1. application/x-www-form-urlencoded

우선 application/x-www-form-urlencoded의 경우 &으로 분리되고 '=' 기호로 키(key)와 값(value)을 연결하는 'tuple' 형태로 인코딩하는 방식이다. 이때 숫자나 영어 알파벳이 아닌 문자들(한글, 특수문자 등)의 경우 퍼센트 인코딩(percent encoded)이 되며 이미지 등의 파일 전송 시 사용되는 바이너리 데이터에 사용하기는 적절치 않다. form 태그의 enctype 속성을 별도로 지정해주지 않으면 기본적으로(default) 해당 속성의 인코딩 타입이 지정된다.

 

예를 들어 다음과 같이 회원 가입을 위한 사용자 입력 정보란을 나타내는 form 태그가 있다고 해보자.

 

<form method="post" action="/user/create">
    <div>
        <label for="userId">사용자 아이디</label>
        <input id="userId" name="userId">
    </div>
    <div>
        <label for="password">비밀번호</label>
        <input type="password" id="password" name="password">
    </div>
    <div>
        <label for="name">이름</label>
        <input id="name" name="name">
    </div>
    <div>
        <label for="email">이메일</label>
        <input type="email" id="email" name="email">
    </div>
    <button type="submit">회원가입</button>
</form>

 

이 경우 별도로 enctype을 지정해주지 않았으므로 인코딩 타입은 application/x-www-form-urlencoded이 될 것이다. 이때 사용자 아이디, 비밀번호 등 각각의 값별로 다음과 같은 값들을 할당해준 후 서버에 전송해보자.

 

사용자 아이디 : ikjo

비밀번호 : 1234

이름 : 익조

이메일 : ikjo@tistory.com

 

서버 단에서 해당 요청을 받았을 때 메시지 본문의 데이터(byte stream)를 character stream으로 변환 후 아무런 디코딩 작업 없이 이를 문자열로 출력하게 되면 다음과 같은 결과가 나올 것이다.

 

사용자 아이디 : ikjo → ikjo

비밀번호 : 1234 → 1234

이름 : 익조 → %EC%9D%B5%EC%A1%B0

이메일 : ikjo@tistory.com → ikjo%40tistroy.com

 

숫자나 영어가 아닌 문자들의 경우 퍼센트 인코딩된 것을 확인할 수 있다.또한 이 경우 HTTP 요청 메시지 본문은 다음과 같은 형태가 될 것이다.

 

POST /user/create HTTP/1.1
Host: localhost:8080
Content-Type: application/x-www-form-urlencoded

 

userId=ikjo&password=1234&name=%EC%9D%B5%EC%A1%B0&email=ikjo%40tistroy.com

 

속성 2. multipart/form-data

그 다음 multipart/form-data의 경우 이미지 등 파일 데이터 즉, 바이너리 데이터를 서버에 전송하는 경우 사용되는 인코딩 방식이다. 예를 들어 다음과 같이 간단한 사용자 정보와 이미지 파일을 서버에 전송할 수 있는 form 태그가 있다고 해보자.

 

<form method="post" action="upload" enctype="multipart/form-data" accept="image/*">
  <input type="text" name="name">
  <input type="email" name="email">
  <input type="file" name="file">
  <button type="submit">제출</button>
</form>

 

각각의 입력란에 값을 입력하고 적당한 이미지 파일을 업로드 한 이후 submit 버튼을 클릭하면 HTTP 요청 메시지 본문에 다음과 같은 형식으로 데이터가 전송될 것이다.

 

POST /upload HTTP/1.1
Host: localhost:8080
Content-Type: multipart-form-data; boundary=-----XXX
...
(empty line)
-----XXX
Content-Disposition: form-data; name="name"

ikjo
-----XXX
Content-Disposition: form-data; name="email"

ikjo@example.com
-----XXX
Content-Disposition: form-data; name="file"; filename="ikjo.png"
Content-Type: image/png

109238a...
-----XXX--​

 

이때 각각의 파라미터 값은 boundary 값(-----XXX)으로 나뉘어지며 맨 마지막에는 boundary 값 끝에 --가 추가된 것을 확인할 수 있다. 이처럼 boundary로 form 태그 내 각각의 파라미터 값들이 여러 파트로 나뉘어진다는 의미에서 해당 enctype은 multipart/form-data이기도 하다.

 

참고로 Ajax를 통해 서버에 이미지 파일을 전송하는 방법에 대한 자세한 내용은 다음 글을 참고해볼 수 있다.

 

서버에 이미지 파일 전송하기(feat. FormData, Ajax)

 

속성 3. text/plain

마지막으로 text/plain 인코딩 타입의 경우 공백 문자(space)만 + 기호로 변환하는 인코딩 방식이다. 그 외의 문자는 인코딩이 되지 않은 채로 서버로 전송된다.