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-код вище буде відображатися в браузері:
ЧоловічаЖіноча
Інше
Кнопка ’Відправити’
<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 визначає дію, яку буде виконано при відправці форми.
Зазвичай дані форми відправляються на веб-сторінку на сервері, коли користувач натискає кнопку відправки.
У наведеному вище прикладі дані форми відправляються на сторінку на сервері з ім’ям "/action_page.html". Ця сторінка містить серверний скрипт, який обробляє дані форми:
<form action='/action_page.html'>
Якщо атрибут action пропущений, дію встановлено на поточну сторінку.
Атрибут Target
Атрибут target вказує, чи буде відправлений результат відкриватися в новій вкладці браузера, у фреймі або в поточному вікні.
За замовчуванням значення '_self' означає, що форма буде відправлена в поточному вікні.
Щоб зробити результат форми відкритим в новій вкладці браузера, використовуйте значення '_blank':
Іншими допустимими значеннями є '_parent', '_top' або ім’я, яке представляє ім’я 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 українською.
