Поддержка HTML5 мобильных форм и типов HTML input. Включайте только самые важные детали в свою форму
Данная статья является анонсом новой функциональности.
Не рекомендуется использовать содержание данной статьи для освоения новой функциональности.
Полное описание новой функциональности будет приведено в документации к соответствующей версии.
Полный список изменений в новой версии приводится в файле v8Update.htm.
Реализовано в версии 8.3.11.2867.
Мы продолжаем развивать мобильную платформу, добавляя в неё функциональность, которая уже имеется в платформе для персональных компьютеров. Кроме этого мы развиваем специфические возможности платформы, актуальные только для мобильных устройств. О некоторых самых важных доработках мы сейчас расскажем.
Планировщик
Объектная модель «мобильного» планировщика не изменилась, а вот способы взаимодействия пользователя с планировщиком поменялись, так как методы ввода информации на мобильных устройствах отличаются от тех, которые применяются в настольных компьютерах.
Например, быстрое редактирование элемента выполняется одиночным кликом по элементу. Долгое нажатие приводит к вызову контекстного меню, и к появлению маркеров, которые позволяют растягивать элемент. Перетаскивание выполняется долгим нажатием и последующим перемещением пальца.
Прокручивание всего планировщика выполняется скроллированием одним пальцем, масштабирование – растягиванием двумя пальцами, и так далее.
Особенностью текущей реализации «мобильного» планировщика является то, что он пока не поддерживает печать.
Форматированный документ
Еще один «новый» объект, который мы добавили в мобильную платформу, это ФорматированныйДокумент . С точки зрения пользователя «мобильный» форматированный документ отличается только тем, что его панель редактирования встроена в сам элемент управления, и является логической частью виртуальной клавиатуры. От вас, как от разработчиков, не требуется её отдельное добавление в конфигурацию. Панель редактирования имеет разный вид в зависимости от типа мобильного устройства (телефон или планшет).
Предварительный просмотр «мобильной» формы в конфигураторе
В конфигураторе, при разработке формы, мы добавили возможность посмотреть, как будет выглядеть ваша форма на мобильном устройстве.
В командной панели вы можете выбрать вариант интерфейса Мобильное устройство , и увидеть, как будет выглядеть форма в стандартной ориентации.
Тут же вы можете повернуть мобильное устройство.
Кроме этого мы предоставили вам возможность выбрать из большого числа распространенных устройств.
Помимо этого вы можете просматривать «мобильные» формы в трех разных масштабах:
- Пиксель в пиксель - когда пикселю экрана мобильного устройства соответствует пиксель экрана окна предварительного просмотра;
- Реальный размер - когда размеры мобильного устройства на экране соответствует геометрическим размерам устройства;
- По размеру окна - когда масштаб отображения подбирается таким образом, чтобы область «мобильного» дисплея помещалась в окно предварительного просмотра без прокрутки.
Пакетная обработка табличных документов
В мобильную платформу мы добавили ряд новых объектов, которые позволяют вам формировать пакеты отображаемых документов. Эта функциональность аналогична той, которая имеется в платформе для персональных компьютеров. Таким образом, теперь вы можете, например, отправлять на печать сразу несколько документов.
Развитие доставляемых уведомлений
Мы реализовали поддержку службы push-уведомлений Windows (WNS , Windows Notification Services). Теперь вы можете использовать функциональность доставляемых уведомлений при работе мобильного приложения на платформах семейства Windows.
Также мы переработали систему обработки ошибок отправки доставляемого уведомления. В ситуациях, в которых раньше ошибка выдавалась исключением, теперь она выдается в виде значения, которое вы можете обработать во встроенном языке.
Аппаратное ускорение в операционной системе Android
На версиях операционной системы Android 4.4.2 и выше мобильная платформа теперь использует аппаратное ускорение. Это позволило увеличить скорость отрисовки интерфейса в 1,5 – 3 раза.
В этой статье мы взглянем на некоторые из новых усовершенствований форм в HTML5, и проанализируем, как они способствуют улучшению пользовательского интерфейса на мобильных. В частности, мы увидим, как формы могут быть расширены с помощью дополнительных входных типов, предлагаемых HTML5, и покажем, что Вы можете ожидать от различных мобильных браузеров.
Типы HTML5 Input
HTML5 имеет кучу новых типов ввода для форм. Эти типы вводов позволяют лучше контролировать входные данные и проверять их. Некоторые из них особенно полезны для мобильных пользователей, у которых часто возникают трудности с работой HTML Input . Полный список типов входных данных приводится ниже:
- color — выбор цвета
- date — выбор даты
- datetime — выбор даты и времени
- email — валидация email-маски
- number — ввод номер
- range — слайдер диапзаонов
- search — поле для поиска
- tel — валидация маски телефона
- time — выбор времени
- url — валидация URL
Разумеется, данный перечень не полный. Сюда не включены типы, которые приняты стандартом, но суть их пока не ясна. Самые популярные и актуальные из приведенных выше типов мы рассмотрим в данной статье с приведением примеров.
1. Input type color
Если поддерживается этот тип входного сигнала, то браузер пользователя вызовет встроенный color-picker (выбор цвета) на клиентском устройстве. Выбранный цвет будет представлен в соответствующем шестнадцатеричном значении RGB.
< input type = "color" / > |
Пример работы:
Стиль всплывающего окна будет зависеть от Вашего браузера. Щелкните на кнопку, чтобы посмотреть, как это работает.
Выберите Ваш цвет:
К сожалению, поддержка данного типа мобильными браузерами оставляет желать лучшего. Из всех существующих, корректное отображение можно найти только в Opera Mobile и Chrome Android . Для всех остальных обозревателей будет показано пустое текстовое поле. Это стоит иметь ввиду. Как вариант, можно набросать палитру на JS либо воспользоваться плагинами.
2. Input type date
Если поддерживается браузером, то предоставляет удобный блок для выбора даты.
< input type = "date" / > |
Пример работы:
Выбор даты:
Обратите внимание, что тип ввода Date , а также варианты типа datetime и datetime-local предлагают полезные атрибуты, такие значения, как min и max , которые могут устанавливать ограничение и проверку данных, вводимых пользователем. Мы это продемонстрируем ниже по тексту.
Тип HTML Input Date поддерживается почти всеми браузерами. Исключение составляют Opera Mini и дефолтный браузер Android.
3. Input type datetime и datetime-local
Этот тип Input позволяет пользователю указывать дату и время в удобном формате. Если поддерживается, то будет отображен как родной виджет дата\время устройства. Разница между указанными типами ввода состоит в том, что первый привязывается к мировому времени, а второй не содержит никакой информации о временной зоне.
< input type = "datetime-local" / > |
Пример работы:
Выбор даты и времени:
Не поддерживается в IE Mobile и Opera Mini. На остальных популярных обозревателях (мобильных) тип работает более мене корректно, однако не редки случаи багов и глюков. Имейте и это ввиду тоже, и не забывайте о запасных вариантов на JavaScript .
4. Input type email
Данный тип не требует представления. Его уже многие используют и он поддерживается практически всеми браузерами.
< input type = "email" / > |
Пример работы:
Введите Ваш e-mail адрес:
Перед отправкой, браузер проверяет корректность заполненного поля и сообщает пользователю в случае недопустимого формата ввода. Расчет идет по следующему выражению {text}@{domain}
5. Input type number и tel
Это еще один тип, который не требует особого обсуждения. Однако, в мобильной среде является очень полезным инструментом. Используйте его в тех случаях, когда пользователю представляется набор только из цифр. При таком раскладе ему будет предложен удобный интерфейс цифровой клавиатуры.
Пример работы:
Выбор значения:
Диапазон по умолчанию в большинстве браузеров находится между 0 и 100. То есть крайнее левое положение ползунка соответствует 0, а правое 100. Можно изменить диапазон с помощью атрибутов min и Max. Мы также можем задать значение шага, через шаг атрибута. Так, чтобы указать диапазон от 5 до 50, с шагом 5, мы будем использовать:
< input type = "range" min = "5" max = "50" step = "5" / > |
Поддержка всеми популярными браузерами, кроме Opera Mini.
7. Валидация формы
Весьма удобно задать специальные атрибуту HTML Input для проверки вводимых данных. К примеру, мы хотим создать поле, которое должно быть обязательно заполнено:
Люди, которые используют ваше мобильное приложение или сайт, преследуют определенную цель. Обычно то, что стоит между пользователем и его целью – это форма. Фактически, формы считаются финальным шагом в процессе достижения пользовательских целей. Вот почему так важно, чтобы пользователь заполнял форму максимально быстро и без каких-либо препятствий.
Следуйте этим семи правилам для создания простых и понятных форм:
Правило №1: Формы должны быть совместимы с тем, как пользователь вводит свои данные
Убедитесь в том, что поля формы не перекрываются элементами интерфейса (например, клавиатурой). По мере заполнения пользователем полей формы, автоматически поднимайте поля вверх.
Правило №2: Минимизируйте количество полей ввода и необходимость пользователя печатать
Чем длиннее и сложнее выглядит форма, тем меньше вероятность того, что пользователи захотят заполнять пустые места, особенно на маленьких экранах. Уменьшив количество полей ввода, вы сделаете вашу форму менее загруженной, особенно когда вы запрашиваете у пользователя большое количество информации.
Сделайте форму максимально простой и короткой
Но уменьшить количество полей – недостаточно. Вам также следует обратить внимание на то усилие, которое затрачивает пользователь при вводе данных. Печать требует высокой степени взаимодействия; высока вероятность ошибки, даже при вводе с полноформатной клавиатуры (тем более на сенсорном экране).
Поэтому, попытайтесь минимизировать необходимость печатать и допущения ошибок пользователем.
Умные дефолты
Умные дефолты помогают пользователям быстрее и точнее заполнить все поля формы. Например, вы можете сделать предвыбор страны проживания пользователя на основе данных его геолокации.
Автоматическое определение локации позволит сэкономить время пользователю на поиск номера в гостинице
Радиобаттоны для схожих, но взаимоисключающих вариантов выбора
Когда перед пользователем стоит выбор из списка опций, рассмотрите возможность использования горизонтального списка тегов . Это позволяет более эффективно использовать доступное пространство экрана.
Слайдеры для минимальной/максимальной цены или диапазона бюджета
Подумайте об использовании слайдеров для полей, которые содержат цены или бюджет. Так пользователь сможет двигать слайдер к минимальному/максимальному значению. Слайдер легко перемещать по-горизонтали, а также можно запросто кастомизировать это действие при помощи визуальных подсказок. Но помните, что числа не должны скрываться при взаимодействии со слайдером (особенно при использовании большими пальцами).
Слайдер в форме AirBnB для выбора цены
Правило №3: Заголовки формы должны находиться либо выше самих полей, либо быть плавающими
Заголовки говорят пользователю об основной цели поля и четкий текст является одним из главных способов сделать UI более доступным.
Почему никогда не стоит использовать текстовые заголовки внутри поля
Заголовки внутри поля (или плейсхолдер) – это текст, который находится внутри поля формы, который исчезает как только пользователь начинает вводить свои данные.
Заголовки внутри поля
В то время, как заголовки внутри поля выглядят хорошо с эстетической точки зрения, это преимущество часто становится переоцененным. Основной ошибкой является потеря контекста. После того, как пользователь кликнул на поле, надпись пропадает. И, соответственно, он не может проверить, что он написал именно то, что необходимо.
Текст внутри поля является не самой лучшей заменой визуального заголовка
Также, некоторые пользователи, которые видят, что в поле уже что-то написано, могут подумать, что поле уже пред заполнено и им больше ничего вводить не нужно и могут проигнорировать заполнение.
Почему выравнивание заголовков полей по левому краю плохо для мобильных устройств
Главное, что необходимо учитывать при использовании заголовков, выровненных по левому краю, на мобильном устройстве – это размер экрана и соотношении сторон. Если заголовок слева стоит напротив поля, то при вертикальной ориентации экрана, у вас останется очень мало места для самого поля. Это создает определенную сложность в использовании потому, что остается недостаточно места для отображения того, что вводит пользователь. Невозможность увидеть введенный текст, создает проблему для пользователей потому, что это не дает возможности быстро заметить ошибку при вводе перед подтверждением формы.
Очень трудно заметить ошибку если данные видны не полностью
Заголовок сверху или адаптивный заголовок
Заголовки форм должны сверху полей формы так, чтобы пользователи видели, что они заполняют и как. Основное преимущество расположения заголовков форм над формой состоит в том, что вы можете растянуть форму по всей ширине экрана и сделать ее достаточно большой для ввода данных (например, с размером шрифта в 16 пикселей). Дополнительным преимуществом будет возможность написание четких и понятных заголовков (не ограничиваясь 1-2мя словами).
Основным же недостатком расположения заголовков над полями в том, что вся форма занимает больше места по-вертикали, что означает, что пользователю надо скроллить экран. Однако, это не очень серьезная проблема – на сегодняшний день, все привыкли скроллить .
В качестве альтернативы, вы можете использовать адаптивные заголовки для понимания того, что пользователи корректно заполнили поле. Текст плейсхолдера отображается по умолчанию, но после тапа на поле и ввода текста, текст плейсхолдера переходит наверх поля, как показано ниже.
Правило №4: Валидация поля формы должна происходить в режиме реального времени
В идеальном мире, пользователи заполнят форму необходимой информацией и успешно завершат эту задачу. В реальном мире, пользователи часто допускают ошибки. При этом пользователям не нравится то, что после всего процесса заполнения полей, они доходят до кнопки “отправить” и обнаруживают, что они сделали ошибку. Правильно будет сообщить пользователю об успехе/ошибки в поле сразу после его заполнения. Валидационное сообщение сразу информирует пользователя о корректности введенной информации. Такой подход позволяет пользователям исправить допущенные ошибки быстрее и без необходимости ждать отображения ошибок после нажатия сабмит кнопки.
Если вы ожидаете специфические ответы на вопросы, необходимо сразу показывать, что нужно ввести и в каком виде.
Строчная валидация также может послужить решением. На примере ниже, вы можете увидеть хороший пример, как можно исправить потенциальную ошибку.
Правило №5: Отображение раскладки клавиатуры соответственно вводимым данным
Пользователи предпочитают соответствующую раскладку клавиатуры в приложении. Например, когда пользователю надо вводить номер кредитной карты, показывайте только ввод цифр для того, чтобы пользователь вводил цифры а не символы. Это увеличит скорость заполнения и уменьшит количество возможных ошибок ввода.
Вам необходимо убедится в том, что данная возможность реализована на всем приложении, а не на отдельных его частях.
Правило №6: Предоставляйте полезную информацию в контексте
Иногда, возникает необходимость предоставить релевантную и полезную информацию для упрощения процесса прохождения формы пользователем. Но такой сопроводительный текст должен использоваться только там, где он действительно необходим:
- При планировании дат, пользователи ценят контекст типа встроенного календаря для определения дней недели. Это снижает необходимость выхода из приложения для просмотра календаря, что снижает риск того, что пользователь отвлечется от своей основной задачи.
- Люди могут задумываться о безопасности своих данных, поэтому вам необходимо показать им, что их данные не будут переданы третьим лицам.
В качестве правила хорошего тона, не стоит растягивать объяснение на 100 символов.
Правило №7: Используйте гибкий формат
Некоторые задачи требуют от пользователя очень точной информации. Но, в тоже время, требовать от пользователя предоставить информацию в конкретном виде, может идти врозь с принципами хорошего юзабилити. Если вы просите пользователя ввести цифровые данные (например, номер телефона) в форму, используйте гибкий подход и создавайте экраны, которые могут поддерживать разные форматы ввода и отображать информацию в наиболее удобном для пользователя виде для предотвращения ошибок.
Не используйте фиксированный формат ввода данных
Вывод
У пользователя могут возникнуть разного рода сомнения при заполнении формы, поэтому вам следует постараться максимально упростить этот процесс. Все советы, описанные в данной статье, могут значительно повысить юзабилити форм.
JQuery Mobile автоматически автоматически добавить стиль в HTML-формы, сделать их более привлекательными, более дружественным на ощупь.
JQuery Мобильный Форма Структура
JQuery Mobile, чтобы использовать CSS для стиля элементов HTML форму, чтобы сделать их более привлекательными и простыми в использовании.
В JQuery Mobile, вы можете использовать следующие элементы формы:
- поле ввода текста
- Поиск поля ввода
- кнопка радио
- флажок
- Выберите Меню
- ползунок
- Флип тумблер
При использовании JQuery Mobile форму, вы должны знать:
- <Форма> элемент должен иметь способ и атрибут действия
- Каждый элемент формы должен иметь уникальный атрибут "ID". Идентификатор должен быть уникальным на всех страницах по всему сайту. Это происходит потому, что Jquery Мобильный одностраничное навигации механизм представлен таким образом, чтобы множество различных страниц одновременно
- Каждый элемент формы должен иметь метку. Вкладка Настройки для свойств, чтобы соответствовать идентификатор элемента
примеров
Попробуйте »
Чтобы скрыть метку, используйте класс UI-скрытый доступный. Это часто используется, когда вы атрибуты элемента в качестве заполнителя тега:
примеров
Попробуйте »
Совет: Мы можем использовать данные чистой-BTN = "истинный " атрибут, чтобы добавить кнопку, чтобы очистить содержимое поля ввода (иконку X справа от поля ввода):
примеров
<Ярлык = "имя_файла"> Имя:
<Входной тип = "текст" имя = "имя_файла" ID = "имя_файла" данных четко БТН = "истинный">
Попробуйте »
JQuery Mobile Forms значок
Форма код кнопки стандартный HTML <вход> элемент (кнопка, сброс, отправить). Они будут автоматически стилей рендеринга, автоматическую адаптацию мобильных устройств к рабочему столу:
примеров
<Тип входного = "Сброс" значение = "кнопка сброса">
Попробуйте »
Если вам необходимо добавить дополнительные стили в <вход> кнопка, вы можете использовать следующую таблицу данные- * атрибуты:
Кнопка для добавления иконки:
<Тип входного = "Сброс" значение = "кнопка сброса">
Попробуйте »
поле Контейнер
Для того, чтобы этикетки и элементы формы выглядят более подходящими для широкого экрана, пожалуйста, или