Html обязательное поле для заполнения. Обязательные и необязательные поля при заполнении форм. Веб-форма на Wufoo визуально выделяет активные элементы цветом фона
Практически на каждом сайте можно увидеть форму регистрации. Конечно есть такие, кто просто брал чужую форму, вставлял себе, а потом пользователь хочет зарегистрироваться, но не может. Бывают такие случаи что при регистрации определенный пароль допускается и у вас получается зарегистрироваться, но затем когда вы пытаетесь войти на сайт, появляется ошибка что это недопустимый пароль, и так сайт теряет определенное количество посетителей, поэтому будьте внимательны.
Реальный пример можно увидеть здесь:
Скачать
Это уже не первый урок на данную тему, возможно вы не видели прошлые и они вам будут интересны:
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. Конечно надо предусматривать как будет выглядеть тот или иной элемент в старых браузерах, но и про новые возможности забывать нельзя!
Практически все современные сайты и новые имеют формы, которые проверятся на заполнение без перезагрузки страницы. Так называемые – обязательныеполя формы. Но какие способы для создания таких форм при этом используются?
До недавнего времени самым популярным способом было использование jаvascript. Очень удобной библиотекой является jquery validation. Данный способ является современным, но для его интеграции в форму на сайте нужны некоторые навыки работы и время.
С появлением html 5 и его повсеместной интеграцией на современные сайты можно отказаться от использования jаvascript. При этом для того, чтобы сделать поле в форме обязательным для заполнения нужно только добавить атрибут required.
С атрибутом required браузер перед отправкой формы проверит, заполнено ли конкретное поле или нет. Если нет, то пользователю будет указано на обязательное заполнение поля или даже всех полей формы.
А для создания таких полей потребуется не больше минуты.
Итак, допустим есть небольшая форма:
Вот так она выглядит в браузере:
Теперь делаем некоторые поля в форме обязательными для заполнения:
Вот и все. Мы сделали все поля обязательными для заполнения меньше, чем за 1 минуту. Если не заполнять обязательные поля, то мы увидим следующие сообщения:
И, немаловажное. Данная проверка работает во всех современных браузерах и только для спецификации html 5. Для непосвященных - в начале html кода нужно вставить тег .
Применение этого скрипта позволит Вам анализировать заполнение обязательных полей формы. В отличие от многих других анализаторов форм, в этом варианте проверка выполняется на стороне клиента а не на серверной части. И лишь в случае заполнения нужных полей, введенная информация передается на сервер. Если требуемые поля не заполненны, то выдается сообщение с перечислением незаполненных полей и форма не передается на сервер.
Данный скрипт я использовал при создании сайта www.prtut.ru .
Демонстрация скрипта
В примере все поля обязательны для заполнения.
Описание
Для задания обязательных полей в форме используется произвольный аттрибут required , который прописывается лишь для полей требующих обязательного ввода. Например: