Skip to main content

Що робить атрибут action у <form>?

HTMLJunior~1 хв читання
Запропонувати правку

Атрибут 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
  1. Відправляє їх на сервер за адресою /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 каже браузеру:

«Ось адреса отримувача, туди неси все, що ввів користувач.»

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку