Формы

Для полей форм разных веб-приложений есть общие функции. В мобильном мире мы должны стараться сохранить минимальными и сами формы, и количество необходимых для ввода символов. Поля форм должны быть обрамлены классическим тегом <form>, с method=»GET» или «POST» и адресом на скрипт обработки данных формы (атрибут action).

Дизайн формы

Старайся не использовать таблицы для разметки форм. Лучше использовать списки определений (<dl>), метки (<label>) и элементы управления (<input>). Чуть позже мы разберемся, как при помощи JavaScript для смартфонов улучшить дизайн формы.

В устройствах BlackBerry есть возможность оффлайнового представления формы. Если в момент заполнения формы пользователем у устройства нет соединения с Интернетом, то форма помещается в очередь и действие завершается, как только соединение будет восстановлено. Подробнее можешь почитать на http://www.mobilexweb.com/go/offlineform.

Типичная форма может выглядеть так:

<form action="formAction" method="POST">
	<dl>
		<dt><label for="name">Name</label></dt>
		<dd><input type="text" name="name" /></dd>
	</dl>
</form>

Для мобильных элементов управления вводом очень важно использование тега <label>, особенно если речь идет о сенсорных устройствах. Например, если ты вставишь checkbox без тега <label>, то пользователю для его выбора придется нажимать пальцем (или кликать) по крошечному флажку. Использование <label> в таком случае позволяет пользователю нажимать на любое место в тексте, который относится к checkbox.

Как уже отмечалось ранее, у мобильных форм должен быть вертикальный дизайн, ведь так удобнее разместить ярлык (label) над полем ввода, а не справа или слева от него. Все потому, что когда на сенсорном устройстве поле, находящееся в фокусе, увеличивается, то все то, что справа и слева от него, на экране не отображается. И в таком варианте дизайна таблицы совершенно тебе не помогут.

Форма с checkbox должна выглядеть так:

<form action="formAction" method="POST">
	<input type="checkbox" name="accept" id="accept" value="yes" />
	<label for="accept">I accept terms and conditions</label>
</form>

В некоторых мобильных браузерах лимит на длину URL ощутимо меньше, чем в декстопных браузерах. И поэтому при помощи метода GET мы должны избегать использования длинных форм.

Элементам форм мы также можем присвоить клавиши доступа. Для этого в тегах <input> используется атрибут accesskey, а с помощью CSS показывается, какие клавиши к каким ярлыкам присвоены. Такой метод особенно полезен при разработке под устройства с QWERTY клавиатурой, где ты вместо числовых значений можешь каждому полю присвоить букву:

<form action="formAction" method="POST">
	<input type="checkbox" name="accept" id="accept" value="yes" accesskey="a" />
	<label for="accept">I <span class="accesskey">A</span>ccept terms and	conditions</label>
</form>

Типичная форма должна включать один или несколько тегов <fieldset> и в каждом из них должен быть <legend>. Тег <fieldset> является всего лишь контейнером для элементов управления формой а <legend> — дочерний элемент, определяющий заголовок для данной секции:

<fieldset>
	<legend>Personal Information</legend>
	<!-- controls here -->
</fieldset>

Списки выбора

В мобильной форме одним из наиболее используемых должен быть тег <select>. Выбор из предлагаемого списка — самый главный шаг для сокращения количества символов, которые необходимо вводить пользователю. Когда ты в мобильном браузере нажимаешь на select, то, как правило, появляется всплывающее окошко (может быть модальным или нет), в котором указываются все параметры. Как можно увидеть на рисунках 6.10 и 6.11, варианты отображения списков выбора меняются в зависимости от устройства.

Рис. 6.10. Safari на iOS раскрывает select на половину экрана, а навигация осуществляется с помощью кнопок Назад и Вперед.

Рис. 6.11. Symbian раскрывает select в окне поиска, а Android показывает красивое модальное всплывающее окошко.

Используя атрибут size тега <select>, ты можешь задать списку высоту, а при помощи атрибута multiple=»multiple» указать, что в списке возможен множественный выбор. В мобильных формах функция множественного выбора гораздо полезнее, чем в декстопных вариантах. Для выбора нескольких вариантов в декстпной форме пользователь обычно использует Shift или Control, а в форме для мобильных устройств пользователю обычно предоставляется всплывающее окно с флажками, где он может сделать выбор, подтвердить свое действие и и вернуться на основную страницу.

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

<form action="formAction" method="post">
	<dl>
		<dt><label for="country">Country</label></dt>
		<dd>
			<select name="country">
				<option>Argelia</option>
				<option>Argentina</option>
				<option>Bolivia</option>
				<option>Brazil</option>
			</select>
		</dd>
		<dt><label for="filter">Looking for</label></dt>
		<dd>
			<select name="filter" multiple="multiple">
				<option>Flights</option>
				<option>Hotels</option>
				<option>Restaurants</option>
				<option>Car Rental</option>
			</select>
		</dd>
	</dl>
</form>

Мобильный Safari использует выпадающий список с полосой прокрутки, а в нативном варианте управления поддерживается еще и мультиколоночный прокручиваемый список, что позволяет одновременно выбирать несколько полей. В HTML такая функциональность не предусмотрена и может быть реализована только в нативном Objective-C. Но есть билиотека JavaScript, которая эмулирует многоколоночное управление (см. http://www.mobilexweb.com/go/wheel).

Группы опций

Группы опций — недоработанная даже в декстопной веб-разработке функция списков. Определение <optgroup> позволяет нам присвоить метку (label) ряду дочерних элементов и таким образом сгрупировать имеющиеся варианты по категориям. Вот пример:

<dl>
	<dt><label for="country">Country</label></dt>
	<dd>
		<select name="country">
			<optgroup label="America">
				<option value="ar">Argentina</option>
				<option value="bo">Bolivia</option>
				<option value="br">Brazil</option>
			</optgroup>
			<optgroup label="Europe">
				<option value="at">Austria</option>
				<option value="be">Belgium</option>
				<option value="bg">Bulgaria</option>
			</optgroup>
		</select>
	</dd>
</dl>

Результат на рисунке 6.12. И опять же, в разных устройствах варианты представления групп опций могут отличаться!

Рис. 6.12. Option groups can be rendered strangely. Here, Android 2.1 shows buttons next to the
group labels “America” and “Europe,” even though they are not selectable options.

Поддержка списков выбора

В таблице 6.12 представлена краткая информация о поддержке функции списка выбора в разных браузерах.

Переключатели и флажки

Флажки и переключатели в мобильных устройствах используются точно так же, как и в настольных. Единственное, что я бы тебе рекомендовал, это не использовать эти средства управления, если нужно выбирать более чем из четырех вариантов, в таком случае применяй <select> с единственным или множественным выбором. Группа с более чем 4-мя переключателями скорее всего увеличит высоту страницы и потребуется прокрутка, что может повлиять на удобство использовании формой для пользователя.

Кнопки

В (x)HTML есть пять видов кнопок:

1. кнопки type=»images» (кнопка-картинка): <input type=»image» />;
2. кнопки отправки данных: <input type=»submit» />;
3. кнопки очистки формы: <input type=»reset» />;
4. пользовательские кнопки: <input type=»button» />;
5. кнопки с поддержкой HTML: <button></button>.

Кнопка type=»images» позволяет нам использовать в качестве кнопки изображение и получать на сервере координаты той точки, по которой кликнул пользователь. Конечно, такая функциональность может работать только на устройствах с тач- или курсор-навигацией.

Нужно, если это возможно, избегать использования кнопки type=»images» (таковы рекомендации W3C) и вместо нее применять классическую кнопку type=»submit». При желании, изображение или иконку можно добавить позже с помощью CSS.

У кнопки submit самая лучшая поддержка и проблем с совместимостью на разных устройствах здесь быть не должно. Я всегда ненавидел (да, именно ненавидел!) кнопку «Очистить». Сколько раз ты нажимал кнопку «Очистить», думая при этом, что это submit? При разработке для мобильных устройств нужно избегать использования этой кнопки, ведь зачем тратить место, добавлять полосу прокрутки для функции, которую используют так мало людей? Если же ты все равно хочешь добавить такую функцию в свою форму, то сначала убедись, что ее дизайн будет отличаться (она будет меньше, темнее) от дизайна кнопки submit.

Если твоя цель — полная мобильная совместимость, то старайся не использовать пользовательские кнопки, ведь они работают только с JavaScript. Для устройств с соответствующей поддержкой ты все еще можешь использовать кнопки submit, а для расширения возможностей использовать Javascript.

И еще, обрати внимание, что тег <button> совместим не со всеми устройствами. Он вообще-то был добавлен уже в последние версии стандартов и я знаю не так много HTML разработчиков и дизайнеров, которые его используют.

Скрытые поля

Скрытые поля полностью совместимы с мобильными браузерами.

Загрузка файла

Управление загрузкой файла не входит в мобильные веб-стандарты, но многие устройства поддерживают эту функцию (рисунок 6.13). Когда пользователь выбирает этот элемент управления — появляется всплывающее модальное окно, предоставляя ему возможность выбрать файл или из папок встроенной памяти или же из папок на дополнительной карте памяти. Простая форма загрузки должна выглядеть так:

<dl>
	<dt><label for="file">Upload a photo</label></dt>
	<dl><input type="file" name="photo" /></dl>
</dl>

Применение обычное: тег <form> определяется при помощи enctype=»multipart/form data». Выбирать сразу несколько файлов в одном окне нельзя, а также не поддерживается отображение процесса загрузки файла. В декстопных сайтах это реализуется, как правило, при помощи Flash, но на момент написания этой статьи я не видел ни одного мобильного устройства с поддержкой этой функции. Начиная с Flash player 10.1 ситуация с поддержкой в мобильных браузерах должна улучшиться, но, все равно, совместимости со всеми устройствами не стоит ожидать, потому как у Flash Player нет широкой поддержки.

Рис. 6.13. Ирония в том, что современные браузеры на смартфонах, такие как Safari и браузер Android не поддерживают добавление файлов, а браузер Nokia S40 для low-end устройств — поддерживает.

В браузере BlackBerry (начиная с версии 4.2) есть свойство под названием accept, которое ты можешь использовать для определения MIME-типов (список разделенный запятыми), которые будет принимать сервер. Это может сократить количество передач несовместимых файлов. Например:

<dl>
	<dt><label for="file">Upload a photo</label></dt>
	<dl><input type="file" name="photo" /></dl>
</dl>

iPhone Photo Picker — инструмент с открытым исходным кодом для загрузки фотографий на сервер. Ты можешь создать свою собственную версию этого нативного приложения и разместить его в App Store. Если твоему пользователю понадобится загрузить фото или какой-нибудь другой файл, ты просто вызываешь со своего веб-сайта этот URL и приложение открывается. По завершении загрузки приложение закроется и вернет пользователя на исходную страницу веб-сайта.

В таблице 6.13 показана информация, какие мобильные браузеры поддерживают загрузку файлов.

Текстовое поле

Текстовое поле — требующий особого внимания элемент формы. Мобильное устройство вообще не самый удобный вариант для ввода текста и, более того, способ ввода текста очень отличается в зависимости от типа устройства: сенсорное, с клавиатурой QWERTY или же с цифровой клавиатурой.

Устройства с QWERTY-клавиатурой — единственные, в которых для вставки текста не требуется новое окно: пользователь может сразу начать печатать, как только фокус будет на текстовом поле. Во всех других типах устройств, когда поле ввода находится в фокусе, пользователь может кликнуть (или нажать пальцем) по нему или начать вводить символы и тогда откроется модальное всплывающее окно со всеми характерными для этой ОС функциями текстового поля (например, интеллектуальный ввод текста, экранная клавиатура, распознавание символов, словарь и список символов). В некоторых устройствах окно текстового поля показывается в полноэкранном формате (скрывая таким образом весь веб-интерфейс), а в других окно открывается в уменьшенном размере внутри окна браузера. В первом случае требуется указатель (descriptive label), чтобы пользователь знал, что можно начинать ввод текста.

Очень осторожно нужно использовать многострочные текстовые поля (тег <textarea>). Вообще-то, наша цель в том, чтобы пользователь не вводил в форме слишком много текста. Но, когда требуется больше места (например, для текста сообщения), мы можем использовать <textarea> и в зависимости от устройства, удобство ввода должно быть таким же, как и при обычном текстовом поле. Тектовые поля с расширенными возможностями не очень популярны в мобильной разработке и их действительно трудно использовать из-за особенностей мобильного браузера. Единственное решение — перехват события нажатия клавиши с помощью Javascript и эмуляция ввода текста в своем текстовом поле.

Быть или не быть паролю

Использование текстового поля «пароль» (<input type=»password» />) в мобильных устройствах является предметом постоянных дискуссий. Текстовое поле пароль (классический вариант с заменой вводимых символов звездочками) изначально создавался из-за вероятности, что сам пароль или какие-либо другие ценные данные могут быть кем-нибудь подсмотрены с экрана пользователя и украдены.

В мобильном мире ситуация совсем другая. При небольших размерах экрана и шрифта другому человеку очень сложно увидеть, что пользователь набирает или просматривает на экране мобильного устройства. Кроме того, набирать пароль на не-QWERTY устройстве довольно трудно, потому как, когда пользователь вместо набранных символов видит звездочки, он может засомневаться, правильно ли он ввел пароль (даже если, как в некоторых устройствах, символы, прежде чем быть замененным звездочкой, показывается перед этим в течении секунды). Если ты все же хочешь использовать текстовый ввод пароля, я рекомендую сделать текст числовым.

Якоб Нильсен (http://useit.com) — гуру юзабилити — по поводу паролей думает так же. В 2009 году в колонке Alertbox он написал:

Удобство очень страдает, когда пользователю нужно вводить пароль, а видит он при этом только строку маркеров. Как правило, маскирование пароля совсем не улучшает ситуацию с безопасностью, но при этом может существенно навредить твоему бизнесу из-за вполне вероятных неудачных попыток входа для пользователя».

Placeholder

Placeholder — это подсказка, которая демонстрируется в текстовом поле, в которое пользователь будет вводить текст. Когда пользователь начинает набирать текст, подсказка убирается (рисунок 6.14). Из-за недостатка места эта функция очень полезна для мобильных устройств. Вместо того, чтобы, как говорилось ранее, использовать метку, мы можем применять placeholder, уменьшая таким образом количество необходимого пространства.

Рис. 6.14. Placeholder это серый описательный текст в текстовом поле, который автоматически удаляется, когда пользователь начинает вводить значение в поле.

C placeholder есть одна большая проблема — это не стандарт. Здесь возможно два пути реализации: при помощи атрибутов HTML 5 (placeholder) и JavaScript. Атрибут placeholder поддерживается некоторыми современными браузерами, а для других мы можем сделать небольшой скрипт и при этом даже используем стандартный label. JavaScript-решение мы рассмотрим позже, а пока давай разберемся с применением HTML-атрибута:

<input type="text" name="zip" placeholder="Your ZIP Code" />

Если тебе от пользователя нужен только ввод текста, то хорошим решением для устройств с поддержкой будет стандартная JavaScript-функция window.prompt.

Валидация текстовых полей.

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

Первый вариант: определение максимального размера текстового поля при помощи атрибута maxlength, выраженного как число символов. Многие платформы автоматически добавляют счетчик символов во время ввода текста пользователем.

При помощи библиотеки JavaScript можно обеспечить поддержку атрибутов placeholder и autofocus (HTML 5 атрибут для тега <input>, который перемещает фокус в указанное поле после загрузки страницы) даже в тех устройств, где такой поддержки нет. Загрузить эту библиотеку можно на http://gist.github.com/330318.

Как уже ранее отмечалось, в WAP CSS добавлено свойство -wap-input-format, которое определяет количество и тип вводимых символов, которые может ввести пользователь (свойство известно также как input mask (маска ввода). Использование маски ввода снижает количество ошибок, которые может совершить пользователь при вводе, а также возможен показ пользователю сообщения об ошибке (рисунок 6.15). Мы также говорили уже об атрибуте -wap-input-required , который не даст пользователю убрать фокус с поля, пока оно не будет заполнено.

Рис. 6.15. Браузеры, поддерживающие WAP CSS ограничения ввода, показывают сообщение об ошибке, когда пользователь вводит текст в неверном формате, а затем пытается убрать фокус с поля.

Контент атрибута -wap-input-format — это строковая маска, использующая специальные символы, приведенные в таблице 6.14.

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

Internet Explorer Mobile также поддерживает булевый (boolean) атрибут emptyok, определяющий, является ли значение обязательным (false) или нет (true).

В следующем примере показан стандартный способ, как сделать обязательным текстовое поле с почтовым индексом США, необязательное поле для номера телефона и обязательное числовое поле для пароля:

<dl>
	<dt><label for="zip">ZIP Code</label></dt>
	<dl><input type="text" name="zip" style="-wap-input-format: '5N';	-wap-input-required: true" /></dl>
	<dt><label for="phone">Phone Number</label></dt>
	<dl><input type="text" name="phone" maxlength="15" style="-wap-input-format:	'*n';" /></dl>
	<dt><label for="password">Password</label></dt>
	<dl><input type="password" maxlength="8" name="password"style="-wap-input-format: '8N'; -wap-input-required: true'" /></dl>
</dl>

Многие старые мобильные XHTML-браузеры понимают позаимствованные из WML нестандартные атрибуты inputformat или format. Синтаксис здесь такой же, как и для атрибута WAP CSS. Если, например, мы хотим добавить какую-нибудь функцию для старых Openwave-устройств, то вполне можно использовать атрибут inputformat. Для Internet Explorer атрибут format можно использовать с таким шаблоном внутри:

<input type="text" name="zip" inputformat="5N" format="5N" maxchars="5" />

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

Расширения Safari

В Safari для iPhone и iPod Touch для разных целей есть, соответственно, разные экранные QWERTY-клавиатуры, в которых для улучшения юзабилити могут быть переставлены определенные клавиши или же вообще добавлены специальные экранные кнопки. Например, есть клавиатура, оптимизированная для работы с электронной почтой, в которой есть символ @ или URL-оптимизированная — с кнопкой «.com».

В XHTML MP 1.2 добавлена поддержка HTML-атрибута inputmode для текстовых полей, поля для ввода пароля и для <textarea>. Этот атрибут может получить десятки разных значений, но самые важные это «digits» для числового поля и «latin lowerCase» для email-адресов или других строчных значений.

Если на твоем сайте есть поле поиска, то можешь определить его как поле type=»search» — такой шаг изменит значение кнопки по умолчанию с «Go» на «Search» (такое решение работает и в Android 2.2).

До iOS 3.0 недокументированная функция позволяла нам вызывать цифровую клавиатуру используя свойство текстового поля name. Если name содержит «zip» или «phone» — клавиатура измениться на числовую. Но активное использование этой функции не самый лучший вариант, потому что в других странах (не США) в индексе могут содержаться не только цифры, но и буквы.

Некоторые расширения формы Safari не работают в iPhone Simulator, так что тебе нужно протестировать формы на реальных устройствах.

Начиная с iOS 3.0 и дальше мы можем использовать новые HTML 5 типы полей ввода (input types): email, tel, url и number. Если мы вместо text для атрибута type укажем одно из перечисленных значений, то пользователь может получить тот тип клавиатуры, который соответствует выделенному полю:

<input type="email" name="user_email" />
<input type="tel" name="user_phone" />
<input type="text" name="quantity" pattern="[0-9]*" />

Значение number не является стандартным, но, тем не менее, оно работает. Официально, мы должны использовать текстовое поле и снабдить его HTML 5 атрибутом pattern с регулярным выражением внутри. Регулярные выражения применяются пока довольно редко.

В этих новых полях есть одна отличная штука: если браузер не понимает новое значение <input type>, то в таком случае он отобразит поле по умолчанию — тектовое (type=»text»).

В других расширениях включены autocorrect=»on/off» и autocapitalize=»on/off» для активации или деактивации автоматического исправления орфографических ошибок и автоматическое написание прописными буквами в поле.

Расширения BlackBerry

Частичная поддержка новых HTML 5 элементов управления формой добавлена начиная с версии BlackBerry 4.7.1 и выше. На момент написания этой статьи поддерживались такие значения: number, email, search, url, color, date, datetime, time, week, month и range. Подробнее мы их рассмотрим позже.

Начиная с версии 5.0 браузер поддерживает атрибут inputmode со списком маркеров, разделенных запятыми. Это могут быть маркеры скриптов (язык кодировки) или же маркеры-модификаторы (modifier tokens). Доступны такие маркеры скриптов:

• arabic;
• bopomofo;
• cyrillic;
• georgian;
• greek;
• han;
• hangul;
• hebrew;
• hiragana;
• kanji;
• katakana;
• latin;
• simplifiedhanzi;
• thai;
• traditionalhanzi;
• user.

Маркеры-модификаторы:

• lowerCase;
• upperCase;
• titleCase;
• startUpper;
• digits;
• symbols;
• predictOn;
• predictOff.

Автозаполение

Во многих мобильных браузерах доступен словарь, в который можно добавлять новые слова и когда пользователь начинает вводить символы к текстовое поле, ему будет предложена функция автозаполнения (в такой ситуации предлагаются значения, которые он уже недавно вводил в таком поле, например фамилия или адрес электронной почты). О функции автозаполнения мы подробнее поговорим позже. Пока ты должен знать, что если ты не хочешь, чтобы браузер вмешивался со своими предложениями, можешь использовать для этого HTML атрибут autocomplete=»off» (этот атрибут нестандартный и поэтому работает не во всех браузерах). Для устройств BlackBerry 5.0 нужно также добавить inputmode=»predictOff» .

Куда дальше

• следующая — Таблицы
• предыдущая — Ссылки
• содержание

По теме

• HTML формы. Взгляд через призму семантики.
• Блочная верстка форм
• Нестандартные текстовые поля
• Нестандартные поля выбора файла
• Текст в поле type=»password»
• Кроссбраузерный button
• Резиновая кнопка для формы
• Нестандартные checkbox
• Нестандартные radio
• cuSel — нестандартные select на jQuery
• cuText — нестандартный textarea на jQuery
• Нескучные HTML формы