Formulaire - Caractères spéciaux

Bonjour,

J'ai un formulaire avec deux textarea. Lorsque je tappe dans la premiere des caracteres accentués, ils sont remplacés par des caractères � apres envoie via la méthode POST.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html>
<head>
	<LINK rel="stylesheet" type="text/css" href="style.css">
	<meta charset="UTF-8">
</head>
 
<body>
  <script language="javascript" type="text/javascript">
 
function trslte_f(){
    var ajaxRequest;  // The variable that makes Ajax possible!
    try{
    // Opera 8.0+, Firefox, Safari
    ajaxRequest = new XMLHttpRequest();
    } catch (e){
    // Internet Explorer Browsers
    try{
       ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
    try{
    ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
       } catch (e){
       // Something went wrong
       alert("Your browser broke!");
       return false;
       }
       }
       }
 
// Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function(){
                if(ajaxRequest.readyState == 4){
                document.f_main.ta_out.value = ajaxRequest.responseText;
                }
     }
     
      ajaxRequest.open("POST", "cgi-bin/a.cgi", true);
      ajaxRequest.send(escape(document.forms['f_main'].ta_in.value));
}
 
  </script>
 
  <div id="conteneur" style="text-align: center;">
	<form name="f_main">
	<div id="in" class="box">
     	     <textarea autocorrect="off" autofocus="autofocus" autocomplete="off" autocapitalize="off" spellcheck="false" dir="ltr" tabindex="0" wrap="SOFT" name="ta_in" class="ta" style="overflow-y: hidden; padding-right: 20px;"></textarea>
	</div>
	<div id="out" class="box">
	     <textarea readonly autocorrect="off" autocomplete="off" autocapitalize="off" spellcheck="false" dir="ltr" tabindex="0" wrap="SOFT" name="ta_out" class="ta" style="overflow-y: hidden; padding-right: 20px;"></textarea>
	</div>
	</br style:"clear: both;">
	<input type="button" id="mybutton" onClick="trslte_f();" value="Translate">
	</form>
   </div>
</body>
 
</html>

quelqu'un peut-il me dire pourquoi ?

Cordialement