HTML 폼(<form>)의 enctype 속성과 multipart/form-data 의 의미

HTML 폼을 POST 방식으로 전송할 때는 전송하는 데이터를 인코딩하기 위해 인코딩 타입에 대한 명시가 필요합니다.

인코딩 타입을 명시하는 속성은 "enctype"입니다.

 

"enctype" 은 3가지 속성 값을 사용할 수 있습니다.

 

enctype	용도
multipart/form-data	파일(<input type="file">)이 포함된 폼을 전송할 때 사용.
application/x-www-form-urlcencoded	파일이 없는 폼에 사용. multipart/form-data 를 제외한 모든 경우에 사용. enctype 속성이 없을 때 적용 기본 값.
text/plain	인코딩 없이 전송. 보안성이 없어 디버깅 용도로만 사용해야 함.

 

3개를 제외한 나머지 인코딩 속성 값은 무시됩니다.

 

"text/plain" 은 개발용 외에는 사용하지 않는 것이 좋습니다.

인코딩 없이 문자열을 그대로 전송하기 때문에 보안성이 전혀 없으며, 한글 등 2바이트 문자는 전송 후 글자가 깨지는 현상이 발생해 폼 데이터를 처리하는 페이지에서 정상적으로 데이터를 읽지 못할 수도 있습니다.

 

기본 값은 "application/x-www-form-urlcencoded"입니다. 인코딩 속성(enctype)을 명시하지 않은 POST 방식 폼 전송에 기본 값으로 사용됩니다.

인코딩한 문자열을 GET 방식으로 전송하는 것과 동일한 전송 데이터를 생성하며, POST 방식으로 전송하는 차이만 있습니다. 파일 전송이 없는 모든 경우에 사용합니다.

 

인코딩 타입을 표시한 폼(<form>)은 다음과 같이 작성합니다.

 

<form name="myform" method="post" enctype="multipart/form-data" action="proc.html">
    <input type="file" name="profile">
    <input type="text" name="userid" id="userid" value="">
    <textarea name="comment" id="comment"></textarea>
    <input type="submit" id="submit" name="submit" value="저장">
</form>

 

"multipart/form-data"는 파일 업로드가 없는 폼에도 사용할 수 있습니다.

다만 "multipart/form-data"는 파일 전송을 위해 추가적으로 표시되는 요소들이 있기 때문에, "application/x-www-form-urlcencoded"보다 기본 데이터가 더 커지기 때문에 짧은 데이터 전송에는 비효율적입니다.

파일 전송(<input type="file">)이 없으면 "application/x-www-form-urlcencoded", 또는 "enctype"을 미 표시하는 것이 가장 효율적인 방법입니다.

 

반대로 파일 전송(<input type="file">)이 있는데 "application/x-www-form-urlcencoded"로 인코딩 타입을 잘못 표시하면 전송한 데이터를 처리하는 페이지에서 파일 정보에 접근할 수 없습니다.

파일 전송이 있으면 꼭 "multipart/form-data"로 인코딩 타입을 표시해야 파일이 바이너리 정보로 올바르게 처리 페이지로 전송됩니다.