HTML에서 enctype 속성을 사용하면 폼(form) 데이터를 서버로 전송할 때 어떤 방식으로 인코딩할지 지정할 수 있습니다. 이 속성은 <form> 태그 안에 작성하며, 특히 파일 업로드가 포함된 폼을 만들 때 반드시 올바른 값을 설정해야 합니다.
enctype 속성의 주요 값
enctype 속성에는 다음과 같은 세 가지 값을 사용할 수 있습니다.
- application/x-www-form-urlencoded – 기본값입니다. 모든 문자가 인코딩되며, 공백은 '+' 기호로 변환됩니다. 일반적인 텍스트 데이터 전송에 적합합니다.
- multipart/form-data – 인코딩 없이 데이터를 그대로 전송합니다. 파일 업로드가 필요한 폼에서는 반드시 이 값을 사용해야 합니다.
- text/plain – 공백만 '+' 기호로 변환되고 나머지는 인코딩되지 않습니다. 실무에서는 거의 사용하지 않습니다.
사용 예제
아래 코드는 enctype 속성에 multipart/form-data 값을 설정하여 폼 데이터를 서버로 전송하는 예제입니다.
<!DOCTYPE html>
<html>
<body>
<p>어떤 스포츠를 좋아하나요?</p>
<form action = "" method = "post" enctype = "multipart/form-data">
<input type = "checkbox" name = "vehicle" value = "football" checked> 축구<br>
<input type = "checkbox" name = "vehicle" value = "cricket" checked> 크리켓<br>
<input type = "checkbox" name = "vehicle" value = "hockey"> 하키<br>
<input type = "submit" value = "제출">
</form>
</body>
</html>정리
폼 데이터의 인코딩 여부와 방식을 지정하려면 <form> 태그에 enctype 속성을 추가하면 됩니다. 일반적인 텍스트 전송에는 기본값인 application/x-www-form-urlencoded를, 파일 업로드가 포함된 경우에는 multipart/form-data를 사용하는 것이 좋습니다. 또한 enctype이 의미 있게 작동하려면 form의 method가 post여야 한다는 점도 함께 기억해 두세요.