HTML DOM Form acceptCharset 속성 – 폼 문자 인코딩 설정 및 조회 방법

HTML DOM의 Form acceptCharset 속성은 <form> 요소의 accept-charset 속성과 연결되어 있습니다. 이 속성을 사용하면 폼(form)의 문자 인코딩 값을 자바스크립트로 읽어오거나 새로 설정할 수 있으며, 반환되는 값은 항상 문자열(string) 타입입니다.

만약 폼에 accept-charset 값이 별도로 지정되어 있지 않다면 이 속성은 UNKNOWN을 반환합니다. 이는 해당 폼의 문자 인코딩이 현재 HTML 문서의 기본 문자 인코딩을 따른다는 의미입니다.

문법(Syntax)

acceptCharset 속성 설정하기

formObject.acceptCharset = character-set

여기서 character-set은 하나 이상의 문자 인코딩 값을 나타내며, 여러 개를 지정할 때는 세미콜론(;) 또는 공백으로 구분합니다. 가장 널리 사용되는 값으로는 UTF-8과 ISO-8859-1이 있습니다.

UTF-8: 전 세계 모든 문자를 지원하는 유니코드 기반 인코딩으로, 현재 웹 표준에서 권장되는 방식입니다.
ISO-8859-1: 라틴 알파벳(Latin-1) 문자 집합으로, 서유럽 언어를 주로 지원합니다.

예제(Example)

이제 Form acceptCharset 속성을 활용한 실제 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
<style>
    form{
       border:2px solid blue;
       margin:2px;
       padding:4px;
    }
</style>
<script>
    function changeEnc() {
       document.getElementById("FORM1").acceptCharset = "ISO-8859-1";
       document.getElementById("Sample").innerHTML = "이 폼의 문자셋이 UTF-8에서 ISO-8859-1로 변경되었습니다";
    }
</script>
</head>
<body>
<form id="FORM1" accept-charset="UTF-8">
<label>사용자 이름 <input type="text" name="usrN"></label><br><br>
<label>비밀번호 <input type="password" name="pass"></label>
</form>
<p>아래 버튼을 클릭하면 폼 요소의 문자 인코딩이 UTF-8에서 ISO-8859-1로 변경됩니다</p>
<button onclick="changeEnc()">변경(CHANGE)</button>
<p id="Sample"></p>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM Form acceptCharset 속성 – 폼 문자 인코딩 설정 및 조회 방법

CHANGE 버튼을 클릭한 후:

HTML DOM Form acceptCharset 속성 – 폼 문자 인코딩 설정 및 조회 방법

예제 코드 상세 설명

위 예제가 어떻게 동작하는지 단계별로 살펴보겠습니다.

1. 폼 생성

먼저 id가 "FORM1"인 폼을 생성하고, accept-charset 속성값을 "UTF-8"로 지정했습니다. 이 폼에는 텍스트 타입 입력 필드와 패스워드 타입 입력 필드가 각각 하나씩 포함되어 있습니다.

<form id="FORM1" accept-charset="UTF-8">
<label>User Name <input type="text" name="usrN"></label> <br><br>
<label>Password <input type="password" name="pass"></label>
</form>

2. 변경 버튼 생성

그다음 사용자가 클릭하면 changeEnc() 함수를 실행하는 CHANGE 버튼을 만들었습니다.

<button onclick="changeEnc()">CHANGE</button>

3. changeEnc() 함수 동작 원리

changeEnc() 함수는 getElementById() 메서드를 사용해 <form> 요소를 가져온 뒤, 해당 요소의 acceptCharset 속성값을 라틴 문자 인코딩인 "ISO-8859-1"로 변경합니다. 이후 innerHTML 속성을 이용해 id가 "Sample"인 문단에 인코딩 변경 사항을 알리는 메시지를 출력합니다.

function changeEnc() {
    document.getElementById("FORM1").acceptCharset = "ISO-8859-1";
    document.getElementById("Sample").innerHTML = "The character set is now ISO-8859-1 instead of UTF-8 for this form";
}

마무리

이처럼 acceptCharset 속성을 활용하면 서버로 데이터를 전송하기 전에 폼의 문자 인코딩을 동적으로 제어할 수 있습니다. 다국어 환경의 웹 애플리케이션에서는 일반적으로 UTF-8을 사용하는 것이 좋으며, 특수한 경우에만 ISO-8859-1 같은 레거시 인코딩을 고려하는 것이 바람직합니다.