Skip to main content

Як елемент <form> пов'язує поля вводу та відправлення даних?

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

Елемент <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">loginAlex
<input type="email" name="email" value="a@mail.com">emaila@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-запиту (у тілі запиту).
  1. Відправляє їх на сервер за адресою з 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>, це як конверт, кожне поле, заповнений рядок у листі, а кнопка «Надіслати», листоноша, який несе весь вміст на сервер.

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

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

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

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