Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Як елемент <form> пов'язує поля вводу та відправлення даних?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)Елемент **`<form>`** пов'язує всі поля вводу на сторінці (наприклад, `<input>`, `<select>`, `<textarea>`) в єдину структуру даних, яку браузер може відправити на сервер при натисканні кнопки «Надіслати». **Ключове:** Зв'язування відбувається за атрибутом `name`, який слугує «ключем» для кожного значення, тож без `name` елемент не буде включений у відправлення.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняЕлемент `<form>` пов'язує **всі поля вводу на сторінці** (наприклад, `<input>`, `<select>`, `<textarea>`) в **єдину структуру даних**, яку браузер може **відправити на сервер** при натисканні кнопки «Надіслати» (`<button type="submit">`). Іншими словами: `<form>`, це **контейнер**, який об'єднує всі пов'язані елементи і керує процесом передачі введеної інформації. --- ### 1. Приклад: як форма «збирає» дані ```html <form action="/register" method="post"> <label>Ім'я:</label> <input type="text" name="username"> <label>Email:</label> <input type="email" name="useremail"> <button type="submit">Зареєструватися</button> </form> ``` Що відбувається: 1. Користувач заповнює поля (`username`, `useremail`). 2. При натисканні на кнопку **Submit** браузер: - збирає всі поля, у яких є атрибут `name`, - формує з них **пари «ключ=значення»**, - і відправляє їх на сервер за адресою `/register`. Наприклад: ```javascript username=Oleh&useremail=oleh@example.com ``` --- ### 2. Як саме форма пов'язує поля Зв'язування відбувається **за атрибутом** `name`. Він, «ключ» для кожного значення. | Елемент | Атрибут `name` | Значення, що надсилається | |---|---|---| | `<input type="text" name="login" value="Alex">` | `login` | `Alex` | | `<input type="email" name="email" value="a@mail.com">` | `email` | `a@mail.com` | Підсумковий набір даних, який відправить `<form>`: ```javascript login=Alex&email=a@mail.com ``` Без `name` елемент **не буде включений** у відправлення. --- ### 3. Як відбувається відправлення 1. Користувач натискає кнопку `<button type="submit">`. 2. Браузер бере всі значення полів усередині `<form>`. 3. Кодує їх залежно від `method`: - `GET`: додає в URL (`/register?login=Alex&email=a@mail.com`); - `POST`: передає «всередині» HTTP-запиту (у тілі запиту). 4. Відправляє їх на сервер за адресою з `action`. --- ### 4. Інші способи зв'язування - Можна мати **кілька форм на сторінці**, кожна збирає лише «свої» поля. - Елементи форми можна **пов'язувати за ідентифікатором** через атрибут `form`: ```html <form id="feedback" action="/send" method="post"></form> <input type="text" name="name" form="feedback"> <button type="submit" form="feedback">Надіслати</button> ``` → Навіть якщо поле не всередині форми, воно все одно відправиться разом з нею. --- ### 5. Після відправлення Сервер приймає пари `ключ=значення`, наприклад: ```json { "username": "Oleh", "useremail": "oleh@example.com" } ``` і може: - зберегти дані в базі, - перевірити коректність, - повернути користувачу відповідь (сторінку «успішно надіслано»). --- ### Підсумок: | Механізм | Опис | |---|---| | `<form>` | Контейнер, що об'єднує поля вводу | | Атрибут `name` | Пов'язує значення з їхніми «ключами» | | `<button type="submit">` | Тригер відправлення даних | | `action` | Вказує адресу сервера | | `method` | Визначає спосіб передачі (`GET` чи `POST`) | --- **Простими словами:** `<form>`, це як **конверт**, кожне поле, **заповнений рядок у листі**, а кнопка «Надіслати», **листоноша**, який несе весь вміст на сервер.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.