HTML Форми
Форма HTML використовується для збору даних, введених користувачем. Введені користувачем дані найчастіше надсилаються на сервер для обробки.
Елемент <form>
HTML елемент <form> визначає форму, яка використовується для збору користувацького вводу:
<form>
.
елементи форми
.
</form>
HTML-форма містить елементи форми.
Елементи форми - це різні типи елементів вводу, такі як текстові поля, прапорці, перемикачі, кнопки надсилання тощо.
Елемент <input>
Елемент <input> є найбільш важливим елементом форми.
Елемент <input> може відображатися кількома способами, в залежності від атрибута type.
Ось кілька прикладів:
| Тип | Опис |
|---|---|
| <input type="text"> | Визначає однорядкове поле вводу текста |
| <input type="radio"> | Визначає перемикач (для выбору одного з кількох варіантів) |
| <input type="submit"> | Визначає кнопку відправки (для відправки форми) |
Ви дізнаєтесь набагато більше про типи вводу пізніше в цьому підручнику на нашому сайті W3Schools українською.
Введення тексту
<input type='text'> визначає однорядкове поле вводу для введення тексту - text input:
Приклад
<form>
Ім’я:<br>
<input type='text' name='firstname'><br>
Прізвище:<br>
<input type='text' name='lastname'>
</form>
Спробуйте самі »
Ось так це буде виглядати в браузері:
Ім’я:Прізвище:
Примітка: Сама форма не відображається. Також зверніть увагу, що ширина текстового поля за умовчанням містить 20 символів.
Радіо кнопка введення
<input type='radio'> визначає радіокнопку.
Перемикачі (радіокнопки) дозволяють користувачу обрати ОДИН з обмеженної кількості варіантів:
Приклад
<form>
<input type='radio' name='gender" value='male' checked> Чоловіча<br>
<input type='radio' name='gender' value='female'> Жіноча<br>
<input type='radio' name='gender' value='other'> Інше
</form>
Спробуйте самі »
Ось як HTML-код вище буде відображатися в браузері:
ЧоловічаЖіноча
Інше
Кнопка Submit / Надіслати
<input type='submit'> визначає кнопку для надсилання даних форми в обробник форм.
Обробник форм зазвичай являє собою серверну сторінку зі скриптом для обробки вхідних даних.
Обробник форми вказується в атрибуті action форми:
Приклад
<form action='/action_page.html'>
Ім’я:<br>
<input type='text' name='firstname' value='Mickey'><br>
Прізвище:<br>
<input type='text' name='lastname' value='Mouse'><br><br>
<input type='submit' value='Надіслати'>
</form>
Спробуйте самі »
Ось як HTML-код вище буде відображатися в браузері:
Атрибут Action
Атрибут action визначає дію, яку буде виконано при надсиланні форми.
Зазвичай дані форми відправляються на вебсторінку на сервері, коли користувач натискає кнопку надсилання (submit).
У наведеному вище прикладі дані форми відправляються на сторінку на сервері з ім’ям "/action_page.html". Ця сторінка містить серверний скрипт, який обробляє дані форми:
<form action='/action_page.html'>
Якщо атрибут action пропущений, дію встановлено на поточну сторінку.
Атрибут Target
Атрибут target вказує, чи буде надісланий результат відкриватися в новій вкладці браузера, у фреймі або в поточному вікні.
За замовчуванням значення '_self' означає, що форма буде відправлена в поточному вікні.
Щоб зробити результат форми відкритим в новій вкладці браузера, використовуйте значення '_blank':
Іншими допустимими значеннями є '_parent', '_top' або name, яке представляє ім’я iframe.
Атрибут Method
Атрибут method вказує метод HTTP (GET або POST), який буде використовуватись при надсиланні даних форми:
або:
Коли використовувати метод GET?
Метод за замовчуванням при надсиланні даних форми - GET.
Однак при використанні GET відправлені дані форми будуть видимі в полі адреси сторінки (адресному рядку):
/action_page.html?firstname=Mickey&lastname=Mouse
Примітка по GET:
- Додає дані в формі надсилання до URL-адреси в парах ім’я/значення
- Довжина URL-адреси обмежена (близько 3000 символів)
- Ніколи не використовуйте GET для надсилання конфіденційних даних! (Буде відображатися в URL-адресі)
- Корисно для подачі форм, де користувач хоче зробити закладку результату
- GET є найкращим варіантом для незахищених даних, наприклад рядків запитів в Google
Коли використовувати метод POST?
Завжди використовуйте POST, якщо дані форми містять конфіденційну або особисту інформацію. Метод POST не відображає відправлені дані форми в адресному рядку сторінки.
Примітка по POST:
- POST не має обмежень за розмірами і може використовуватися для надсилання великих обсягів даних
- Надіслані з POST форми можна додати в закладки
Атрибут Name
Кожне поле вводу повинно мати атрибут name для надсилання.
Якщо атрибут name опущений, дані його поля вводу не будуть відправлені взагалі.
Цей приклад буде відправляти тільки поле вводу "Last name" (Прізвище):
Приклад
<form action='/action_page.html'>
First name:<br>
<input type='text' value='Mickey'><br>
Last name:<br>
<input type='text' name='lastname' value='Mouse'><br><br>
<input type='submit' value='Надіслати'>
</form>
Спробуйте самі »
Групування даних форми за допомогою <fieldset>
Елемент <fieldset> використовується для групування пов’язаних даних у формі.
Елемент <legend> визначає заголовок для елемента <fieldset>.
Приклад
<form action='/action_page.html'>
<fieldset>
<legend>Особиста інформація:</legend>
Ім’я:<br>
<input type='text' name='firstname' value='Mickey'><br>
Прізвище:<br>
<input type='text' name='lastname' value='Mouse'><br><br>
<input type='submit' value='Надіслати'>
</fieldset>
</form>
Спробуйте самі »
Ось як HTML-код вище буде відображатися в браузері:
HTML Вправи
Список всіх атрибутів <form>:
| Атрибут | Опис |
|---|---|
| accept-charset | Вказує набір символів, що використовується у відправленої формі (за замовчуванням: набір символів сторінки). |
| action | Вказує адресу (url), куди відправити форму (за замовчуванням: сторінка відправки). |
| autocomplete | Вказує, чи повинен браузер автоматично заповнювати форму (за замовчуванням: включено). |
| enctype | Визначає кодування відправлених даних (за замовчуванням: url-encoded). |
| method | Вказує метод HTTP, який використовується під час відправки форми (за замовчуванням: GET). |
| name | Вказує назву, яка використовується для ідентифікації форми (для використання DOM: document.forms.name). |
| novalidate | Вказує, що браузер не повинен перевіряти форму. |
| target | Вказує ціль адреси в атрибуті action (за замовчуванням: _self). |
Ви дізнаєтеся більше про атрибути форми в наступних розділах нашого сайту W3Schools українською.
Для отримання повного списку всіх доступних HTML тегів відвідайте HTML Довідник тегів на нашому сайті W3Schools українською.
HTML — Форми — Відеоурок W3Schools
Це відео пояснює форми та їх використання в HTML.
Частина серії відеоуроків для вивчення HTML для початківців!
