Skip to main content

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

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

Атрибут method у тегу <form> визначає спосіб відправлення даних із форми на сервер, тобто як саме браузер передасть введену користувачем інформацію.

Він задає HTTP-метод запиту і напряму впливає на те, де будуть знаходитися дані: в адресному рядку чи в тілі запиту.

1. Синтаксис

html
<form action="/submit" method="post"> <input type="text" name="username"> <button type="submit">Надіслати</button> </form>

Тут:

  • action="/submit": куди відправляємо дані;
  • method="post": як відправляємо.

2. Два основні значення атрибута method

МетодЯк працюєДе видно даніДе використовується
GETДані додаються до URL (у рядку браузера)В адресі (наприклад, ?name=Oleh)Пошук, фільтри, прості форми
POSTДані відправляються «в тілі» HTTP-запитуНевидимі користувачуРеєстрація, логін, форми з паролями

3. Приклад методу GET

html
<form action="/search" method="get"> <input type="text" name="q" placeholder="Пошук..."> <button type="submit">Знайти</button> </form>

Якщо користувач введе телефон, браузер відправить запит:

javascript
/search?q=телефон

Особливості:

  • дані видно в адресному рядку;
  • легко копіювати й ділитися посиланням;
  • не можна передавати конфіденційні дані (паролі, картки тощо);
  • обмеження за довжиною URL (близько 2000 символів).

4. Приклад методу POST

html
<form action="/register" method="post"> <input type="text" name="login"> <input type="password" name="password"> <button type="submit">Зареєструватися</button> </form>

Браузер відправить дані в тілі HTTP-запиту, а не в адресному рядку:

javascript
POST /register Content-Type: application/x-www-form-urlencoded login=Oleh&password=12345

Особливості:

  • дані не видні користувачу;
  • немає обмежень за довжиною;
  • підходить для відправлення особистої або великої інформації (файли, форми реєстрації, замовлення тощо).

5. Інші методи (використовуються рідко)

Хоча HTML-форми підтримують лише get і post, у сучасних веброзробках (через JavaScript / API) трапляються й інші HTTP-методи:

  • PUT: оновлення даних;
  • DELETE: видалення;
  • PATCH: часткове оновлення.

Але вони працюють лише через JavaScript або API-запити, не напряму в HTML.

Підсумок:

ПараметрЗначення
Атрибутmethod
ПризначенняВизначає спосіб передачі даних форми
Основні значенняget і post
GETДодає дані в URL, підходить для пошуку
POSTПередає дані в тілі запиту, підходить для форм з особистою інформацією
Якщо атрибут не вказаноТипово використовується GET

Простими словами: method, це «як відправляємо лист»:

  • GET: як листівка, текст видно всім;
  • POST: як конверт, дані всередині, ніхто не бачить.

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

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

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

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