10 подсказок для создания хороших форм

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

О примерах

Примеры, указанные ниже, не будут работать "как есть". Все они зависят от внешней библиотеки Prototypes.js,с включенной функцией addEvent. В дополнение, функции указанные ниже должны быть присоединены к событиям, таким как onclick или onmouseover. Обратите внимание на полные тексты примеров, доступные для скачивания.

1. Помните о ваших возможностях

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

Метка (Label)

Конструкция Label используется для прикрепления информациик к элементу. Если вы наведете фокус на метку, фокус будет переведен на элемент, с которым она ассоциирована. Это полезно, когда пользователи кликает на названии элемента и получает фокус на самом элементе.

<label for="email">Email: </label>
<input type="text" id="email">

или

<label>Email: <input type="text" id="email"></label>

Fieldset

«Fieldset - элеменит, который позволяет тематически сгруппировать элементы управления или метки. Группировка элементов позволяет пользователю легче понять их назначение. Фактически группировка позволяет определить tab-порядок для визуальных приложений, и голосовую навигацию для звуко-ориентированных приложений. Основное назначение элемента сделать документ более удобным.»

Рекомендации W3C

Legend

«Элемент Legend позволяет автору назначить название элементу FIELDSET. Legend увеличивает удобство когда FIELDSET не отображается визуально.»

Рекомендации W3C

Tabindex

«Этот аттрибут определяет порядок элемента для tab-порядка текущего документа. Это значение должно быть между 0 и 32767. Пользовательские приложения будут игнорировать ведущие нули. Tab-порядок определяет порядок, в котором элементы будут получать фокус когда навигация пользователем осуществляется через клавиатуру. Tab-порядок может включать элементы, которые наследуются другими элементами.»

Рекомендации W3C

Accesskey

«Этот аттрибут назначает клавишу доступа для элемента. Клавиша доступа - это одиночный символ из кодировки документа. Обратите внимание, что автор должен иметь ввиду метод ввода в документе, определяя клавишу доступа.»

Рекомендации W3C

2. CSS

Не ново, что CSS может сделать вашу форму более опрятной. Давайте не будем изобретать велосипед, просто посетите следующие ресурсы чтобы сделать ваши формы более удобными при помощи CSS и небольшого количества JavaScript.

Style Those Buttons - Вы узнаете как сделать "те самые" кнопки для форм более привлекательными

Niceforms - Работа, призванная помочь формам не быть настолько невыносимыми, иногда используя CSS действия

Hide optional Fields - в этом примере CSS и JavaScript используются для того чтобы сделать ваши формы красивее и удобнее

CSS Forms - Джеф Хоуденс показывает как сделать классную форму без помощи таблиц

3. AutoTab

Когда происходит перемещение по форме, пользователь традиционно нажимает Tab клавишу для того чтобы перескочить к следующему элементу. Функция AutoTab, описанная ниже, автоматически переводит фокус на следующий элемент, когда элемент полностью введен (ориентируясь на максимальный размер элемента - maxlength). Это позволяет пользователю больше не переходить на следующие элементы самостоятельно, когда весь элемент введен. Эта функция особенно удобна в тех случаях, когда пользователю предлагают ввести ограниченно количество символов, например, для номера телефона. Когда пользователь закончит вводить код для региона, он автоматически перейдет для ввода остальной части номера без прерывания в воде.

Для того чтобы указать, что фокус элемента ввода будет переведен на следующий автоматически, мы должны включить в него три вещи: tabindex, class="autoTab" и указать maxlength:

<input type="text" name="areacode" class="autoTab" tabindex="1" maxlength="3"  />

После загрузки страницы будут подключены события для поля ввода для автоперевода фокуса. Если у элемента будет указано свойтво maxlength и элемент будет полностью заполнен, фокус автоматически будет переведен на следующий элемент, с большим значением tabindex. Давайте взглянем на нашу функцию, autoTab():

function autoTab(e) {
    if(this.value.length == this.getAttribute("maxlength") &&
        e.KeyCode != 8 && e.keyCode != 16 && e.keyCode != 9) {
            new Field.activate(findNextElement(this.getAttribute("tabindex")));
        }
}

function findNextElement(index) {
    elements = new Form.getElements('shippingInfo');
    for(i = 0; i < elements.length; i++) {
        element = elements[i];
        if(parseInt(element.getAttribute("tabindex")) == (parseInt(index) + 1)) {
            return element;
        }
    }
    return elements[0];
}

Две вещи, которые хотелось бы отметить:

Вы также можете использовать input.form[(getIndex(input)+1)].focus(), но в этом случае получите сообщение об ошибке в Firefox. Пример можете посмотреть на The Javascript Source.

Когда пользователь нажмет shift-tab фокус перейдет на предыдущий элемент, и autotab автоматически выключится

4. Информация о полях для ввода

Это хорошая практика, когда вы информируете пользователя о требованиях и ограничениях к полям. Ну как еще по-другому пользователь должен узнать, скажем, что длинна пароля должна быть не меньше трех символов? Вдохновленные формами, использованными на Tangent, мы возвращаемся к нашей задаче с новыми идеями:

Храните всю нужную информацию о поле в тэге label. Вы можете указать название класса, клавишу доступа и описание в элементе title.

Мы используем onfocus впротивовес onmouseover, когда информация отображается пользователю.

Проще, когда id метки похож на id поля к которому он относятся. Для примера, поле с названием fname обращается к метке lfname. Это делает задачу по работе с информацией о полях в JavaScript более простой. К примеру:

p = document.createElement("p"); p.innerHTML = $("l" + this.id).title; span.appendChild(p);

5. Отображение ошибок

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

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

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

Вы должны помнить о трех вещах: 1) Вы можете выдавать нужную информацию пользователю через JavaScript. Пользователь получит дополнительное удобство, но вы должны будете сдублировать ваши функции проверки как на стороне клиента, так и на стороне сервера. 2) Вы можете использовать Ajax проверку, которая избавляет, скажем, от ввода одинаковой информации, но это увеличвает нагрузку на сервер. 3) Вы можете проверять информацию только после отправки формы, что снизит нагрузку на сервер, но уменьшит удобство для пользователя.

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

6. Повторное заполнение данных

Нет ничего хуже, чем, в случае ошибки вводить всю информацию в форму заново. Сохраняйте в полях верно введенную информацию. Это также касается многостраничных форм - удобно вернуться на несколько шагов назад и произвести минимально-необходимые исправления, если нужно. К примеру:

<input type="text" name="fname" value="<? echo htmlspecialchars($_POST["fname"]) ?>" />

7. onFocus

Визуальные сигналы, такие как изменение цвета рамки поля, помогают понять пользователю какой элемент формы сейчас активен. CSS предоставляет простое решение для добавления, скажем, рамок, при помощи border селектора, но эта возможность поддерживается не во всех версиях IE, и эта схема не работает на всех элементах формы. Наше решение - выделение элемента за счет добавления span для каждого элемента формы, используя простой JavaScript.

Не беспокойтесь, вам не придется писать руками код для каждого span-элемента. Наша скромная JavaScript функция автоматически добавит нужную информацию о внешнем виде активного элемента и скроет ее в случае необходимости. Примечательно, что наш span блок может также иметь фоновую картинку или любую другую нужную комбинацию эффектов, которая будет работать и для элементов text, textarea, select. Вот как примерно все это выглядит:

<span class="focus">
    <input type="text" id="fname" name="fname" />
</span>

function showFocus() {
    this.parentNode.className = "focusHover";

function hideFocus() {
    this.parentNode.className = "focus";
}

Нам необходимо хранить состояние элемента span для того чтобы на странице не было подергивания. К примеру, если наш span имеет 3 пикселя отступа для события onfocus, нам нужно 3 пикселя для невидимого отступа когда нет фокуса на элементе, т.о. мы не будем наблюдать "прагающий" элемент когда пользователь перемещается с одного на другой.

8. Нажатие на элементе Label

Когда элемент Label получает фокус, через onclick или acceskeys, связанный с меткой элемент также получит фокус.

Когда элемент LABEL получает фокус, он передает фокус на ассоциированный с ним элемент

Рекомендации W3C

К сожалению, это не работает во всех браузерах. Чтобы решить проблему, воспользуемся небольшой JavaScript функцией:

function initLabels() {
    labels = document.getElementsByTagName("label");
    for(i = 0; i < labels.length; i++) {
        addEvent(labels[i], "click", labelFocus);
    }
}

function labelFocus() {
    new Field.focus(this.getAttribute('for'));
}

9. Двойной Submit

Нееет! Наш пользователь нажал кнопку submit дважды, вероятно потому что сайт не ответил достаточно быстро после первого нажатия. Не только данные будут обработаны дважды, но и пользователь скорее всего будет удивлен полученным сообщением об ошибке, т.к. активным подтверждением будет считаться именно последнее. Три вещи, которые нужно держать в голове для таких ситуаций:

Если javaScript активен, используйте его чтобы заблокировать кнопку для нажатия.

Если JavaScript не доступен, сообщите пользователю о том, чтобы он не нажимал кнопку дважды

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

10. Послесловие

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

Мини-календарь - Если вам нужно работать с элементом для ввода даты, использовать всплывающий календарь - лучшее решение. В идеале мы не должны использовать новое окно. Чтобы продолжить изучение темы, посетите Dynarch, на котором вы найдете одно из лучших решений.

Combo Box - Элемент, упущенный в HTML, наполовину SELECT, наполовину TEXT. Этот элемент позволяет пользователю выбрать значение из списка, или ввести новое если таковое отсутствует. Взгляните на статью "Обновите ваш элемент Select до Combo Box" чтобы узнать как решить данную проблему.

Визуальные карты - как и всплывающий календарь, всплывающие карты могут быть также эффективны. Взгляните на Orbitz, и перейдите по ссылке выбора аэропорта. Это перебросит вас к списку всех аэропортов. Проблема выбора аэропорта может быть решена по-другому, используя карту для выбора из списка и сокрытия всех значений после выбора нужного аэропорта.

Здесь мы перечислили некоторые идеи для того чтообы вы смогли начать эффективно работать с формами. Если у вас есть какие-либо новые идеи, пожалуйста, дайте нам знать!

Источник: http://particletree.com/features/10-tips-to-a-better-form/