Яндекс условия использования поле обязательно для заполнения. Поля отмеченные звездочкой обязательны для заполнения. Используйте уже введенные данные

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

Данный скрипт я использовал при создании сайта www.prtut.ru .

Демонстрация скрипта

В примере все поля обязательны для заполнения.

Описание

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

Функция checkRequired() проверяет каждый элемент в форме на наличие аттрибута required . Если атрибут обнаружен, то проверяется был ли сделан ввод.

JavaScript

function isEmpty(str) { // Проверка на пустую строку. for (var intLoop = 0; intLoop

Так как проверка выполняется на стороне клиента, и скрипт работает непосредственно в браузере пользователя, в Google Chrome, Mozilla Firefox, Opera и Яндекс.Браузер предупреждения смотрятся по разному.

ПОЛОЖЕНИЕ

О проведении открытых командно - личных соревнованиях

По пауэрлифтингу и жиму лежа без экипировки,

Г. Подольска и Московской области

1. Цели и задачи

· Соревнования проводятся с целью популяризации пауэрлифтинга в г. Подольске и Московской области

· Воспитания физически развитого подрастающего поколения и пропаганды здорового образа жизни

· Привлечения молодежи к систематическим занятиям физической культуры и спортом

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

· Повышения спортивного мастерства атлетов г. Подольска и Московской области

· Выявления сильнейших атлетов г. Подольска и Московской области

· Формирование команды для выступления на открытых командных соревнованиях г.Подольска по пауэрлифтингу

2. Дата и место проведения

Соревнования проводятся 16 ноября 2013 года в Дворце культуры 1 мая: Московская обл., г. Климовск, Заводская улица, 3 . О начале соревнований и взвешивании будет сообщено дополнительно (по электронной почте или СМС).

3. Организация и руководство

Общая организация соревнований осуществляется МУ Центр гражданского и патриотического воспитания молодежи «Факел» и тренажерным залом « Good Lift», при участии Подольского отделения ВООВ « Боевое братство» и Благотворительного фонда «Здоровая нация».

Непосредственное руководство осуществляется тренером по атлетической гимнастике МУ "Факел" Поповым С.А., директором тренажерного зала "Good Lift" Яковлевым П.С. и представителем благотворительного фонда "здоровая нация" Работкиным И.Ф.

4. Участники соревнований

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

Организаторы оставляют за собой право, позже объявить нормативы допуска к соревнованиям, с обязательным уведомлением спортсменов (по электронной почте или СМС).

Организаторы оставляют за собой право, при превышении числа заявок, не позднее 9 ноября 2013 объявить нормативы допуска к соревнованиям, с обязательным уведомлением спортсменов путем размещения информации в открытых источниках, а также рассылок смс- и e-mail – сообщений.

5. Порядок проведения соревнований и условия подачи заявок

Заявки для участия в соревнованиях подавать до 9 ноября 2013 года по электронному адресу: [email protected] или с помощью СМС сообщения на номер +79099250337 (стоимость СМС равняется стоимости СМС сообщения вашего оператора связи).

Внимание! Правильное оформление заявки смотреть в приложении 1.

6. Порядок определения победителей

Внимание! Судейство соревнований производится по правилам IPF (смотрите приложение 2)

Соревнования проводятся в открытой возрастной категории (Open).

в личном первенстве :

Женщины в соревнуются в абсолютной весовой категории, победители (занявшие 1-2-3- места) определяются по формуле Уилкса (Wilks).

Победители у мужчин определяются в категориях до 75кг, до 90кг, до 110кг и свыше 110 по лучшему результату. Победители в абсолютном первенстве (спортсмены, занявшие 1-2-3 места) в троеборье и жиме лежа определяются по формуле Уилкса (Wilks) .

В командном первенстве в зачет идут 4 лучших результата мужчин-членов команды и 1 женский результат

Начисление баллов происходит по следующей схеме:

1 место – 6 очков

2 место – 4 очка

3 место – 3 очка

4 место – 2 очка

5 место – 1 очко

Победителем в командном первенстве признается команда, набравшая максимальное количество баллов среди всех команд.

7. Награждение победителей

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

8. Финансирование

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

Приложение 1

Образец заявки (посылаемой по электронной почте или СМС сообщением):

1. номинация: например, жим лежа или троеборье.

2. название команды или отметить личное *

3. Ф.И.О *–

4. Год рожденья *–

6. разряд *–

7. лучший результат * (за последние 6 месяцев) -

8. возраст* -

9. тренер -

10. контактный телефон (желательно сотовый)* -

Поля отмеченные звездочкой обязательны для заполнения.

Внимание! Все участники в день соревнований, при себе, обязательно должны иметь визы заверенные врачом, и паспорт или удостоверение личности (права, военный билет). Без этих документов спортсмены допускаться к соревнованиям не будут.

Приложение 2

Правила проведения соревнований:

Выступление на соревнованиях происходит без применения экипировки (жимовые майки, комбинезоны, коленные бинты для пауэрлифтинга).
Можно использовать: кистевые бинты, пояса (максимальная ширина пояса – 10 см).
При необходимости можно использовать неподдерживающий бинт (на одну ногу или руку). Неподдерживающие бинты – обычные медицинские бинты. Бинт надо перед использованием предъявить судье.
Выполнение упражнений проводятся по правилам IPF

Приседания (правила и порядок выполнения).

После снятия штанги (ассистенты могут оказать помощь), атлет занимает исходное положение.

После принятия исходного положения атлетом, судья дает команду – ПРИСЕСТЬ.

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

Атлет должен самостоятельно вернуться в вертикальное положение с полностью выпрямленными в коленях ногами. Двойное вставание («подскакивание», запрещены).

Как только атлет, занимает неподвижное положение, судья дает команду вернуть штангу на стойки – СТОЙКИ.

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

Жим, лежа на скамье (правила и порядок выполнения)

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

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

выполнения упражнения. Использование обратного хвата запрещено.

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

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

После снятия штанги со стоек с помощью или без помощи ассистентов атлет должен ждать сигнала старшего судьи с полностью выпрямленными («включенными») в локтях руками.

Сигнал к началу жима должен быть дан сразу же, как только атлет примет неподвижное

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

После получения сигнала атлет должен опустить штангу на грудь и выдержать ее в неподвижном положении на груди (как правило, основание грудины), после чего судья дает команду - ЖАТЬ. Затем атлет должен выжать штангу вверх на прямые руки. После фиксации штанги в этом положении судья дает команду – СТОЙКИ.

- Запрещается – Любая ошибка в соблюдении команд судьи. Любое изменение исходного положение при выполнении упражнения (любой подъем (отрыв) головы, плеч, ягодиц от скамьи или движения ног на помосте или блоках, или передвижение рук по грифу). Любое движение штанги вниз во время выполнения жима. Отсутствие выжимания штанги на полностью выпрямленные руки при завершении упражнения.

6. Тяга (правила и порядок выполнения)

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

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

Судья дает команду – ВНИЗ.

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

- Запрещается – любое движение вниз, до достижения финального положения. Поддержка штанги бедрами во время подъема вверх. Шаги назад или вперед. Опускание штанги до команды. Выпускание штанги из рук при выполнении команды вниз.

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

Реальный пример можно увидеть здесь:

Скачать

Это уже не первый урок на данную тему, возможно вы не видели прошлые и они вам будут интересны:

HTML часть

Давайте посмотрим из чего же состоит данная форма:

21 22 23 24 25 26 27 28 29

<form class = "contact_form" action = "#" method = "post" name = "contact_form" > <ul > <li > <h2 > Напишите нам</ h2 > <span class = "required_notification" > * поля обязательные к заполнению</ span > </ li > <li > <label for = "name" > Имя:</ label > <input type = "text" placeholder= "Петров Александр" required / > </ li > <li > <label for = "email" > Email:</ label > <input type = "email" name = "email" placeholder= "name@сайт" required / > <span class = "form_hint" > Например "name@сайт"</ span > </ li > <li > <label for = "website" > Веб-сайт:</ label > <input type = "url" name = "website" placeholder= "https://сайт" required pattern= "(http|https)://.+" / > <span class = "form_hint" > Например "https://сайт"</ span > </ li > <li > <label for = "message" > Сообщение:</ label > <textarea name = "message" cols = "40" rows = "6" required > </ li > <li > <button class = "submit" type = "submit" > Отправить</ button > </ li > </ ul > </ form >

Если вы изучали прошлые уроки, то вам будут знакомы такие атрибуты как placeholder и required .

Но всё же повторю еще раз:

placeholder — присутствие данного атрибута означает что на фоне данного текстового поля будет текст, заданный в значении данного атрибута. А при вводе он исчезает.

required — если у поля есть данный атрибут, значит поле является обязательным для заполнения.

И мы не использовали Javascript потому что HTML5 позволяет нам сделать с помощью своих функций.

Также здесь есть новый атрибут pattern="(http|https)://.+" — он задает то, с чего должен начинаться веб-адрес сайта, иначе будет ошибка.

CSS часть

Теперь с HTML-частью мы закончили и надо придать вид нашей форме. Т.к. все элементы формы находятся в неупорядоченном списке, следовательно с помощью соответствующих селекторов будет задавать стили:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

.contact_form ul { width : 750px ; list-style-type : none ; list-style-position : outside ; margin : 0px ; padding : 0px ; } .contact_form li { padding : 12px ; border-bottom : 1px solid #eee ; position : relative ; } .contact_form li :first-child , .contact_form li :last-child { border-bottom : 1px solid #777 ; }

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

.contact_form label { width : 150px ; margin-top : 3px ; display :inline- block; float : left ; padding : 3px ; } .contact_form input { height : 20px ; width : 220px ; padding : 5px 8px ; } .contact_form textarea { padding : 8px ; width : 300px ; } .contact_form button { margin-left : 156px ; }

А сейчас напишем стили, когда поля активны и когда нет:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

.contact_form input, .contact_form textarea { border : 1px solid #aaa ; box-shadow : 0px 0px 3px #ccc , 0 10px 15px #eee inset ; border-radius : 2px ; padding-right : 30px ; -moz-transition : padding .25s; -webkit-transition : padding .25s; -o-transition : padding .25s; transition : padding .25s; } .contact_form input:focus , .contact_form textarea:focus { background : #fff ; border : 1px solid #555 ; box-shadow : 0 0 3px #aaa ; padding-right : 70px ; }

1 2 3 4 5 6 7 8 9 10 11 12 13

.contact_form input:required , .contact_form textarea:required { background : #fff url (images/red_asterisk.png ) no-repeat 98% center ; } .contact_form input:required :valid , .contact_form textarea:required :valid { background : #fff url (images/valid.png ) no-repeat 98% center ; box-shadow : 0 0 5px #5cd053 ; border-color : #28921f ; } .contact_form input:focus :invalid , .contact_form textarea:focus :invalid { background : #fff url (images/invalid.png ) no-repeat 98% center ; box-shadow : 0 0 5px #d45252 ; border-color : #b03535 }

Осталось совсем чуть-чуть:). Предпоследним шагом необходимо задать стили для подсказок:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

.form_hint { background : #d45252 ; border-radius : 3px 3px 3px 3px ; color : white ; margin-left : 8px ; padding : 1px 6px ; z-index : 999 ; /* значит что подсказка будет перекрывать все элементы */ position : absolute ; /* можно подсказку разбить на две строки */ display : none ; } .form_hint : :before { content : "\25C0 " ; color : #d45252 ; position : absolute ; top : 1px ; left : -6px ; } .contact_form input:focus + .form_hint { display : inline ; } .contact_form input:required :valid + .form_hint { background : #28921f ; } .contact_form input:required :valid + .form_hint : :before { color : #28921f ; }

И последним действием будет задание стиля кнопке «Отправить»:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

button.submit { background-color : #68b12f ; background : -webkit-gradient(linear , left top , left bottom , from(#68b12f ) , to(#50911e ) ) ; background : -webkit-linear-gradient(top , #68b12f , #50911e ) ; background : -moz-linear-gradient(top , #68b12f , #50911e ) ; background : -ms-linear-gradient(top , #68b12f , #50911e ) ; background : -o-linear-gradient(top , #68b12f , #50911e ) ; background : linear-gradient(top , #68b12f , #50911e ) ; border : 1px solid #509111 ; border-bottom : 1px solid #5b992b ; border-radius : 3px ; -webkit-border-radius : 3px ; -moz-border-radius : 3px ; -ms-border-radius: 3px ; -o-border-radius : 3px ; box-shadow : inset 0 1px 0 0 #9fd574 ; -webkit-box-shadow : 0 1px 0 0 #9fd574 inset ; -moz-box-shadow : 0 1px 0 0 #9fd574 inset ; -ms-box-shadow: 0 1px 0 0 #9fd574 inset ; -o-box-shadow : 0 1px 0 0 #9fd574 inset ; color : white ; font-weight : bold ; padding : 6px 20px ; text-align : center ; text-shadow : 0 -1px 0 #396715 ; } button.submit :hover { opacity : .85; cursor : pointer ; } button.submit :active { border : 1px solid #20911e ; box-shadow : 0 0 10px 5px #356b0b inset ; -webkit-box-shadow : 0 0 10px 5px #356b0b inset ; -moz-box-shadow : 0 0 10px 5px #356b0b inset ; -ms-box-shadow: 0 0 10px 5px #356b0b inset ; -o-box-shadow : 0 0 10px 5px #356b0b inset ; }

Вывод

Ну вот и все! 🙂 Интернет-технологии настолько быстро развиваются, что вы и заметить не успеете как все будут применять связку HTML5+CSS3. Конечно надо предусматривать как будет выглядеть тот или иной элемент в старых браузерах, но и про новые возможности забывать нельзя!

Казалось бы в дизайне полей ввода нет ничего сложного: рисуй пустые прямоугольники для ввода данных, все остальное пользователь сделает сам. Однако все не так просто. По объему статьи видно, что правил и особенностей довольно много. Пользователя нужно аккуратно «провести за ручку», все показать, объяснить и помочь. Тогда и только тогда мы сможем получить от него желанные данные. Ну что ж, летс старт!

7+ правил полей ввода

Самое основное правило, как и везде, ставьте себя на место посетителя. Все ли понятно? Можно ли с первого взгляда осознать что нужно ввести в поле? Адекватно ли реагирует поле на введенную информацию?

Пишите описания и подсказки

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

Есть несколько типов подсказок:

1) Иконки

Иконки - универсальный визуальный язык. Они помогают понять что вводить даже при беглом просмотре. И да, иконки - это дизайнерский фетиш =)

Однако не следует забывать и что их всегда нужно пояснять.

2) Примеры

Самый просто способ рассказать как заполнить поле - показать пример. Пример примера: «[email protected]»

3) Объяснения

Этот тип описаний служит для объяснения как сайт будет использовать данные и для чего они нужны. Например: «Почта нужна нам для уведомления вас о статусе заказа. Мы не будем слать спам».

Используйте маски

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

Приведу примеры различных масок:

Выделяйте обязательные поля

Если среди необязательных полей есть поля обязательные для заполнения, то их следует выделять среди прочих и делать акцент на обязательности заполнения. Как правило обязательные поля показывают значком звездочки - *.

Все обязательные поля лучше группировать вместе и располагать их в начале формы.

В примере выше, кстати, также показаны 2 типа подсказок: примеры и объяснения.

Фокус и клавиатура

Активное поле, в котором установлен курсор должно иметь отличительный признак. Как правило, браузеры самостоятельно подсвечивают активные поля. Однако не стоит оставлять все на откуп случая и самостоятельно проверять работоспособность этой функции.

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

При использовании подсказок с автозаполнением (например, в поиске) должна быть возможность выбора пункта стрелками и подтверждения его по нажатию клавиши Enter.

При вводе секретных данных (например, пароля) должна быть возможность спрятать и показать эти данные по желанию пользователя.

Используйте уже введенные данные

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

Группируйте поля ввода

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

Помните о размере поля

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

В заключение

Дизайн полей ввода не так прост как кажется на первый взгляд. Нужно помнить много нюансов и постоянно задавать себе вопрос: «все ли будет понятно пользователю?»

Многие дотошные ребята скажут, что правил получилось вовсе не 7 (а кто-то даже и не заметил, ха-ха-ха). Однако многие правила небольшие, поэтому я посчитал их за половину. И вообще мне просто нравится цифра 7 =)

13 января 2011 в 01:09

Интерфейсы

Перевод

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

1. Четко выделяйте обязательные для заполнения поля

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

На форме регистрации Zappos.com обязательные поля выделены звездочкой (*). Необязательные поля так же явно обозначены.

2. Используйте удобные и подробные сообщения об ошибках

Я уверен, что вы ненавидите ситуации, когда при неправильном заполнении формы появляются уведомления об ошибке, говорящие: “Вы должны заполнить все необходимые поля”, вместо того, чтобы сообщить более подробные сведения, например: “Вы забыли заполнить адрес электронной почты”.
Использование проверки достоверности введенных данных в реальном времени является хорошим решением. Например, сразу после заполнения адреса электронной почты, веб-форма должна проверить правильность введенного формата, и если что-то не так, то немедленно уведомить об этом пользователя.

3. Используйте проверку формата данных на стороне клиента (JavaScript)

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

Форма регистрации на SurveyGizmo дает знать, если формат введенного вами адреса электронной почты неверный.

4. Визуально выделяйте заполняемые поля, чтобы пользователь не потерялся

Убедитесь в том, что визуально можно определить какое именно поле пользователь заполняет в данный момент. Это можно реализовать с помощью селектора псевдо-класса focus: в CSS.

Веб-форма на Wufoo визуально выделяет активные элементы цветом фона.

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

Google Chrome выделяет активный элемент желтой рамкой. Firefox светло голубой.

5. Показывайте результаты прогресса

Если ваша веб-форма объемная и состоит из нескольких страниц (или имеет несколько шагов), убедитесь что пользователь постоянно получает сведения о ходе выполняемых действий, о том, сколько еще времени может ему понадобиться для заполнения. Такое часто встречается в случаях онлайн-опроса (исследования) с множеством вопросов или в процессе оформления заказа в интернет магазине.
Все что нужно, это писать “Шаг 4 из 5” или что-то в этом роде. Если пользователи будут продолжают нажимать кнопку “продолжить”, четко не понимая когда будет последний шаг, то они прекратят заполнение формы раньше, чем вы можете предположить.

Оформление заказа на Amazon имеет 4 страницы. Форма сообщает где вы сейчас и сколько еще осталось до завершения.

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

6. Периодически сохраняйте (кешируйте) данные формы

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

7. Не используйте стандартный текст “Submit” (отправить)

Вместо того, чтобы ваша кнопка на форме называлась “Submit” (отправить), используйте такой текст, чтобы он напоминал пользователю о его действиях. Например “Зарегистрироваться”, или еще лучше - дайте пользователю узнать о преимуществах после заполнения формы.

На форме регистрации Basecamp текст «Submit» заменили на более полезный.

8. Кнопка “Отменить” заставляет колебаться

Представьте, что вы в магазине покупаете новую рубашку и продавец спрашивает у вас: “Вы действительно хотите именно эту рубашку?”. Вы все равно ее купите? Скорее всего нет. Возможно вы будете сомневаться, думая что продавец посчитал рубашку неподходящей.
Тоже происходит и с веб-формами: использование кнопки “отменить” может заставить ваших пользователей дважды подумать о том, что они заполняют.

9. Показывайте пользователям поля в правильном формате

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

Форма регистрации Geico предоставляет однозначные инструкции о том, в каком формате ожидаются вводимые данные.

10. Одноколоночная форма - лучшее решение

В соответствии с исследованием движения глаз от cxpartners, дизайн агенства по изучению пользовательского взаимодействия, сканирование формы вниз предпочтительнее, чем слева направо. Это уменьшает количество движения глаз, которое нужно совершить для заполнения формы.

Одноколоночная форма

Форма регистрации Backpack имеет одноколоночную форму.

Форма с несколькими колонками