Advertisement
  1. Web Design
  2. HTML & CSS

Створення більш дружніх, зрозумілих веб-форм

by
Read Time:11 minsLanguages:

Ukrainian (українська мова) translation by Andy Yur (you can also view the original English article)

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

Давайте почнемо!

Форми схожі на бесіди

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

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

Тому, коли користувач приходить на сторінку з формою, він бачить чітке питання: «Який у вас адреса електронної пошти?»

Приставучий хлопець на вечірці

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

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

Давайте розглянемо простий приклад.

Форма входу

Процес входу в систему виглядає приблизно так: я вводжу свою адресу електронної пошти, потім ввожу пароль, і натискаю клавішу введення. У цьому прикладі ви дізнаєтеся, як показувати кожне з цих полів тільки після завершення попереднього, використовуючи тільки HTML і CSS. Ми створимо спочатку її, а потім модифікуємо версію.

Зробимо перший запис в нашій розмітці.

Якщо це виглядає трохи складним, не хвилюйтеся, я поясню кожну частину. Давайте почнемо з введення електронної пошти. Ми бачимо кілька атрибутів, доданих в тег за межами імені. Перш за все, тип введення встановлений на «email»; це відносно новий тип введення, який дає нам певну поведінку в підтримці браузерів. Наприклад, на iPhone символ «@» буде відображатися на основній клавіатурі.

Інша особливість типів введення полягає в тому, що форми HTML5 мають здатність перевірки даних на рівні браузера. Це означає, що вам не потрібно писати JavaScript для виконання перевірки для елементів базової форми! Зверніть увагу, що у нас є атрибут «обов'язково» як для елемента електронної пошти, так і для пароля. Як тільки ці два елементи будуть заповнені, а їх значення будуть вважатися коректними в браузері, ви можете навіть налаштувати їх за допомогою псевдоселектора :valid.

Область Регулярних Виразів

Це звичайно здорово, але ми могли б зробити все ще краще. Наприклад, браузер приймає «a @ b» в якості відповідного адреси електронної пошти. Причина цього в тому, що адреса електронної пошти можна налаштувати, щоб отримати щось на зразок «something @ localhost». Наш пароль може бути будь-яким, тому пароль, що складається з одного символу, такий як «a», також вважається коректним. Давайте додамо регулярні вирази, щоб виправити ці проблеми.

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

Ще одна примітка: ви також можете використовувати Regular Expressions for Dummies: Screencast Series керівництво для чайників: серію уроків Джеффрі Шляху.

Давайте розглянемо кожну частину цієї моделі. Регулярні вирази - це спосіб опису та порівняння формату рядка.

Ми почнемо з шаблону електронної пошти.

  • [^ @]* - будь-які цифри і символи, які НЕ містять знак @ або порожній простір.
  • @ - літерне позначення знака @
  • \. - позначення точки
  • [a-zA-Z] - будь-які символи верхнього або нижнього регістру
  • [a-zA-Z]{2,} - комбінація двох або більше букв.

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

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

The . означає «будь-який символ», а {5} говорить, що цих символів має бути не менше 5.

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

Ми завершуємо розмітку додатковими коригуваннями та елементами.

Трохи магії за допомогою :valid CSS

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

Ми хочемо відобразити наступний елемент форми, коли попередні дані введені коректно. Почнемо з того, що приховуємо деякі елементи, таким чином, щоб користувачі могли бачити всю форму, і щоб автозаповнення допомогло користувачеві ввести дані. (Кріс Койєр розповідає про те, чому не слід використовувати display:none тут .) Ми будемо використовувати метод visuallyhidden, описаний в статті Кріса.

Ми почнемо з деяких основних стилів.

conversational-form-base-allconversational-form-base-allconversational-form-base-all

Пропоную використовувати концепцію Кріса. Застосуємо її до елементів, які хочемо приховати.

conversational-form-baseconversational-form-baseconversational-form-base

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

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

Тепер давайте відобразимо їх там де вони повинні бути використовуючи псевдоселектор :valid і селектор +.

conversational-form-animation-allconversational-form-animation-allconversational-form-animation-all

Примітка про кращих прикладах використання

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

Хорошим рішенням цієї проблеми було б використання якогось проміжного стану, без необхідності приховати поле введення, яке допоможе створити пояснення і зворотний зв'язок для форми, в якій є чітка мета і очікувана реакції. Ось модифікована версія, яка використовує масштабування, фільтр розмиття webkit, непрозорість і параметр pointer-events:none щоб показати поля введення користувачеві, у міру їх необхідності. Нам також необхідно переконатися, що pointer-events перезавантажиться, коли поля введення доступні для заповнення і користувач міг би натиснути на них.

conversational-form-animation-modifiedconversational-form-animation-modifiedconversational-form-animation-modified
Погляньте на приклад

Єдина помилка, яку ми повинні швидко виправити: це те, коли користувач натискає на вкладку, він збирається ввести наступний елементи форми. В нашій формі ми заборонимо це додаткове дію за допомогою pointer-events:none, але в CSS немає атрибута «focusable». Замість цього нам потрібно буде управляти цим поведінкою за допомогою JavaScript (з елементами jQuery).

Цей код на JavaScript контролюватиме наші поля введення і відключати / включати їх на основі попереднього стану елемента «: valid». Це не дозволить нам виділити елемент. pointer-events:none все ще працює, і не дозволяє натиснути на нашу кнопку відправлення.

Інші випадки використання

Уявіть собі форму з декількома «шляхами», як в нашому прикладі «вхід в систему або реєстрація». Користувач може вибирати кілька параметрів, які зажадають введення додаткової інформації, наприклад вибір способу доставки або час бронювання столика. У цих випадках простої перевірки може бути недостатньою, і замість цього ми будемо використовувати JavaScript рішення.

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

У наведеному вище прикладі на JavaScript ми відправляємо адресу електронної пошти на сервер по URL-адресою / check_for_user. Сервер поверне проста відповідь в форматі JSON, схожий на наступний.

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

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

Відповіді

Коли ми публікуємо нові прийоми розробки інтерфейсу, вони можуть не працювати у всіх браузерах. На щастя, з цією проблемою легко впоратися. Більшість браузерів впораються з цим, але на жаль, сюди не можна віднести iOS 7 або Android. Для них ми просто встановимо поведінку форми за замовчуванням.

Для цього ми будемо використовувати скрипт Modernizr, щоб визначити чи підтримує браузер перевірку елементів форми. Найкраще використовувати Modernizr для виявлення цих можливостей, але ми можемо і самостійно написати цю функцію. У «Non-Core Detect» від Modernizr включений параметр «forms-validation», тому вам потрібно буде створити свої налаштування бібліотеки. Після того, як ви встановите її, у всіх браузерах, який їх підтримує, до елементу html буде присвоєно клас form validation. Ви можете налаштувати форму, яка буде покращена за допомогою класу formvalidation для підтримуваних браузерів.

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

Ось і все!

Тепер у вас є відмінні способи, щоб вивести ваші форми на новий рівень інтерактивної взаємодії з вашими користувачами. Які ще сильні сторони ви можете уявити, використовуючи псевдо класи :valid і :invalid? Поговоримо про це в коментарях!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.