The HTML DOM Form acceptCharset property is associated with the accept-Charset attribute of the <form> element. This property is used for setting and getting the accept-Charset attribute value of a form. It returns the character encoding in the string type.
If accept-Charset value is not specified it will return UNKNOWN which indicate that the character encoding is set to the character encoding of the current HTML document.
Syntax
Following is the syntax for −
Setting the acceptCharset property −
formObject.acceptCharset = character-set
Here, the character-set is the list separated by semicolon or space indicating one or more of the character encoding value. Some of the most commonly used values are UTF-8 and ISO-8859-1.
Example
Let us look at an example for the Form acceptCharset property −
<!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 = "The character set is now ISO-8859-1
instead of UTF-8 for this form";
}
</script>
</head>
<body>
<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>
<p>Change the charset encoding for the form element from UTF-8 to ISO-8859-1 by clicking the below button<p>
<button onclick="changeEnc()">CHANGE</button>
<p id="Sample"></p>
</body>
</html>Output
This will produce the following output −
On clicking the CHANGE button −
In the above example −
We have created a form with id “FORM1” and acceptCharset property value to “ISO-88591”. This form contain an input field with type text and another one with type password −
<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>
We have then created a button CHANGE that will execute the changeEnc() method when clicked by the user −
<button onclick="changeEnc()">CHANGE</button>
The changeEnc() function gets the <form> element using the getElementById() method. It then sets its acceptCharset property value to “ISO-8859-1” which is latin character encoding. We then display a message in paragraph with id “Sample” using its innerHTML property to display the text regarding this change−
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";
}