Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що робить атрибут action у <form>?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)Атрибут **`action`** у тегу `<form>` вказує адресу (URL), на яку будуть відправлені дані форми після натискання кнопки Submit, зазвичай це адреса серверного скрипта, який приймає та обробляє введені користувачем дані. **Ключове:** Якщо `action` не задано або воно порожнє, форма відправить дані на поточну адресу сторінки.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняАтрибут `action` у тегу `<form>` вказує **адресу (URL)**, на яку будуть **відправлені дані форми** після натискання кнопки **Submit** (`<button type="submit">`). Це адреса **обробника** (зазвичай серверного скрипта, PHP, Python, Node.js тощо), який приймає та обробляє введені користувачем дані. --- ### 1. Приклад ```html <form action="/send" method="post"> <input type="text" name="username" placeholder="Ім'я"> <button type="submit">Надіслати</button> </form> ``` Що відбувається: 1. Користувач вводить ім'я. 2. При натисканні «Надіслати» браузер формує набір даних, наприклад: ```javascript username=Oleh ``` 3. Відправляє їх на сервер за адресою `/send` (з `action`). --- ### 2. Варіанти значень `action` | Значення | Що робить | |---|---| | `/send` | Відправляє дані на вказаний шлях усередині поточного сайту | | `https://example.com/api` | Відправляє дані на зовнішній сервер | | `""` (порожнє) | Відправляє дані на **поточну сторінку** | | Атрибут відсутній | Те саме: форма відправиться **сама на себе** | Приклад: ```html <form action=""> <!-- форма відправить дані на поточний URL --> </form> ``` --- ### 3. Як працює у зв'язці з `method` - `method="get"` → дані додаються до URL (у рядку браузера): ```javascript /send?username=Oleh ``` - `method="post"` → дані відправляються «в тілі» HTTP-запиту, не видні в адресному рядку. ```html <form action="/send" method="post"> ``` --- ### 4. Якщо вказати відносний шлях ```html <form action="php/formHandler.php" method="post"> ``` → дані підуть на `/поточна_папка/php/formHandler.php`. Якщо потрібна абсолютна адреса: ```html <form action="https://mysite.com/api/contact" method="post"> ``` --- ### 5. Використання з JavaScript Якщо обробка відбувається не на сервері, а через JavaScript (наприклад, AJAX), `action` може бути **проігнорований**: скрипт сам вирішує, куди відправляти дані. Приклад: ```html <form id="form"> <input name="email"> <button>OK</button> </form> <script> document.getElementById('form').addEventListener('submit', e => { e.preventDefault(); // скасовуємо стандартне відправлення console.log('Форму відправлено вручну через JS'); }); </script> ``` --- ### Підсумок: | Атрибут | Призначення | |---|---| | `action` | Визначає адресу (URL), куди браузер відправить дані форми | | Значення | Відносний чи абсолютний URL | | Якщо не задано | Відправлення на поточну адресу сторінки | | Працює разом із | `method="get"` чи `method="post"` | | Використовується для | Зв'язку форми із серверним обробником даних | --- **Простими словами:** `action`, це **«куди відправляти лист»**. Форма збирає дані, а `action` каже браузеру: > «Ось адреса отримувача, туди неси все, що ввів користувач.»Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.