Форми у вебсайтах

Так. Інтернет об’єднав мільйони цифрових документів у цифрову мережу. Але що ще більш важливо, він об’єднав людей і дав їм можливість завантажувати в інтернет тексти, світлини та відео. Він дав нам можливість спілкуватись в цифровому вимірі. Саме можливість спілкування, обміну думками, створення та поширення змісту була одним з ключових факторів зростання популярності всесвітньої павутини, коли вона з’явилась.

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

Форми та їхні складові

Що таке форма

У фізичному світі, коли ми в контексті документу кажемо слово «форма», то уявляємо щось на зразок:

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

Стандартна структура форм дозволяла згодом фахівцю, до якого ці паперові форми надходили, переносити їхній зміст в паперовий каталог, в якому інформація, зібрана з усіх форм, зберігалась у вигляді таблиці. Згодом, з появою комп’ютерів, паперові таблиці перетворились на цифрові, але суть процесу не змінилась — стандартна форма допомагала збирати дані в такому вигляді, щоб їх було легко переносити у таблицю. Оці от таблиці з даними ще називають базами даних.

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

Саме паперові форми були пращурами форм цифрових.

Загальна ідея тут збереглась, форма — це сукупність стандартних полів інформації. Але в цифрових формах на додачу до процесу заповнення є ще й відправлення форми. Воно відбувається, коли ви натискаєтена пов’язану з формою кнопку.

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

Причому автоматизація цього процесу дозволила не лише суттєво полегшити та пришвидшити процес наповнення баз даних, але й процес отримання даних з цієї бази.

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

Ще один приклад форми — це поле вводу на сайті Google. В ньому ви вказуєте будь-яку інформацію і отримуєте відповідний запиту зміст.

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

У вебсайтах всі форми загортаються у тег <form>.

Тепер спробуймо з’ясувати, з яких елементів складаються форми.

Засоби введення інформації в форми

Поля введення

Базовим засобом введення інформації в форму є однорядкове поле введення. Йому відповідає тег <input>.

Як правило, в нього вводиться невеликий за обсягом текст — наприклад, ім’я чи прізвище. Основою такого поля є інтерактивна область введення інформації — контейнер.

На додачу до нього поле може містити назву (англійською label), текст-заповнювач (англійською його називають placeholder), супровідний текст-пояснення (наприклад, з підказками стосовно допустимої кількості символів для даного поля) та введений текст (якщо поле вже заповнене).

Назва поля — це інтерактивний елемент. З ним може взаємодіяти і користувач, і програма читання з екрана. Так, якщо користувач натисне на назву поля, воно стане активним. А якщо користувач, що не бачить, перейде до назви поля курсором, програма читання прочитає його назву.

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

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

В деяких випадках для більшої наочності (або з суто декоративною метою) у полях вводу використовують ще й іконки. Наприклад, в полях з паролем, телефоном або електронною адресою.

При цьому, як і в будь-якого іншого інтерактивного елемента, в полів введення існують різні стани, що відрізняються візуально:

  • Не обрано (стан за замовчуванням). Відповідає полю, що не обране користувачем зараз.
  • Наведення. В цьому рамка поля та його тло можуть дещо змінювати колір.
  • Активне поле (стан фокусу). Це стан, за якого користувач може вводити інформацію в поле. Візуально в ньому мають використовуватись більш насичені кольори.
  • Заблоковане поле. В деяких випадках поле є (або стає) недоступним для заповнення. Наприклад через те, що заповнення форми було обмежене часом або іншими умовами заповнення форми.

Також в поля можуть бути стани, пов’язані з результатами його заповнення:

  • Статус перевірки поля. В сучасних станах є можливість миттєвої перевірки поля, одразу після його заповнення. Як правило, перевірка дійсно миттєва, і цей статус не видно. Але іноді, через слабке інтернет-з’єднання і за умови, що для перевірки інформації в даному полі направляється запит до бази даних, може з’явитись цей стан. Як правило, тоді поруч з полем або всередині поля з’являється характерна іконка підвантаження.
  • Поле заповнене коректно. В цьому стані форма демонструє, що поле заповнене відповідно до вимоги форми. Цей стан часто позначається зеленою іконкою з «галкою» або навіть зеленою рамкою контейнера.
  • Поле заповнене з помилкою. Якщо поле заповнене некоректно, може з’явитись контекстна іконка, колір рамки або тла набуває червоного відтінку, а поруч з полем з’являється підказка, як виправити помилку.


Додаткові типи полів введення

На додачу до однорядкового поля введення інформації існує ще низка спеціальних полів, що мають відповідні функціональні особливості. Кожному з них відповідає певний атрибут типу, який прописується у тег: (<input type=”АТРИБУТ”>).

До них відносяться:

  • Поле пошуку (атрибут “search”)
  • Поле дати (атрибут “date”)
  • Поле паролю (атрибут “password”)
  • Поле кількості (атрибут “range”)
  • Поле обрання кольору (атрибут “color”)

Серед часто застосованих ще є поля для введення телефону (атрибут “tel”) та імейлу (атрибуту “email”), але вони радше мають технічні, ніж візуальні відмінності, тому в цьому матеріалі ми їх докладно розбирати не будемо.

Далі ми опишемо функції та особливості оформлення полів докладніше.

Поле пошуку

За усіма особливостями поле пошуку аналогічне до звичайного поля вводу, але в цьому полі з’являється додатковий функціональний елемент у вигляді хрестика, що дозволяє очистити дане поле одним натисканням.


Текстова область

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

За замовчуванням воно містить кілька рядків. Якщо введений користувачем в це поле текст перевищує його висоту, в ньому з’являється можливість прокручування.

Для опису такого елементу використовується тег <textarea>.

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

За станами наведення це поле аналогічне до стандартного поля вводу.

Поле дати

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


Поле паролю

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

Поле діапазону

Поле діапазону виглядає як повзунок. Воно складається з таких компонентів як незаповнена ділянка, заповнена ділянка та повзунок, що їх відділяє. Це поле зручно використовувати, наприклад, для регулювання рівня гучності, яскравості тощо. 

Має неактивний стан, стан наведення та стан натискання.

Поле обрання кольору

Поле вибору кольору дозволяє викликати нативну палітру вашої операційної системи. 

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

Радіокнопки

Радіокнопки мають круглу форму і використовуються, коли користувачу необхідно вибрати один варіант із множини. Наприклад, для вибору статі або однозначної відповіді на питання — так або ні.

Візуально радіокнопка часто складається з назви радіокнопки (або пов’язаного з нею варіанту вибору) та безпосередньо елементу управління. Має неактивний, активний стани, а також стан наведення та заблокований стан.

Радіокнопки добре працюють для множин до 5-6 елементів. Коли їх стає більше — доцільніше використовувати поле вибору (його ми опишемо далі у цьому матеріалі).

В HTML їм відповідає атрибут «radiobutton», тому на жаргоні їх часто називають «радіобаттони».

Прапорці (чекбокси)

Прапорці використовуються тоді, коли користувач може зробити множинний вибір варіантів. Наприклад, обрати декілька інгредієнтів до піци. Ще одним контекстом використання прапорців є, навпаки, вибір з одного варіанту (як правило «так») — тоді використовується один прапорець. Ви з подібним маєте справу щоразу, коли укладаєте договір користування. З точки зору оформлення, прапорці мають квадратну форму. Часто їх супроводжує назва, натискання на яку активує пов’язаний з нею прапорець. З прапорцем може бути пов’язаний і ілюстративний елемент.

Прапорці можуть мати неактивний та активний стани, а також стан наведення та заблокований стан.

В HTML їм відповідає атрибут «checkbox», тому на жаргоні їх часто називають «чекбоксами».

Поля вибору

Поле вибору використовується, коли необхідно обрати один або декілька варіантів з великої множини опцій. І під великою ми маємо на увазі діапазон від кількох десятків до десятків тисяч варіантів.

Візуально поле вибору виглядає як контейнер, якому відповідає назва й текст-наповнювач. З полем вибору може бути також пов’язаний додатковий пояснюючий текст. В контейнері, як правило, праворуч, розташовують стрілку-індикатор. Іноді зміст поля можуть доповнювати іконкою.

Якщо натиснути на поле вибору, розкривається меню зі списком елементів, що відповідають даному полю.

За замовчуванням поле перебуває в неактивному стані. Активний стан — це коли поле є відкритим і ви бачите відповідні йому опції у випадаючому елементі. В поля також є стан наведення та заблокований стан.

Цьому полю введення відповідає тег <select>, тому на жаргоні його також називають «селектбоксом».

На додачу до стандартного, існують додаткові підтипи полів вибору.

Типи полів вибору

Поле введення з автодоповненням та автозаповненням

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

При цьому з появою цього контекстного переліку поле введення перетворюється на поле вибору.

Англійською цей принцип ще називають autosuggest (автоматична пропозиція). В цьому випадку система пропонує декілька варіантів заповнення поля. Цю механіку ви добре знаєте, адже її активно використовує Google.

Є ще одна подібна механіка, що називається автозаповнення (autocomplete). Вона побудована на принципі, коли система пропонує варіанти заповнення поля.

Поле вибору з групами

В деяких полях вибору варіанти у спливаючому елементі об’єднані в групи. Це виправдано, наприклад, для групування міст за областями або вулиць за районами. Візуально це працює аналогічно до того, як демонструється ієрархія у багаторівневих списках.

Поле вибору з множинним вибором

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

Інші поля введення, які часто трапляються

Кредитна картка

Досить поширеними у використанні є поля, пов’язані з кредитною карткою. Для їх реалізації доводиться використовувати додаткові програмні сценарії, які дозволяють розбивати номер кредитної картки на окремі групи цифр та вибирати відповідне лого платіжної системи в полі введення.

Captcha та reCaptcha

Captcha та reCaptcha це спеціальні додаткові поля, покликані знизити кількість автоматизованого спаму, з яким часто доводиться мати справу всім, хто має форми на власному сайті. Річ у тім, що більшість спам-роботів поки що не вміє обходити застосовані в цих полях алгоритми ідентифікації спамерів. Ви з ними, певно, і самі маєте справу час від часу.

Ось декілька прикладів таких полів:

Кнопки

На початку матеріалу ми зазначали, що на відміну від паперових форм, які можна лише заповнити, в цифрових формах є ще відправлення. В більшості форм ця дія виконується за допомогою кнопок. В мові гіпертекстової розмітки їм відповідає тег <button>.

Насправді до кнопок можуть бути прив’язані й інші дії: збереження файлу, друк документу, завантаження зображення, видалення об’єкту, перехід до наступного елементу в списку тощо. В принципі, виконання будь-якої дії в межах сайту виконується шляхом натискання кнопки.

Кнопка може складатись з контейнера (тобто, області, на яку можна натиснути), тексту (оскільки кнопки пов’язані з діями, краще за все, щоб текст містив відповідне дієслово — «оформити замовлення», «видалити», «надрукувати» тощо) та контекстної іконки.

Кнопка може перебувати в декількох станах:

  • Звичайний стан — означає, що кнопка доступна для натискання. Це стан за замовчуванням.
  • Наведення — це стан, за якого на кнопку наводиться курсор. Часто супроводжується легкою візуальною зміною кнопки, щоб підкреслити її інтерактивність.
  • Натискання — активний стан, коли користувач натиснув на кнопку, але ще не відпустив її. Після того, як він відпускає палець або мишку, стан повертається до звичайного.
  • Фокус — це стан, за якого користувач виділив цей елемент за допомогою клавіатури чи іншого засобу введення.
  • Обробка — це стан, коли після натискання кнопки та відправки форми почалась її обробка.
  • Заблоковано — це стан, за якого на кнопку не можна натиснути. Часто такий стан пов’язаний з тим, що одне чи декілька необхідних полів у даній формі не були заповнені.

На завершення

В цьому матеріалі ми розглянули не всі, а лише типові елементи форм. У п’ятій версії HTML з’явилось багато різних підтипів полів введення інформації, опис яких міг би займати цілий модуль.

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

Надалі, поза межами курсу «Основи вебдизайну», ми будемо докладніше розбирати типові форми та особливості роботи з ними, а також додаткові інтерактивні можливості форм.

·
7040
·
14
·
dislikesosogoodsuper 130
Наступна стаття
Навігація у вебсайтах
1419
Головна