05 / 05
Елементи форм
Опубліковано 16 травня 2018, останні зміни 14 червня 2019

Створюйте максимально прості форми: запитуйте у користувача тільки вкрай необхідну інформацію.

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

Вирівнюйте поля введення одне під одним, по одному в рядок. Ширина поля має відповідати вмісту, який вводиться в нього. Наприклад, для вводу адреси електронної пошти створіть поле шириною в 30 символів. На маленьких екранах розтягніть поля введення на 100% ширини – це спростить введення інформації.

Ні

Кілька колонок, поля хаотично заповнюють робочу область

Так

Одна колонка, вирівнювання по лівому краю

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

Розташовуйте назву поля та, за необхідності, допоміжний текст-підказку над полем. Не розміщуйте назву або підказку всередині поля – вони зникнуть, як тільки користувач почне вводити текст.

Для введення прізвища, ім'я та по батькові, за можливості, використовуйте одне поле замість трьох. Це спростить заповнення форми та зменшить кількість помилок при вводі.

Назва поля
Назва поля

Текст підсказки

Назва поля
Поле у фокусі
Назва поля
Поле з помилкою
Текст помилки введення

Поля вибору опцій

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

Назва поля
Назва поля
Оберіть опцію зі списку

  • Оберіть опцію зі списку
  • Перша опція
  • Друга опція
  • Третя опція
  • Четверта опція


Назва поля
У фокусі
Оберіть опцію зі списку

  • Оберіть опцію зі списку
  • Перша опція
  • Друга опція
  • Третя опція
  • Четверта опція


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

Чекбокси використовуються для вибору одного, декількох або жодного з варіантів. Для ввімкнення/вимкнення використовуються перемикачі.

Чекбокси
Радіокнопки
Перемикачі

Поля введення дати

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

Для вводу дати народження кращим рішенням є три окремих поля введення.

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















« 2012 »
СічЛютБерКвіТраЧерЛипСерВерЖовЛисГру











« 2010-2019 »
200920102011201220132014201520162017201820192020

Кнопки

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

Звичайна Кнопка
При наведенні Кнопка
При фокусі та натисканні Кнопка
Заблокована Кнопка