Тег form: опис, значення, застосування

HTML-форми — це дуже потужний інструмент для взаємодії з користувачами, однак з технічних причин не завжди очевидно, як використовувати їх на повну силу. Простий відправки даних в цьому випадку недостатньо — також необхідно переконатися, що дані, які користувачі заповнюють у формах, будуть відправлені в правильному форматі, який потрібен для їх успішної обробки, і що це не зламає діючі програми. Також важливо допомогти користувачам заповнити форми правильно і не випробувати розчарування при спробі скористатися додатками. Для створення HTML-форми використовується тег

. Він фактично не створює поля, але застосовується в якості батьківського контейнера для таких елементів як і . Якщо ви хочете зробити форму простий підписки, із звичайною перевіркою і оплатою, або ж інтерактивні веб-додатка, для роботи вам потрібно буде використовувати HTML-теги елементів, найважливішим з яких є

.

Як працюють стандартні форми HTML

Форми HTML були винайдені і в основному стандартизовані до появи асинхронного jаvascript і складних веб-додатків. Сьогодні використовуються вхідні дані форм, кнопки та інші механізми взаємодії, але в основі цього лежить система, заснована на парадигмі HTTP-запиту та відповіді. Коли користувач завантажує сторінку, надсилається http-запит (як правило, це так званий GET-запит). Він відправляється вашим браузером на сервер, і зазвичай сервер відповідає веб-сторінкою, яку шукає користувач. Ця взаємодія є одним з найбільш фундаментальних понять Інтернету. І це пояснює, як саме працюють HTML-форми.

Процес обміну інформацією з сервером

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

і має атрибут name (ім'я), а також його значення. Значення визначається по-різному. Для текстових це буде те значення, яке було введене в поле користувачем сайту. Для радіокнопки — значення обраного параметра. Користувач може налаштувати значення, але найчастіше не може налаштувати атрибут name. При цьому створюється набір пар "ім'я-значення", в яких значення визначаються користувальницьким введенням.


Основна відмінність між формою і звичайним HTML-документом полягає в тому, що в більшості випадків дані, зібрані формою, відправляються на веб-сервер. У цьому випадку необхідно налаштувати веб-сервер для отримання та обробки даних. Атрибут action тега

визначає розташування (URL), куди повинні бути відправлені зібрані дані.

Як виглядає відповідь сервера

Коли форма відправлена пари ім'я-значення і всі поля всередині

елементи включаються в HTTP. Проводиться запит на URL-адресу, визначену у формі атрибут action. Тип запиту (GET або POST) буде знаходитися в атрибуті method. Це означає, що всі дані, надані користувачем, відправляються на сервер одразу в процесі відправлення форми, і сервер може робити з цими даними все, що захоче. Коли сервер отримує форму відправки, він сприймає її, як будь-який інший запит HTTP. Сервер робить все, що йому потрібно зробити з включеними даними, і видає відповідь назад в браузер.
Якщо згадати, що завантаження сторінки є відповіддю, можна помітити, що те ж саме відбувається тут. У типовій формі, створеної за допомогою тега

відповідь — це нова сторінка, завантажувана браузером. Як правило, нова сторінка замінює поточне утримання, але це може бути перевизначено з допомогою target-атрибуту. Переважна більшість онлайн-форм працюють таким чином, і саме тому користувач отримує відправку на сторінку «Спасибі», коли заповнює форму підписки по електронній пошті.

Веб-додатки та форми без тега

Сучасні інтерактивні веб-додатки використовують jаvascript для запуску асинхронних http-запитів. Це такі виклики до сервера, які не викликають перезавантаження сторінки. Вони не покладаються на тег

— HTML-елемент, вбудований в поведінку. Вони не об'єднують в єдине ціле усі дані користувача і не відправляють їх відразу. З цієї причини багато верстальники на HTML+JS у веб-додатках не використовують тег

на всіх формах. Частіше вони просто застосовують його як свого роду контейнер для різних типів полів введення і елементів. У цьому випадку використовуються атрибути action method і не будуть видні.

Детальніше про форми

HTML-форми є одним з основних моментів взаємодії користувача з сайтом або додатком. Вони дозволяють користувачам відправляти дані на сайт. Велику частину часу дані відправляються на сервер, але веб-сторінка може перехопити його, щоб використовувати самостійно. Є багато пов'язаних з формою елементів — різні види кнопок, селекторів для різних типів, механізмів зворотного зв'язку. Тому можуть виникати труднощі в процесі вирішення питання про те, які необхідно присвоїти значення атрибутів тега

. Коли справа доходить до створення форм, потрібно зробити так, щоб вони змогли працювати на різних розмірах екрану. Важливо створити їх доступними для людей з обмеженими можливостями. Тому форми і тег

з атрибутами - можливо, самий складний аспект в HTML.

З чого складається форма

HTML-форма складається з одного або декількох віджетів. Вони можуть бути однорядковими або багаторядковими текстовими полями, полями вибору, кнопками або перемикачами. Найчастіше вони пов'язані з атрибутом , який описує їх мета - правильно реалізовані можуть чітко проінструктувати як зрячих, так і незрячих користувачів про те, як потрапити в форму введення. Атрибут пов'язаний правильно з з допомогою їх for та id-атрибутів відповідно. Мітка for при цьому посилається на id атрибут відповідного віджета, а програма для читання з екрану, використовуючи його, буде зачитувати те, що в ньому написано. Крім структур, специфічних для тега

важливо пам'ятати, що форми — просто код на мові HTML. Це означає, що можна використовувати всю міць HTML для структуризації форм. Звичайною практикою є використання тега щоб обернути елементи з тегом . Також широко використовуються списки HTML, для структурування застосовують множинні чекбокси або радіокнопки. Після створення полів для введення залишається додати кнопку за допомогою тега і перевірити результат. Гнучкість HTML-форм робить їх одними з самих складних структур у форматі HTML. Але з допомогою правильної структури при побудові HTML-форми можна гарантувати, що вона буде одночасно зручною та доступною.