HTML DOM의 Form enctype 속성은 form 요소의 enctype 속성과 연결된 속성입니다. 이 속성을 사용하면 폼(form)의 enctype 속성 값을 가져오거나 설정할 수 있습니다.
enctype 속성은 method 속성의 값이 "POST"일 때만 유효하며, 폼 데이터를 서버로 제출하기 전에 어떤 방식으로 인코딩(부호화)할지 지정하는 역할을 합니다.
문법(Syntax)
enctype 속성을 설정하는 기본 문법은 다음과 같습니다.
formObject.enctype = encoding
encoding 자리에 들어갈 수 있는 값은 세 가지입니다.
1. application/x-www-form-urlencoded
모든 문자를 전송 전에 인코딩하는 방식으로, 기본값(default)입니다. 특수 문자와 공백이 URL 인코딩 규칙에 따라 변환됩니다.
2. multipart/form-data
어떠한 문자도 인코딩하지 않는 방식입니다. 주로 파일 업로드 시 서버로 파일을 전송할 때 사용합니다.
3. text/plain
공백만 "+" 기호로 변환하고 그 외에는 아무런 인코딩도 수행하지 않습니다. 보안상 취약하기 때문에 실제 서비스에서는 사용하지 않는 것이 좋습니다.
예제(Example)
Form enctype 속성의 실제 동작을 확인해 볼 수 있는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
form{
border:2px solid blue;
margin:2px;
padding:4px;
}
</style>
<script>
function changeEnc() {
document.getElementById("FORM1").enctype = "application/x-www-form-urlencoded";
document.getElementById("Sample").innerHTML = "The enctype attribute value is now 'application/x-www-form-urlencoded' ";
}
</script>
</head>
<body>
<h1>Form enctype property example</h1>
<form id="FORM1" method="post" enctype="multipart/form-data">
<label>User Name <input type="text" name="usrN"></label> <br><br>
<label>Password <input type="password" name="pass"></label>
</form>
<br>
<button onclick="changeEnc()">CHANGE</button>
<p id="Sample"></p>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
CHANGE 버튼을 클릭하면 아래와 같이 변경됩니다.
예제 코드 분석
위 예제가 어떻게 동작하는지 단계별로 살펴보겠습니다.
1. 폼 생성
먼저 id가 "FORM1", method가 "post", enctype이 "multipart/form-data"로 설정된 폼을 만들었습니다. 이 인코딩 방식은 파일을 서버로 업로드할 때 유용하게 사용됩니다. 폼 안에는 텍스트 입력 필드와 비밀번호 입력 필드가 포함되어 있습니다.
<form id="FORM1" method="post" enctype="multipart/form-data"> <label>User Name <input type="text" name="usrN"></label> <br><br> <label>Password <input type="password" name="pass"></label> </form>
2. 버튼 생성
다음으로 CHANGE 버튼을 만들어, 사용자가 클릭하면 changeEnc() 함수가 실행되도록 했습니다.
<button onclick="changeEnc()">CHANGE</button>
3. enctype 값 변경
changeEnc() 함수는 getElementById() 메서드로 폼 요소를 가져온 뒤, 해당 폼의 enctype 속성을 "application/x-www-form-urlencoded"로 변경합니다. 이 값은 모든 문자를 인코딩하는 기본 인코딩 방식입니다. 이어서 id가 "Sample"인 문단(p)의 innerHTML 속성을 이용해 변경 결과를 사용자에게 텍스트로 표시합니다.
function changeEnc() {
document.getElementById("FORM1").enctype = "application/x-www-form-urlencoded";
document.getElementById("Sample").innerHTML = "The enctype attribute value is now 'application/x-www-form-urlencoded' ";
}정리
HTML DOM의 Form enctype 속성은 POST 방식으로 데이터를 전송할 때 폼 데이터의 인코딩 방식을 결정하는 중요한 속성입니다. 일반적인 텍스트 데이터 전송에는 기본값인 "application/x-www-form-urlencoded"를, 파일 업로드에는 "multipart/form-data"를 사용하는 것이 표준적인 활용 방법입니다.