Урок. HTML. Форми

Курс по основам HTML | CSS. W3Schools українською. Уроки для початківців



HTML/CSS. HTML форми

HTML форма. Приклад

First name:

Last name:


Спробуйте самі »

Елемент <form>

HTML елемент <form> визначає форму, яка використовується для збору даних користувача:

<form>
.
form elements
.
</form>

HTML форма містить елементи форми.

Елементи форми - це різні типи елементів введення, такі як текстові поля, прапорці, перемикачі, кнопки надсилання та багато іншого.


Елемент <input>

Елемент <input> є найважливішим елементом форми. Елемент <input> може відображатися кількома способами, залежно від типу атрибуту.

Ось кілька прикладів.

Тип Опис
<input type="text"> Визначає одне рядкове поле введення тексту
<input type="radio"> Визначає radio-перемикач (для вибору одного з багатьох варіантів)
<input type="submit"> Визначає кнопку відправки (для відправки форми)

Більш докладно про типи введення ви дізнаєтеся пізніше в цьому підручнику.


Введення тексту - text input

<input type="text"> визначає одне рядкове поле input для введення тексту:


Приклад:

<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
</form>
Спробуйте самі! »

Так виглядатиме в браузері:

First name:

Last name:

Примітка: Саму форму не видно. Також зверніть увагу, що типова (за умовчанням) ширина текстового поля становить 20 символів.


Кнопка radio для введення

<input type="radio"> визначає radio-кнопку.

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

Приклад:

<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>
Спробуйте самі! »

Наведений вище HTML-код так буде відображатись у веб-браузері:

Male
Female
Other

Кнопка Submit (Відправити)

<input type="submit"> визначає кнопку для відправки даних форми до обробника форм. Обробник форм зазвичай є сторінкою сервера зі сценарієм для обробки вхідних даних. Обробник форм вказано в атрибуті action форми:

Приклад:

<form action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>
Спробуйте самі! »

Наведений вище HTML-код так буде відображатись у веб-браузері:

First name:

Last name:



Атрибут action (дії)

Атрибут action визначає дію, яку слід виконати після відправки форми. Зазвичай, дані форми надсилаються на веб-сторінку на сервері, коли користувач натискає на кнопку "Submit" ("Відправити").

У наведеному вище прикладі дані форми відправляються на сторінку на сервері "/action_page.php". Ця сторінка містить серверний сценарій, який обробляє дані форми:

Приклад:

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

Якщо атрибут action опущений, дія виконується на поточній сторінці.


Атрибут target (ціль)

Атрибут target визначає, чи буде відкрито поданий результат у новому вікні, на вкладці веб-браузера, фреймі або в поточному вікні. Значення за замовчуванням - "_self", що означає, що форма буде надіслана в поточному вікні. Щоб відкрити результат у новій вкладці веб-браузера, скористайтеся значенням "_blank":

Приклад:

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

Іншими дійсними значеннями є "_parent", "_top" або назва, що представляє назву фрейму.

Атрибут method (метод)

Атрибут method вказує метод HTTP (GET або POST), який буде використовуватися під час відправки даних форми:

Приклад:

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

або:

Приклад:

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

Коли використовувати GET?

Метод за замовчуванням при передачі даних форми GET. Однак, коли GET використовується, дані, надіслані формою, будуть видимі в полі адреси сторінки:

Приклад:

/action_page.php?firstname=Mickey&lastname=Mouse

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

Коли використовувати POST?

Завжди використовуйте POST, якщо дані форми містять конфіденційну або особисту інформацію. Метод POST не відображає подані дані форми в полі адреси сторінки.

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

Атрибут name

Для кожного поля введення має бути подано атрибут name (назва). Якщо атрибут name пропущений, дані цього поля введення взагалі не надсилатимуться.

У цьому прикладі буде подано лише поле вводу "Last name" ("Прізвище"):

Приклад:

<form action="/action_page.php">
  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="Submit">
</form>
Спробуйте самі! »

Групування даних форм за допомогою <fieldset>

Елемент <fieldset> використовується для групування пов'язаних даних у формі. Елемент <legend> визначає заголовок для елемента <fieldset>.

Приклад:

<form action="/action_page.php">
  <fieldset>
    <legend>Personal information:</legend>
    First name:<br>
    <input type="text" name="firstname" value="Mickey"><br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>
Спробуйте самі! »

Так цей HTML код виглядатиме в браузері:

Personal information: First name:

Last name:



Перевірте себе вправами!


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

Атрибут Опис
accept-charset Вказує набір символів, що використовується у поданій формі (за замовчуванням: набір символів сторінки).
action Вказує адресу (url), куди подати форму (за умовчанням: сторінка подання).
autocomplete Вказує, чи має браузер автоматично заповнювати форму (за умовчанням: увімкнено).
enctype Визначає кодування поданих даних (за умовчанням: url-encoded).
method Вказує метод HTTP, який використовується під час відправки форми (за умовчанням: GET).
name Вказує назву, що використовується для ідентифікації форми (для використання DOM: document.forms.name).
novalidate Вказує, що браузер не повинен перевіряти форму.
target Вказує ціль адреси в атрибуті action (за умовчанням:_self).

Примітка: Ви дізнаєтеся більше про атрибути форм у наступних розділах.


warning

Не викладайте свій код безпосередньо в коментарях, він відображається некоректно. Скористайтесь такими сервісами, як jsfiddle.net, codepen.io, liveweave.com, jsbin.com, збережіть код на будь-якому з цих сервісів і в коментарях дайте на нього посилання. Так буде видно і код, і результат.