Атрибут name тега <textarea> — ім'я поля для обробника

HTML

<form action="/vidhuk" method="post">
  <p><label for="a1">Відгук (усе гаразд)</label>
     <textarea id="a1" name="vidhuk" rows="2">поїде як vidhuk</textarea></p>

  <p><label for="a2">Забули name</label>
     <textarea id="a2" rows="2">цього тексту сервер не побачить</textarea></p>

  <p><label for="a3">Порожнє name</label>
     <textarea id="a3" name="" rows="2">і цього теж</textarea></p>

  <p><label for="a4">Порожнє поле, але з іменем</label>
     <textarea id="a4" name="komentar" rows="2"></textarea></p>

  <p><label for="a5">Вимкнене поле</label>
     <textarea id="a5" name="chernetka" rows="2" disabled>disabled прибирає поле з даних</textarea></p>

  <p><label for="a6">Тільки для читання</label>
     <textarea id="a6" name="dohovir" rows="2" readonly>readonly надсилається як є</textarea></p>

  <p><label for="a7">Небезпечне ім'я</label>
     <textarea id="a7" name="submit" rows="2">після цього form.submit() падає</textarea></p>

  <p><label for="a8">Два поля з однаковим іменем</label>
     <textarea id="a8" name="ryadok" rows="2">перший</textarea>
     <textarea id="a9" name="ryadok" rows="2">другий</textarea></p>

  <button type="submit">Надіслати</button>
</form>

CSS

form {
    max-width: 620px;
    padding: 10px 14px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
    background: #f6f9ff;
}

label {
    display: block;
    margin-bottom: 3px;
    font-weight: 600;
}

textarea {
    width: 100%;
    padding: 5px 8px;
    border: 2px solid #b9c6d8;
    border-radius: 4px;
    font: inherit;
}

button {
    padding: 6px 12px;
    font: inherit;
}

p::after {
    display: block;
    margin-top: 3px;
    font-size: .85em;
}

/* поїде на сервер */
p:has(textarea[name]:not([name=""]):not([disabled]))::after {
    content: "→ поїде на сервер";
    color: #8a6100;
}

p:has(textarea[name]:not([name=""]):not([disabled])) textarea {
    border-color: #e0a800;
    background: #fff6d8;
}

/* не поїде зовсім */
p:has(textarea:not([name]))::after,
p:has(textarea[name=""])::after,
p:has(textarea[disabled])::after {
    content: "→ У ДАНИХ ЦЬОГО ПОЛЯ НЕ БУДЕ";
    color: #c0392b;
}

p:has(textarea:not([name])) textarea,
p:has(textarea[name=""]) textarea,
p:has(textarea[disabled]) textarea {
    border-color: #d64545;
    background: #fff4f4;
}

/* Імена, що затуляють властивості форми. Ланцюжок :not() тут не зайвий:
   без нього правило слабше за жовте вище й програє йому. */
p:has(textarea[name="submit"]:not([name=""]):not([disabled]))::after,
p:has(textarea[name="action"]:not([name=""]):not([disabled]))::after,
p:has(textarea[name="length"]:not([name=""]):not([disabled]))::after {
    content: "→ поїде, але зламає form.submit() у скриптах";
    color: #1b4f9c;
}

p:has(textarea[name="submit"]:not([name=""]):not([disabled])) textarea {
    border-color: #2f6fd0;
    background: #eef3fb;
}

/* однакові імена — обидва значення в даних */
p:has(textarea[name="ryadok"]:not([name=""]):not([disabled]))::after {
    content: "→ поїдуть обидва: ryadok=перший і ryadok=другий";
    color: #8a6100;
}

HTML

<p>Значення поля йде в запит під іменем із <code>name</code>. У другого поля <code>name</code> немає — і в запиті його теж немає.</p>

<form id="contact" action="/contact" method="post">
  <label for="message">Повідомлення:</label><br>
  <textarea id="message" name="message" rows="3">Маю питання про доставку.</textarea><br>

  <label for="draft">Нотатка для себе (поле без name):</label><br>
  <textarea id="draft" rows="3">На сервер не піде.</textarea><br><br>

  <input type="submit" value="Відправити">
</form>

<p id="text">Натисніть «Відправити».</p>

CSS

label {
  font-weight: bold;
}

input,
textarea {
  width: 20em;
  padding: 4px;
}

#text {
  margin-top: 16px;
  padding: 8px;
  background: #f1f5f5;
  border-left: 3px solid #99aaaa;
  font-family: monospace;
  white-space: pre-line;
}

JS

// Рамка прикладу має sandbox без allow-forms, тож справжня відправка тут
// неможлива, а подія submit навіть не настає. Скасовуємо відправку на кліку
// і показуємо, що саме пішло б на сервер.
const form = document.getElementById('contact');
const out = document.getElementById('text');

form.addEventListener('click', (event) => {
  if (!event.target.matches('input[type="submit"]')) {
    return;
  }

  event.preventDefault();

  const pairs = [];
  for (const [name, value] of new FormData(form)) {
    pairs.push(name + ' = ' + value);
  }

  out.textContent = pairs.length ? pairs.join('\n') : 'Жодне поле форми не має name.';
});