HTML accept-charset Attribute

What You’ll Learn

The accept-charset attribute is an essential part of HTML forms that determines which character encodings the server may use when processing submitted form data. By setting it, you help ensure text—including accented letters and non-Latin scripts—is interpreted correctly on the server.

Purpose of accept-charset

The primary purpose of the accept-charset attribute is to define the character encodings that the server accepts for form submissions. This is crucial for ensuring the server can correctly interpret and handle the data sent from the form—especially when users enter international characters.

📝 Syntax

Add accept-charset to a <form> element with one or more encoding names separated by spaces:

<form action="/submit" method="post" accept-charset="UTF-8">
  <!-- form fields -->
</form>

Syntax Rules

• Only valid on the <form> element.
• Separate multiple encodings with spaces (not commas).
• In JavaScript, use the camelCase property acceptCharset.
• If omitted, the form uses the document’s character encoding (typically UTF-8).

💎 Values

The accept-charset attribute accepts a string representing one or more character encodings. Common values include:

• UTF-8 — The most widely used encoding, supporting characters from virtually every language. Use this for all modern sites.
• ISO-8859-1 — A legacy encoding for Western European languages.
• Shift_JIS — Used for Japanese text in older systems.
• UTF-8 ISO-8859-1 — Space-separated list when multiple encodings are accepted.

<!-- Single encoding (recommended) -->
<form accept-charset="UTF-8">...</form>

<!-- Multiple encodings -->
<form accept-charset="UTF-8 ISO-8859-1">...</form>

⚖️ accept-charset vs meta charset

Applicable Elements

Examples Gallery

UTF-8 forms, dynamic encoding switches, and multiple accepted charsets.

<form action="/submit" method="post" accept-charset="UTF-8">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <input type="submit" value="Submit">
</form>

<script>
  function setFormCharset(encoding) {
    document.getElementById("dynamicForm").acceptCharset = encoding;
  }
</script>

<form action="/submit" method="post" accept-charset="UTF-8 ISO-8859-1">
  <textarea name="message"></textarea>
  <input type="submit" value="Submit">
</form>

♿ Accessibility

• UTF-8 preserves user input — Correct encoding ensures screen reader users and sighted users see the same characters they typed.
• Match document and form encoding — Avoid mojibake (garbled characters) by keeping meta charset and accept-charset aligned.
• Label all fields — Encoding does not replace accessible labels and error messages.
• Report encoding errors clearly — If the server rejects input, explain the issue in plain language.

💡 Best Practices