HTML DOM 양식 enctype 속성은 양식 요소의 enctype 속성과 연결됩니다. 이 속성은 양식의 enctype 속성 값을 설정하거나 반환합니다. enctype 속성은 method 속성 값이 "POST"인 경우에만 사용됩니다. enctype 속성은 제출할 형식의 데이터를 인코딩하는 데 사용됩니다.
구문
다음은 −
의 구문입니다.enctype 속성 설정 -
formObject.enctype = encoding
여기에서 인코딩은 "application/x-www-form-urlencoded"일 수 있습니다. 이는 모든 문자가 전송되기 전에 인코딩된다는 것을 의미하며 이것이 기본 인코딩입니다.
또 다른 하나는 "multipart/form-data"로, 인코딩할 문자가 없도록 지정하고 파일을 서버에 업로드하는 데 사용됩니다.
세 번째 인코딩은 "텍스트/일반"이며 공백만 "+" 기호로 변환하고 다른 인코딩은 변환하지 않습니다. text./plain 인코딩은 안전하지 않으므로 사용하면 안 됩니다.
예시
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> 출력
이것은 다음과 같은 출력을 생성합니다 -
CHANGE 버튼을 클릭하면 -
위의 예에서 -
id="Form1", method="post" 및 enctype이 "multipart/form-data"로 설정된 양식을 만들었습니다. 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>
그런 다음 사용자가 클릭할 때 changeEnc() 메서드를 실행하는 CHANGE 버튼을 만들었습니다.
<button onclick="changeEnc()">CHANGE</button>
changeEnc() 메서드는 getElementById() 메서드를 사용하여 양식 요소를 가져오고 enctype 속성을 "application/x-www-form-urlencoded"로 설정합니다. 이렇게 하면 모든 문자가 인코딩되고 기본 enctype 인코딩이 됩니다. ID가 "Sample"인 단락의 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' ";
}