JavaScript는 document.acceptCharset과 document.enctype이라는 DOM 속성을 제공합니다. 이를 활용하면 HTML 폼(form)의 accept-charset과 enctype 값을 아주 간단하게 조회할 수 있습니다. 지금부터 두 속성을 하나씩 자세히 살펴보겠습니다.
Accept-Charset이란?
accept-charset은 폼 데이터를 서버로 전송할 때 서버가 처리할 수 있는 문자 인코딩을 지정하는 속성입니다. 폼 요소에 설정된 이 값은 DOM 속성인 document.acceptCharset을 통해 손쉽게 읽어올 수 있습니다.
예제
아래 예제에서는 폼에 미리 accept-charset 속성이 설정되어 있습니다. document.acceptCharset 속성을 사용해 해당 값을 읽어온 뒤, 화면에 출력하는 과정을 보여줍니다.
<html>
<body>
<form id="form1" accept-charset="ISO-8859-7"></form>
<p id="char"></p>
<script>
var cha = document.getElementById("form1").acceptCharset;
document.getElementById("char").innerHTML = cha;
</script>
</body>
</html>
실행 결과
ISO-8859-7
위 코드를 실행하면 폼에 설정된 문자 인코딩 값인 ISO-8859-7(그리스어 인코딩 표준)이 그대로 화면에 출력됩니다.
Enctype이란?
enctype은 폼 데이터를 서버로 전송할 때 사용되는 인코딩 방식(MIME 타입)을 의미합니다. 대표적인 값으로는 기본값인 application/x-www-form-urlencoded, 파일 업로드 시 사용하는 multipart/form-data 등이 있습니다.
예제
다음 예제에서는 document.enctype DOM 속성을 사용해 폼의 enctype 값을 출력합니다. 흥미로운 점은 name이나 target 같은 다른 속성과 달리, enctype 값을 폼에 별도로 지정하지 않아도 된다는 것입니다. 모든 폼에는 기본적으로 내장된 enctype(application/x-www-form-urlencoded)이 존재하기 때문입니다.
<html>
<body>
<form id="form1" name="form" action="/action_page.php"></form>
<p id="type"></p>
<script>
var ty = document.getElementById("form1").enctype;
document.getElementById("type").innerHTML = ty;
</script>
</body>
</html>
실행 결과
application/x-www-form-urlencoded
폼에 enctype을 명시적으로 지정하지 않았음에도 기본값인 application/x-www-form-urlencoded가 출력되는 것을 확인할 수 있습니다. 이처럼 JavaScript의 DOM 속성을 활용하면 폼의 다양한 속성값을 동적으로 읽어와 활용할 수 있습니다.