НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ
Place for your advertisement!
HTML5. Уроки для початківців. W3Schools українською

En

HTML Атрибути форми


В цьому розділі описуються різні атрибути HTML елементу <form>.


Атрибут Action

Атрибут action визначає дію, яка має бути виконана при відправці форми.

Зазвичай дані форми відправляються в файл на сервері, коли користувач натискає кнопку відправки.

В наведеному нижче прикладі дані форми відправляються в файл з іменем "action_page.html". Цей файл містить серверний скрипт (зазвичай на мові PHP), який обробляє дані форми:

Приклад

При відправці відправте дані форми за адресою "action_page.html":

<form action='/action_page.html'>
  <label for="fname">Ім’я:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Прізвище:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Відправити">
</form>
Спробуйте самі »

Примітка: Якщо атрибут action опущений, action встановлюється на поточну сторінку.


Атрибут Target

Атрибут target вказує, де відображати відповідь, отриману після відправки форми.

Атрибут target може мати одне з наступних значень:

Значення Опис
_blank Відповідь відображається в новому вікні або вкладці
_self Відповідь відображається в поточному вікні
_parent Відповідь відображається в батьківському фреймі
_top Відповідь відображається в усьому вікні
framename Відповідь відображається у вказаному фреймі

Значення за замовчуванням _self, що означа, що відповідь відкриється в поточному вікні.

Приклад

Тут відправлений результат відкриється в новій вкладці браузера:

<form action='/action_page.html' target='_blank'>
Спробуйте самі »

Атрибут Method

Атрибут method визначає метод HTTP, який буде використовуватися при відправці даних форми.

Дані форми можуть бути відправлені як змінні URL (з method="get") або як HTTP post транзакція (з method="post").

Метод HTTP за замовчуванням при відправці даних форми - GET.

Приклад

В цьому прикладі використовується метод GET при відправці даних форми:

<form action='/action_page.html' method='get'>
Спробуйте самі »

Приклад

В цьому прикладі використовується метод POST при відправці даних форми:

<form action='/action_page.html' method='post'>
Спробуйте самі »

Примітка до GET:

  • Додає дані форми до URL-адреси в парах ім’я/значення
  • НІКОЛИ не використовуйте GET для відправки конфіденційних даних! (відправлені дані форми видно в URL!)
  • Довжина URL обмежена (2048 символів)
  • Корисно для відправки форм, коли користувач хоче додати результат в закладки
  • GET підходить для незахищених даних, таких як рядки запиту в Google

Примітка до POST:

  • Додає дані форми в тіло HTTP-запиту (відправлені дані форми не відображаються в URL-адресі)
  • POST не має обмежень в розмірі і може використовуватися для відправки великих об’ємів даних.
  • Відправлені форми за допомогою POST неможливо помітити закладками

Порада: Завжди використовуйте POST, якщо дані форми містять конфіденційну або особисту інформацію!


Атрибут Autocomplete

Атрибут autocomplete вказує, чи повинна форма мати автозаповнення або off (відключено).

Коли автозаповнення включено, браузер автоматично заповнює значення на основі значень, які користувач ввів раніше.

Приклад

Форма з автозаповненням на:

<form action="/action_page.html" autocomplete="on">
Спробуйте самі »

Атрибут Novalidate

Атрибут novalidate - це логічний атрибут.

Коли присутній, він вказує, що дані форми (введення) не повинні перевірятися при відправці.

Приклад

Форма з атрибутом novalidate:

<form action="/action_page.html" novalidate>
Спробуйте самі »

HTML Вправи

Перевірте себе за допомогою вправ

Вправа:

Додайте кнопку відправки і вкажіть, що форма має перейти в "/action_page.html".

<form ='/action_page.html'>
Ім’я: <input type='text' name='name'>
<>
</form>


Список всіх атрибутів <form>

Атрибут Опис
accept-charset Визначає кодування символів, що використовуються для відправки форми
action Визначає, куди відправляти дані форми при відправці форми
autocomplete Визначає, чи повинно автозаповнення форми включатися або виключатися
enctype Визначає, як мають бути закодовані дані форми при їх відправці на сервер (тільки для method="post")
method Визначає метод HTTP для використання при відправці даних форми
name Задає ім’я форми
novalidate Вказує, що форма не повинна перевірятися при відправці
rel Визначає зв’язок між пов’язаним ресурсом і поточним документом
target Вказує, де відображати відповідь, отриману після відправки форми

Place for your advertisement!