HTML - accept-charset Attribute

HTML accept-charset attribute is used to specify the character encodings that the server can accept when the form is submitted.

It is a space-separated character encoding the server accepts. Using accept-charset helps ensure that the characters entered in the form are properly encoded and transmitted to the server, especially when dealing with international characters or languages with non-ASCII characters.

In the previous version of HTML, character encodings could also be delimited by commas. The accept-attribute only works with the <form> tag.

Syntax

<form accept-charset = "value"></form>

Applies On

Below listed element allow using of the HTML accept-charset attribute.

Element	Description
<form>	HTML <form> tag is used to specify the input field.

Examples of HTML accept-charset attribute

Following codes show different values possible for accept-charset attribute.

Accept-charset with specified encoding

Here we are using the accept-charset attribute is used within the <form> tag. The code below will generate an output consisting of the input field along with a click button displayed on the webpage.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML 'accept-charset' attribute</title>
</head>

<body>
   <!--HTML 'accept-charset' attribute-->
   <p>HTML 'accept-charset' attribute</p>
   <form accept-charset="utf-8">
      <h1>Login</h1>
      <label for="">Username</label>
      <br>
      <input type="text">
      <br>
      <br>
      <label for="">Password</label>
      <br>
      <input type="password">
      <br>
      <br>
      <button>Login</button>
   </form>
</body>

</html>

Accept-charset with 'unknown' value

Considering the another scenario, where the accept-charset attribute is used with form element to specify the character encoding(i.e. default value ‘UNKNOWN’) to be used for form submission.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML 'accept-charset' attribute</title>
   <style>
      form {
         border: 1px solid blueviolet;
         width: 300px;
         border-radius: 10px;
      }

      form h1 {
         text-align: center;
      }

      form label {
         margin: 0px 30px;
      }

      form input,
      select {
         margin: 0px 30px;
         padding: 8px;
         width: 200px;
      }

      form button {
         width: 100px;
         padding: 10px;
         margin: 0px 30px;
      }
   </style>
</head>

<body>
   <!--HTML 'accept-charset' attribute-->
   <p>HTML 'accept-charset' attribute</p>
   <form accept-charset="UNKNOWN">
      <h1>User Form</h1>
      <label for="">Name</label>
      <br>
      <input type="text">
      <br>
      <br>
      <label for="">Mobile</label>
      <br>
      <input type="number">
      <br>
      <br>
      <label for="">Select language you knows</label>
      <br>
      <br>
      <select name="language" id="">
         <option value="">Choose your option</option>
         <option value="">Hindi</option>
         <option value="">English</option>
         <option value="">Telugu</option>
      </select>
      <br>
      <br>
      <button>Submit</button>
      <br>
      <br>
   </form>
</body>

</html>

Supported Browsers

Attribute
accept-charset	Yes	Yes	Yes	Yes	Yes

html_attributes_reference.htm