Улучшаем опыт взаимодействия с формами

в 11:19, , рубрики: css3, html, html5, html5 file api, html5 forms, javascript, localStorage, Веб-разработка, метки: , , , , ,

Улучшаем опыт взаимодействия с формами Часто меня спрашивают студенты: «Какой элемент сайта самый важный?», на что я им отвечаю — формы. Ведь с помощью форм пользователи совершают почти все конверсионные действия. Именно с этим элементом связано больше всего проблем. В этой статье я постараюсь рассказать, что можно улучшить при взаимодействии с формами. А заодно описать новые возможности работы с ними в браузерах.

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

Александр Першин подробно рассказывал об этом подходе в своей статье Progressive Enhancement. Если вы до сих пор не сталкивались с ним, то я вам крайне рекомендую прочитать.

Ещё один нюанс: я не считаю, что интерфейс должен работать и выглядеть одинаково во всех браузерах. Я твёрдо уверен в том, что не стоит мучить пользователей со старыми браузерами вашими многокилобайтными библиотеками — им и без этого плохо.

Браузерная статистика рунета

Так как я буду показывать подходы, использующие новые возможности браузеров, взглянем на текущую статистику рунета. Каждый сможет для себя определить степень готовности пользователей. Я разделил её на две категории: полная и частичная поддержка.

Все приёмы в этой статье оценят 56,8% пользователей. В этой статистике присутствуют браузеры: IE 10, Firefox 11-17, Chrome 4-24, Safari 6, Opera 12.

Часть приёмов оценят 80,1% пользователей. Сюда дополнительно включил поддержку: IE 8-9, Safari 4-5, Opera 10-11.

Мобильные браузеры в статистику не включал, хотя они бы дали ещё больший процент поддержки. Информацию брал из LiveInternet со срезом по России. В расчёт попал средний трафик за 3 месяца (октябрь-декабрь) 2012 года.

Новые атрибуты форм в HTML5

Для начала, напомню о новых атрибутах у полей формы, которые буду использовать: required, autofocus, placeholder.

  • required — обязательное поле для заполнения;
  • autofocus — установка фокуса на поле при загрузке страницы;
  • placeholder — описание поля.

Вместе с этим появилось много новых типов полей: date, email, number, range и другие. Однако, самое безобидное из них (email), до сих пор используется с опаской. А ведь для того, чтобы оно заработало специальных действий не нужно. Браузеры, которые не знают этот тип полей, будут считать его текстовым.

Также появились дополнительные селекторы в CSS: E:valid, E:invalid, E:required — с помощью которых можно описывать стилевое оформление полей в разных ситуациях.

Демонстрация работы новых атрибутов полей и их оформления.

Такой подход, конечно, не будет работать в старых браузерах. Однако, так как мы прогрессивно улучшаем форму, нас это не должно сильно беспокоить. Форма остаётся работать даже в старых браузерах. В любом случае, проверка введённых данных должна происходить на серверной стороне. Возьмите себе за правило не доверять пользовательским данным и всегда полностью проверять их на сервере.

Запись данных формы по мере ввода

Одна из частых проблем заполнения форм — введённые данные теряются. Это может произойти по разным причинам: ошибка сайта, переход по ссылке, в конце концов, может отключиться интернет. Решить эту проблему можно по-разному, например, записывать данные в localStorage по мере ввода.

  1. if (window.localStorage) {
  2.   var elements = document.querySelectorAll('[name]');
  3.  
  4.   for (var i = 0, length = elements.length; i < length; i++) {
  5.     (function(element) {
  6.       var name = element.getAttribute('name');
  7.  
  8.       element.value = localStorage.getItem(name) || '';
  9.  
  10.       element.onkeyup = function() {
  11.         localStorage.setItem(name, element.value);
  12.       };
  13.     })(elements[i]);
  14.   }
  15. }

Валидация формы и отправка данных аяксом

Раз уж мы используем атрибуты required, то можно и валидацию сделать по-новому. В спецификации HTML5 для элемента формы добавлен метод checkValidity(). Он возвращает true или false. Стратегия работы формы будет очень простой: если проверка валидации даёт отрицательный результат — мы блокируем отправку формы, в обратном случае — разрешаем отправку.

  1. submit.disabled = !form.checkValidity();

Теперь добавим возможность отправлять форму без перезагрузки, с помощью аякс. Со второй версией спецификации XMLHttpRequest мы получили много интересного. Например, мы можем больше не заниматься сбором данных для отправки формы, для этого есть объект FormData.

  1. form.onsubmit = function(event) {
  2.   if (window.FormData) {
  3.     event.preventDefault();
  4.  
  5.     var data = new FormData(form);
  6.     var xhr = new XMLHttpRequest();
  7.     var url = form.getAttribute('action') + '?time=' + (new Date()).getTime();
  8.  
  9.     xhr.open('post', url);
  10.     xhr.onreadystatechange = function() {
  11.       if (xhr.readyState == 4 && xhr.status == 200) {
  12.         // server response: xhr.responseText
  13.       }
  14.     };
  15.     xhr.send(data);
  16.   }
  17. };

При работе с асинхронными запросами следует помнить, что некоторые браузеры кэшируют результат. Например, это делает Internet Explorer, Mobile Safari (iOS 6) и другие. Чтобы избежать эту проблему, можно добавлять к адресу запроса текущее время.

Сейчас ответ от сервера мы получаем в текстовом виде (xhr.responseText), но со временем это изменится. Например, если мы точно знаем, что ответом будет JSON, мы можем получить JavaScript объект сразу.

  1. var xhr = new XMLHttpRequest();
  2.  
  3. xhr.open(method, url);
  4. xhr.responseType = 'json';
  5.  
  6. xhr.onreadystatechange = function() {
  7.   if (xhr.readyState == 4 && xhr.status == 200) {
  8.     // server response: xhr.response
  9.   }
  10. };
  11.  
  12. xhr.send();

Обратите внимание, что ответ сервера будет в свойстве xhr.response. А свойство xhr.responseType может принимать и другие значения, например: arraybuffer, blob, document.

Демонстрация сохранения данных формы и отправки их с помощью XMLHttpRequest.

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

Предварительный просмотр закачиваемых фотографий

Плавно переходим на работу с файлами в формах. До недавнего времени почти никаких средств для работы с файлами не было. Но всё меняется. Начнём с простого — новые атрибуты для полей загрузки файлов.

  • multiple — позволяет выбирать несколько файлов;
  • accept — даёт возможность указывать, какие файлы выбирать.

Допустим, мы хотим к нашей форме добавить возможность закачивать несколько фотографий. Такое поле будет выглядеть как-то так.

  1. <input type="file" name="image" accept="image/*" multiple>

Хочу напомнить: поле с такими атрибутами будет работать в старых браузерах. Ограничением будет:

  1. Только один файл;
  2. Валидация файлов производится на серверной стороне.

Попробуем улучшить опыт взаимодействия с файлами. Раз мы ожидаем от пользователей добавления фотографий, логично сделать возможным предварительный просмотр. Для этого мы будем использовать объект FileReader из спецификации File API.

  1. document.querySelector('[type=file]').addEventListener('change', function() {
  2.   [].forEach.call(this.files, function(file) {
  3.     if (file.type.match(/image.*/)) {
  4.       var reader = new FileReader();
  5.  
  6.       reader.onload = function(event) {
  7.         var img = document.createElement('img');
  8.         img.src = event.target.result;
  9.  
  10.         div.appendChild(img);
  11.  
  12.         queue.push({file: file, element: img});
  13.       };
  14.  
  15.       reader.readAsDataURL(file);
  16.     }
  17.   });
  18. }, false);

Таким образом, все выбранные фотографии мы сразу же отображаем на сайте.

Улучшаем опыт взаимодействия с формами

А для того, чтобы отправить их с помощью аякса, мы собираем их в массиве queue. Ранее в статье мы использовали объект FormData, сейчас мы просто добавим к нему список файлов.

  1. var data = new FormData(form);
  2.  
  3. queue.forEach(function(element) {
  4.   data.append('image', element.file);
  5. });

Только и всего, остальное остаётся таким же. Форма будет отправлена с файлами без перезагрузки.

Демонстрация предварительного просмотра фотографий и отправки их с помощью аякс.

Drag and drop файлов

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

  1. function previewImages(files) {
  2.   [].forEach.call(files, function(file) {
  3.     if (file.type.match(/image.*/)) {
  4.       var reader = new FileReader();
  5.  
  6.       reader.onload = function(event) {
  7.         var img = document.createElement('img');
  8.         img.src = event.target.result;
  9.  
  10.         div.appendChild(img);
  11.  
  12.         queue.push({file: file, element: img});
  13.       };
  14.  
  15.       reader.readAsDataURL(file);
  16.     }
  17.   });
  18. }

Допустим, зоной для перемещения файлов будет блок с классом wrapper. Добавим события для него.

  1. var file = document.querySelector('[type=file]');
  2. var dropzone = document.querySelector('.wrapper');
  3.  
  4. file.addEventListener('change', function() {
  5.   previewImages(this.files);
  6.   this.value = '';
  7. }, false);
  8.  
  9. dropzone.addEventListener('dragover', function(event) {
  10.   event.preventDefault();
  11.   dropzone.classList.add('active');
  12.   event.dataTransfer.dropEffect = 'copy';
  13. }, false);
  14.  
  15. dropzone.addEventListener('drop', function(event) {
  16.   event.preventDefault();
  17.   dropzone.classList.remove('active');
  18.   previewImages(event.dataTransfer.files);
  19. }, false);

Как видите, мы добавили события начала (dragover) и конца (drop) перемещения файлов. Все перемещённые файлы мы передаём функции previewImages. Таким образом, наша форма работает одинаково с файлами выбранными через сайт и перемещёнными с компьютера.

Процесс загрузки файлов (progress bar)

Фотографии бывают очень большими, поэтому попробуем отобразить процесс загрузки. Для визуализации этого процесса я возьму элемент progress, а вы можете взять div с двигающимся фоном. Сам процесс будет происходить в событии progress из спецификации XMLHttpRequest.

  1. var xhr = new XMLHttpRequest();
  2.  
  3. xhr.upload.addEventListener('progress', function(event) {
  4.   if (event.lengthComputable) {
  5.     progress.value = Math.round((event.loaded * 100) / event.total);
  6.   }
  7. }, false);

Демонстрация drag & drop и прогресса загрузки файлов.

В итоге

Наша простая форма имеет ряд значительных улучшений в области UX.

  1. Валидация происходит в момент ввода;
  2. Введённые данные запоминаются пока не будут отправлены;
  3. Контактные данные сохраняются для повторной работы;
  4. Предварительный просмотр фотографий;
  5. Процесс загрузки файлов.

При этом, так как мы действовали в соответствии с прогрессивным улучшением, наша форма работает везде:

  • в IE 6-7 и других старых браузерах,
  • с отключённым JavaScript,
  • на мобильных устройствах.

Улучшаем опыт взаимодействия с формами
Работа FileReader на iOS 6.

Уверен, занимаясь улучшением UX форм, можно найти более интересные решения. Пожалуйста, добавьте ваши решения, советы, критику в комментариях ниже. Спасибо!

Автор: meritt

Источник

* - обязательные к заполнению поля

Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js