Skip to main content

Що робить name у поля форми?

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

Атрибут name у поля форми визначає ім'я змінної, під яким браузер надішле значення цього поля на сервер під час відправлення форми.

Він - як ключ у парі "ключ = значення", де name - це ключ, а введене користувачем значення - це дані, прив'язані до нього.

1. Приклад

html
<form action="/submit" method="post"> <input type="text" name="username" value="Oleh"> <input type="password" name="password" value="12345"> <button type="submit">Увійти</button> </form>

Під час відправлення браузер передасть дані на сервер у такому вигляді:

javascript
username=Oleh&password=12345

Тобто:

  • name="username" -> ключ "username",
  • value="Oleh" -> значення "Oleh".

2. Без name дані не надішлються

Якщо поле не має атрибута name, воно не потрапить у запит, сервер просто не дізнається, що користувач щось ввів.

Приклад:

html
<input type="text" placeholder="Ім'я">

Навіть якщо користувач введе текст, він не буде переданий під час відправлення форми.

3. Принцип роботи

  • Браузер збирає всі елементи форми, які мають name;
  • формує пари name=value;
  • об'єднує їх у рядок і надсилає на сервер через GET чи POST.

Приклад з чекбоксом:

html
<input type="checkbox" name="subscribe" value="yes" checked>

Під час відправлення:

javascript
subscribe=yes

4. Взаємодія з JavaScript

За допомогою name можна легко отримувати значення полів:

html
<form id="form"> <input type="text" name="email" value="test@example.com"> </form> <script> const email = document.forms["form"]["email"].value; console.log(email); // "test@example.com" </script>

5. Коли name особливо важливий

ЕлементЧому потрібен name
<input>Щоб надіслати введене значення
<textarea>Щоб передати текст
<select>Щоб надіслати обраний варіант
<input type="radio">Щоб об'єднати в групу
<input type="checkbox">Щоб ідентифікувати обраний пункт

Підсумок:

ПараметрЗначення
Атрибутname
ПризначенняВказує ім'я поля під час передавання даних
Що робитьПов'язує значення поля з ключем під час відправлення
Без ньогоДані не потраплять у запит
Застосовується доБудь-яких елементів форми (input, textarea, select)

Простими словами: name - це "ярлик" поля, за яким сервер розуміє, які дані до чого належать. Якщо форма - це анкета, то name - це назва рядка в анкеті, а введене користувачем значення - відповідь на це питання.

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

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

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

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