Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що робить name у поля форми?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Атрибут `name`** у поля форми визначає ім'я змінної, під яким браузер надішле значення цього поля на сервер під час відправлення форми. Він - як ключ у парі "ключ = значення", де `name` - це ключ, а введене користувачем значення - це дані, прив'язані до нього. **Ключове:** без атрибута `name` поле взагалі не потрапить у запит, сервер просто не дізнається, що користувач щось ввів.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняАтрибут `name` у поля форми визначає **ім'я змінної**, під яким браузер **надішле значення цього поля на сервер** під час відправлення форми. Він - як **ключ у парі "ключ = значення"**, де `name` - це ключ, а введене користувачем значення - це дані, прив'язані до нього. --- ### 1. Приклад ```html <form action="/submit" method="post"> <input type="text" name="username" value="Oleh"> <input type="password" name="password" value="12345"> <button type="submit">Увійти</button> </form> ``` Під час відправлення браузер передасть дані на сервер у такому вигляді: ```javascript username=Oleh&password=12345 ``` Тобто: - `name="username"` -> ключ `"username"`, - `value="Oleh"` -> значення `"Oleh"`. --- ### 2. Без name дані не надішлються Якщо поле **не має атрибута** `name`, воно **не потрапить у запит**, сервер просто не дізнається, що користувач щось ввів. Приклад: ```html <input type="text" placeholder="Ім'я"> ``` Навіть якщо користувач введе текст, він **не буде переданий** під час відправлення форми. --- ### 3. Принцип роботи - Браузер збирає всі елементи форми, які мають `name`; - формує пари `name=value`; - об'єднує їх у рядок і надсилає на сервер через `GET` чи `POST`. Приклад з чекбоксом: ```html <input type="checkbox" name="subscribe" value="yes" checked> ``` Під час відправлення: ```javascript subscribe=yes ``` --- ### 4. Взаємодія з JavaScript За допомогою `name` можна легко отримувати значення полів: ```html <form id="form"> <input type="text" name="email" value="test@example.com"> </form> <script> const email = document.forms["form"]["email"].value; console.log(email); // "test@example.com" </script> ``` --- ### 5. Коли name особливо важливий | Елемент | Чому потрібен name | |---|---| | `<input>` | Щоб надіслати введене значення | | `<textarea>` | Щоб передати текст | | `<select>` | Щоб надіслати обраний варіант | | `<input type="radio">` | Щоб об'єднати в групу | | `<input type="checkbox">` | Щоб ідентифікувати обраний пункт | --- ### Підсумок: | Параметр | Значення | |---|---| | Атрибут | `name` | | Призначення | Вказує ім'я поля під час передавання даних | | Що робить | Пов'язує значення поля з ключем під час відправлення | | Без нього | Дані не потраплять у запит | | Застосовується до | Будь-яких елементів форми (`input`, `textarea`, `select`) | --- **Простими словами:** `name` - це **"ярлик" поля**, за яким сервер розуміє, які дані до чого належать. Якщо форма - це анкета, то `name` - це **назва рядка в анкеті**, а введене користувачем значення - **відповідь на це питання**.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.