HTML DOM의 submit formEnctype 속성은 제출(submit) 버튼의 formEnctype 속성값을 설정하거나 반환하는 데 사용됩니다. 이 속성은 HTML5에서 type이 submit인 input 요소를 위해 새롭게 도입되었으며, 폼 데이터가 서버로 전송될 때 어떤 방식으로 인코딩할지 지정하는 역할을 합니다.
한 가지 주의할 점은 이 속성이 method="post"로 설정된 경우에만 동작한다는 것입니다. 또한 제출 버튼의 formEnctype 값은 <form> 요소에 설정된 enctype 속성값보다 우선 적용(재정의)됩니다.
문법(Syntax)
formEnctype 속성을 설정하는 기본 문법은 다음과 같습니다.
submitObject.formEnctype = encoding
encoding 자리에 들어갈 수 있는 값은 세 가지입니다.
1. application/x-www-form-urlencoded
모든 문자를 전송 전에 인코딩하는 방식으로, 기본값(default)입니다.
2. multipart/form-data
문자를 인코딩하지 않는 방식으로, 주로 파일 업로드 시 사용됩니다.
3. text/plain
공백만 "+" 기호로 변환하고 그 외에는 아무런 인코딩도 하지 않습니다. 보안상 취약하기 때문에 실제 서비스에서는 사용하지 않는 것이 좋습니다.
예제(Example)
다음은 submit formEnctype 속성을 활용한 예제 코드입니다.
<!DOCTYPE html>
<html>
<head>
<script>
function changeEnc() {
document.getElementById("SUBMIT1").formEnctype = "application/x-www-form-urlencoded";
document.getElementById("Sample").innerHTML = "formenctype 속성값이 'application/x-www-form-urlencoded'로 변경되었습니다.";
}
</script>
</head>
<body>
<h1>Submit formEnctype 속성 예제</h1>
<form id="FORM_1" action="/Sample.php" style="border:solid 2px green;padding:2px">
UserName: <input type="text" id="USR"> <br>
Location: <input type="text" id="Loc"> <br><br>
<input type="submit" id="SUBMIT1" formenctype="multipart/form-data">
</form>
<br>
<button onclick="changeEnc()">변경</button>
<p id="Sample"></p>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
초기 상태에서는 제출 버튼의 formEnctype이 multipart/form-data로 설정되어 있습니다. 여기서 [변경] 버튼을 클릭하면 JavaScript 함수가 실행되어 formEnctype 값이 application/x-www-form-urlencoded로 바뀌고, 그 결과가 화면에 표시됩니다.
이처럼 formEnctype 속성을 활용하면 폼 전체의 enctype을 수정하지 않고도 특정 제출 버튼 단위로 데이터 인코딩 방식을 유연하게 제어할 수 있습니다. 특히 파일 업로드와 일반 텍스트 전송이 혼합된 폼을 다룰 때 유용하게 사용됩니다.