Атрибут accept-charset тега <form> — кодування даних форми

HTML

<form action="#" class="anketa" accept-charset="windows-1251">
  <p class="head">Форма пошуку</p>
  <p><input type="text" name="q" value="Київ" size="20"> <button type="submit">Знайти</button></p>
  <p class="pidpys">accept-charset="windows-1251"</p>
</form>

<p class="head">Оберіть значення атрибута — і подивіться, що дістанеться серверу</p>

<div class="vybir">
  <p><input type="radio" name="v" id="v1" checked><label for="v1">атрибута немає</label></p>
  <p><input type="radio" name="v" id="v2"><label for="v2">accept-charset="UTF-8"</label></p>
  <p><input type="radio" name="v" id="v3"><label for="v3">accept-charset="windows-1251"</label></p>
  <p><input type="radio" name="v" id="v4"><label for="v4">accept-charset="ISO-8859-1"</label></p>
  <p><input type="radio" name="v" id="v5"><label for="v5">accept-charset="koi8-r UTF-8"</label></p>
  <p><input type="radio" name="v" id="v6"><label for="v6">accept-charset="абищо"</label></p>
</div>

<p class="ryadok">Рядок запиту: <span class="zapyt"></span></p>
<p class="ryadok">Що це означає: <span class="tlumach"></span></p>

<p class="note">Значення «Київ» одне й те саме, а байти щоразу інші. Там, де в
   кодуванні немає потрібної літери, переглядач мовчки підмінює її записом
   виду &amp;#1111; — сервер отримує не текст, а ці символи буквально.</p>

CSS

.head {
    margin: 18px 0 8px;
    color: #5a6472;
    font: 600 14px/1.4 system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.anketa {
    max-width: 560px;
    padding: 10px 12px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
    background: #f6f9ff;
}

.anketa .head {
    margin-top: 0;
}

.anketa p {
    margin: 6px 0;
}

.pidpys {
    color: #1b4f9c;
    font: 13px/1.6 ui-monospace, monospace;
}

input,
button {
    padding: 4px 8px;
    font: inherit;
}

.vybir {
    max-width: 560px;
    padding: 6px 12px;
    border: 2px dashed #b9c6d8;
    border-radius: 6px;
}

.vybir p {
    margin: 5px 0;
}

.vybir input {
    width: auto;
    padding: 0;
    margin-right: 6px;
}

.ryadok {
    max-width: 560px;
    margin: 8px 0;
}

.zapyt,
.tlumach {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    background: #eef3fb;
    font: 14px/1.6 ui-monospace, monospace;
    color: #1b4f9c;
}

body:has(#v1:checked) .zapyt::before,
body:has(#v2:checked) .zapyt::before,
body:has(#v6:checked) .zapyt::before {
    content: "q=%D0%9A%D0%B8%D1%97%D0%B2";
}

body:has(#v3:checked) .zapyt::before {
    content: "q=%CA%E8%BF%E2";
}

body:has(#v4:checked) .zapyt::before {
    content: "q=%26%231050%3B%26%231080%3B%26%231111%3B%26%231074%3B";
}

body:has(#v5:checked) .zapyt::before {
    content: "q=%EB%C9%26%231111%3B%D7";
}

body:has(#v1:checked) .tlumach::before,
body:has(#v2:checked) .tlumach::before {
    content: "UTF-8, вісім байтів — так, як чекає сучасний сервер";
}

body:has(#v3:checked) .tlumach::before {
    content: "windows-1251, чотири байти — сервер на UTF-8 покаже кракозябри";
}

body:has(#v4:checked) .tlumach::before {
    content: "жодної кирилиці в кодуванні немає: пішло Київ";
}

body:has(#v5:checked) .tlumach::before {
    content: "виграло ПЕРШЕ значення, koi8-r; літери ї в ньому немає — і вона теж пішла записом";
}

body:has(#v6:checked) .tlumach::before {
    content: "кодування невідоме — переглядач тихо взяв UTF-8";
}

body:has(#v3:checked) .tlumach,
body:has(#v4:checked) .tlumach,
body:has(#v5:checked) .tlumach {
    background: #fff4f4;
    color: #c0392b;
}

.note {
    max-width: 560px;
    margin-top: 14px;
    color: #5a6472;
    font-size: .9em;
}

<p>Приклад форми для входу з використанням атрибуту 'accept-charset'</p>
<hr>
<form accept-charset="windows-1251">
  <label>Ім'я:</label><br>
  <input type="text" name="login"><br>
  
  <label>Email:</label><br>
  <input type="email" name=""><br>
  
  <label>Ваш сайт:</label><br>
  <input type="url"><br>
  
  <label>Ваше повідомлення:</label><br>
  <textarea></textarea>
  <br>
  
  <input type="submit" value="Увійти" >
</form>