Nerve поля обязательные для заполнения. Проверка обязательных для заполнения полей
Практически на каждом сайте можно увидеть форму регистрации. Конечно есть такие, кто просто брал чужую форму, вставлял себе, а потом пользователь хочет зарегистрироваться, но не может. Бывают такие случаи что при регистрации определенный пароль допускается и у вас получается зарегистрироваться, но затем когда вы пытаетесь войти на сайт, появляется ошибка что это недопустимый пароль, и так сайт теряет определенное количество посетителей, поэтому будьте внимательны.
Реальный пример можно увидеть здесь:
Скачать
Это уже не первый урок на данную тему, возможно вы не видели прошлые и они вам будут интересны:
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 > textarea > </ 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. Конечно надо предусматривать как будет выглядеть тот или иной элемент в старых браузерах, но и про новые возможности забывать нельзя!
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 имеет одноколоночную форму.
Форма с несколькими колонками
HTML-формы являются элементами управления, которые применяются для сбора информации от посетителей веб-сайта.
Веб-формы состоят из набора текстовых полей, кнопок, списков и других элементов управления, которые активизируются щелчком мыши. Технически формы передают данные от пользователя удаленному серверу.
Для получения и обработки данных форм используются языки веб-программирования, такие как PHP , Perl .
До появления HTML5 веб-формы представляли собой набор нескольких элементов , , завершающихся кнопкой . Для стилизации форм в разных браузерах приходилось прилагать немало усилий. Кроме того, формы требовали применения JavaScript для проверки введенных данных, а также были лишены специфических типов полей ввода для указания повседневной информации типа дат, адресов электронной почты и URL-адресов.
HTML5-формы решили большинство этих распространенных проблем благодаря наличию новых атрибутов, предоставив возможность изменять внешний вид элементов форм за счет CSS3 .
Рис. 1. Улучшенные веб-формы с помощью HTML5Создание HTML5-формы
1. Элемент
. Он не предусматривает ввод данных, так как является контейнером, удерживая вместе все элементы управления формы – поля . Атрибуты этого элемента содержат информацию, общую для всех полей формы, поэтому в одну форму нужно включать поля, объединенные логически.2. Группировка элементов формы
Элемент
предназначен для группировки элементов, связанных друг с другом, разделяя таким образом форму на логические фрагменты.Каждой группе элементов можно присвоить название с помощью элемента