Безопасный метод авторизации на php. Форма входа и регистрации с помощью HTML5 и CSS3
Авторизация и регистрация – одни из важнейших функций любого сайта, во многом определяющие лицо ресурса. От доступности и простоты регистрации напрямую зависит количество пользователей в вашей базе, а легкость авторизации кардинальным образом влияет на UX и наличие у пользователя желания продолжать с вами взаимоотношения. Также простые, понятные и безупречно функционирующие формы избавят вас от шквала писем в техническую поддержку, которые непременно станут для вас головной болью в случае, если процесс регистрации и авторизации на вашем сайте остается проблемным и сложным при достаточно большом количестве пользователей.
По этой причине мы уже не раз обсуждали вопрос о формах регистрации/авторизации, причем как в , так и .
В сегодняшнем материале мы обсудим 10 важных и актуальных подходов, комплексное использование которых позволит создавать формы с высокими показателями юзабилити и, что немаловажно, accessibility . Для читателей, сталкивающихся с этим термином впервые, поясним – аксессибилити есть степень доступности сервиса или сайта для людей с ограниченными возможностями, начиная с пользователей, имеющих нарушенное восприятие цвета, и заканчивая теми, кто не вполне хорошо и точно может управлять мышкой. Кстати, одна из следующих статей будет всецело посвящена теме аксессибилити, так как пользователи, веб-разработчики и оптимизаторы в рунете пока еще плохо знакомы с этим понятием и сопутствующими подходами, а в свете тенденций развития русскоязычного сегмента сети, вопрос о доступности сайтов для людей с ограниченными возможностями становится острым и актуальным.
1. Лучший способ авторизации – это ее отсутствие.
Да, наш первый тезис является банальной и основной истиной UX – чем меньше действий требуется от пользователя, тем лучше. Зачастую, пользуясь некоторыми сайтами, у меня возникает вопрос: «Почему я должен регистрироваться здесь ради того, чтобы разово воспользоваться определенной услугой?». И хотя подобных сайтов, обязывающих вас регистрироваться при отсутствии на то весомых причин, становится меньше, на многих eCommerce сайтах до сих пор можно встретить регистрацию, единственная задача которой заключается в том, чтобы осложнить пользователю жизнь. Это, в первую очередь, относится к разнообразным онлайн-магазинам, требующим от вас регистрации даже для разового приобретения какой-то сущей мелочи.
Итак, для начала убедитесь, что вам действительно нужна регистрация пользователя для того, чтобы обеспечить ему подобающий сервис и полную функциональность. Если это так, то в первую очередь рассмотрите наиболее простой и быстрый способ авторизации, а именно использование модулей социальных сетей, повсеместно распространенных в сети на данный момент и обеспечивающих аутентификацию пользователя в один клик. И если еще несколько лет назад в ответ на предложение использовать модули социальных сетей можно было возразить, что еще не все пользователи ушли в социальные сети и сервисы, то сейчас абсолютное, подавляющее большинство пользователей имеют аккаунт в том или ином сервисе.
Существует большое количество крайне популярных сервисов, охватывающих миллионы пользователей по всему миру. Есть очень большая вероятность, что у вашего среднестатистического пользователя есть аккаунт по меньшей мере в одном из всех представленных сервисов. А представить вы можете действительно много: начиная от традиционного Facebook и заканчивая Yahoo , Amazon и GitHub .
Второе устойчивое возражение против социальных модулей, ранее встречавшееся в процессе веб-разработки, заключалось в опасениях пользователей относительно соблюдения сайтом конфиденциальности и безопасности личных данных, которые пользователь сообщает сайту автоматически, идентифицируя свою личность через один из аккаунтов соцсети. На данный момент, вместе с распространением и беспрецедентной интеграцией социальных сервисов в нашу повседневную жизнь, подобные страхи среди пользователей встречаются все реже, в то время как практически автоматическое кликанье по кнопкам авторизации через социальные сети стало постоянной практикой.
2. Электронная почта должна быть альтернативой любому другому идентификатору пользователя.
В отличие от различных имен и никнеймов, которые часто пользователями забываются, свою почту в большинстве случаев человек помнит всегда. Признаться, мне всегда поднимает настроение сайт, который не слишком требователен ко мне и который готов принять как мое уникальное имя, указанное при регистрации, так и указанную при регистрации почту. В целом, это просто замечательная идея – дать возможность пользователю авторизироваться как с помощью почты, так и с помощью уникального имени. Большой плюс такого подхода во многом связан с тем, что электронная почта и пароль – это крепкая связка, живущая в сознании пользователя. К ней он обращается каждый раз при регистрации на очередном сайте, так почему бы не развить это логичное сочетание и не дать возможность воспользоваться им и при авторизации?
Возможность ввести свою почту в поле user – самое красноречивое проявление заботы о пользователе на этапе авторизации.
Кроме того, с электронной почтой пользователя также связан еще один важный момент – во время процедуры восстановления доступа к сайту при забытом пароле, не делайте обязательным указание уникального имени пользователя – в отличие от почты, оно действительно очень часто забывается.
3. Возможность быстрого переключения между формами авторизации и регистрации.
Достаточно логичным будет расположение форм ввода регистрации и авторизации рядом друг с другом. И хотя они обладают разными функциями и алгоритмом действий, между ними все-таки есть определенная концептуальная схожесть. Компактно расположив формы регистрации и авторизации рядом, а также обеспечив легкий переход между ними (в один клик) вы ощутимо улучшите юзабилити сайта. Кроме того, хорошим способом реализации будет размещение двух кнопок «Регистрация» и «Вход» рядом друг с другом, при клике по которым основная форма будет отображаться либо в форме всплывающего окна, либо выдвигающейся панели.
Максимально компактное и близкое расположение форм регистрации и входа на сайте журнала The Verge .
4. Простой и лаконичный язык.
Несмотря на то, что с используемой терминологией в рунете в последнее время все стало значительно лучше, неясные формулировки и неоднозначные слова все еще можно встретить на кнопках, обозначающих такие простые и тривиальные вещи, как регистрация и авторизация.
Так или иначе, существует несколько разных подходов к выбору надписей на кнопках. Определенно, в большинстве случаев наиболее оправданным является использование лаконичных и однозначных надписей, таких как «Вход», «Войти», «Создать», «Присоединиться» и «Зарегистрироваться». Однако если вы стремитесь создать определенный эффект, то вполне допустимо уходить от лаконичных формулировок к более красочным, таким как «Стать участником», «Войти в мир» и так далее.
Стоит заметить, что при наличии времени и ресурсов проведение A\B тестирования всегда будет полезным.
В качестве примера того, как формируются и меняются пользовательские предпочтения, можно привести опрос Джефа Атвуд а, демонстрирующий популярность различных способов обозначения кнопки авторизации в Соединенных Штатах и Великобритании. Надеемся, что скоро подобная аналитика станет привычной и для рунета.
« Sign In » все чаще используется вместо любых других формулировок.
5. Совместимость форм авторизации с менеджерами паролей различных браузеров.
Менеджеры паролей, интегрированные в браузеры – великое изобретение, колоссально облегчающее использование интернета. Они стали настолько привычной частью нашей повседневной жизни, что мы давно перестали думать о них как о таковых. Мы просто воспринимаем как должное тот факт, что после единичной авторизации на каком-либо сайте нам не придется делать это повторно, мы привыкли видеть формы, заполненные автоматически, и мы начинаем чувствовать себя очень некомфортно, когда обнаруживаем, что форма на сайте, на котором мы уже авторизовывались, оказывается пустой.
Учитывая все это, тестирование формы авторизации с менеджерами паролей различных браузеров – необходимость, которой нельзя пренебрегать. Конечно, кроме интегрированных в браузер менеджеров пользователи вполне могут пользоваться и сторонними менеджерами, но, как правило, при условии, что ваша форма корректно взаимодействует со всеми широко распространенными браузерами, она будет корректно заполняться и сторонним менеджером паролей.
6. Предупреждение и автоматическое исправление ошибок ввода.
Пользователи очень часто делают ошибки при заполнении форм. Характерно, что часто ошибки, сделанные пользователем, являются для него неочевидными, даже если это банальный ввод с неправильной раскладкой или пропущенная буква в пароле. Работать с пользовательскими ошибками мы должны сразу в двух направлениях – внятно оповещать пользователя, обозначая ошибки, и автоматически исправлять то, что возможно исправить.
Что касается оповещений, то набор из предупреждения о включенном Caps Lock, неправильной раскладке или недопустимых символах является базовым – пренебрегать им никак нельзя, ради обеспечения комфорта пользователя вы должны указывать на все без исключения ошибки.
Исправление опечаток и ошибок ввода в автоматическом режиме – достаточно неоднозначная и спорная тема. Наиболее корректно автоматическое исправление в формах может работать с опечатками при указании пользователем электронной почты. Пропущенные буквы в домене или отсутствие точки вполне можно исправлять при помощи автоматического алгоритма, не опасаясь исправить что-либо, введенное пользователем правильно.
7. Стоит ли принуждать пользователей к выбору “подходящего” пароля?
Это еще один вопрос, вызывающий споры среди веб-разработчиков. Для начала следует признать, что, несмотря на все предупреждения, средний пользователь по-прежнему не придает должного значения придумыванию устойчивого и сложного пароля. Как быть с этим фактом – команда каждого сайта решает сама. Можно наблюдать, как по-разному ведут себя формы регистрации на различных сайтах, когда вопрос заходит о вводе пароля. Какие-то формы абсолютно не требовательны к пользователю и принципиально не обременяют его необходимостью соблюдать какие-либо правила, другие – напротив, делают все, чтобы заставить пользователя придумать действительно надежный пароль.
Выбирать, какой подход вам следует использовать, нужно исходя из характера вашего проекта и того, насколько он связан с хранением личных данных пользователя. Если ваш сайт обладает выраженной развлекательной направленностью и аккаунт пользователя не представляет особой ценности для сторонних лиц, то, соответственно, для вас нет никакой необходимости устанавливать строгие правила ввода пароля.
Если же деятельность вашего сайта связана с хранением личных данных и, вероятно, с осуществлением критически важных действий со стороны пользователя, включая финансовые операции, то в таком случае вам придется в той или иной степени проконтролировать пользователя на стадии ввода пароля.
Существует несколько различных способов контролировать придумывание пользователем пароля. Самый простой – использовать один из алгоритмов, анализирующих сложность пароля и сообщающих пользователю о степени сложности и защищенности придуманной комбинации. В то же время, алгоритм вполне может устанавливать некий критический порог, который пользователь должен преодолеть, иначе пароль будет считаться слишком простым и не будет принят системой. Этот подход широко используется на самых разнообразных сайтах.
Классическое сопровождение ввода цветовой индикацией на примере Яндекс.Почты.
Кроме контроля сложности и ограничения минимального количества символов, применяется также еще один довольно любопытный способ, заключающийся в анализе и сопоставлении пользовательского пароля с базой самый популярных паролей в мире , насчитывающей 10 тысяч комбинаций. В случае если вводимый пользователем пароль не оригинален и является одним из самых распространенных, то пользователь получает соответствующее предупреждение и предложение выбрать другую комбинацию.
« That password is too common » – оповещение на Discourse , сообщающее о том, что выбранный пользователем пароль слишком простой и распространенный.
Тем не менее, обратная сторона все подобных действий, направленных на «воспитание» пользователя – практически гарантированное раздражение от опытных пользователей, трезво оценивающих ситуацию и принимающих самостоятельно решение о том, стоит ли в данном случае обойтись простым, символическим паролем, или же необходимо использовать более сложный. По этой причине, вам необходимо взвешенно и последовательно выстраивать политику оценки пользовательских паролей – крайности в этом вопросе могут обернуться как массовым взломом аккаунтов ваших пользователей (и, как следствие, невероятная нагрузка на вашу службу поддержки), так и раздражением и уходом посетителей, которые устали предлагать вашему алгоритму подходящие пароли.
8. Оставляйте возможность переключаться между полями ввода с помощью клавиши «Tab» и выделяйте элементы при таком переключении.
Да, несмотря ни на что, пользователи, все еще переключающиеся между полями формы при помощи клавиши «Tab», еще живы и вполне активны. К слову, автор этой статьи сам частенько пользуется Tab`ом при заполнении различных форм. И, между прочим, как горячая клавиша, Tab здорово ускоряет работу.
Веб-разработчикам не стоит забывать про наше существование – обязательно тестируйте свои формы на корректный отклик на клавишу Tab. И помните, что кроме того, что такое переключение между формами само по себе должно иметь место, вы также должны позаботиться о достаточном визуальном выделении активных элементов.
Фокусировка при переключении Tab `ом в Firefox и Chrome .
9. Как правильно ограничивать количество попыток авторизации или восстановления доступа к аккаунту.
Рано или поздно, но множественные попытки авторизации или восстановления пароля следует останавливать. Можно снисходительно отнестись к 5 или даже 10 попыткам, однако их настойчивое продолжение должно вас насторожить. С дальнейшими операциями по аутентификации, регистрации или восстановлению аккаунта вы должны работать. Самый очевидный способ – после N-нного количества попыток предложить пользователю (или тому, кто скрывается под маской пользователя) ввести капчу, дабы отсеять ботов. Кроме того, хорошим способом является блокировка аккаунта на определенное время при провале множественных попыток авторизации и всех остальных аналогичных действий. Обратите внимание, что аккуратность в этом подходе относится не только к необходимости дать пользователю возможность ошибиться действительно достаточное количество раз, но и к умеренному времени блокировки. Первая блокировка, которую вы будете вынуждены осуществить, не должна быть слишком длительной – просто предупредите в нужный момент того, кто пытается осуществить действие с аккаунтом, что следующая попытка обернется блокировкой на определенное время. Если по истечению этого времени пользователь, взломщик или бот продолжит делать ошибки, то вы вполне можете последовательно увеличивать временной интервал до внушительных значений.
Стоит заметить, что подобные техники с последовательно увеличивающейся временной блокировкой должны быть привязаны к одному IP – не забывайте, что после безуспешных действий злоумышленника, приведших к блокировке, вашим сайтом вполне может воспользоваться настоящий пользователь, IP которого будет, разумеется, другим.
10. Помните о том, что обозначать ошибки одним лишь цветом может быть недостаточно.
Во многом, вопрос выделения сделанных пользователем ошибок дополнительными средствами, не относящимися к привычному цветовому обозначению, зависит от масштабов вашего проекта и количества существующей и потенциальной аудитории. Дело в том, что расстройства цветового восприятия у пользователей распространены шире, чем мы привыкли о них думать . Уже каждый 12-ый пользователь мужского пола является дальтоником, а каждый 30-ый, вне зависимости от пола, обладает плохим зрением. Вам может показаться, что эти показатели не критичны и таких особенных пользователей у вас должно быть немного, однако при достижении определенного критического количества зарегистрированных посетителей, вы неизбежно будете иметь дело с такими людьми. Будет здорово, если вы уделите им немного внимания и облегчите их задачи.
Говоря о дополнительных средствах, которыми можно обозначить сделанные пользователем ошибки, мы имеем в виду такие простые символы, как треугольник с восклицательным знаком, заметный крест рядом с полем, содержащим ошибку, и другие подобные визуальные обозначения. Для того чтобы получить примерное представление о важности таких обозначений для людей, имеющих нарушенное восприятие цвета, рассмотрим характерный пример:
Регистрационная форма PayPal в черно-белом виде.
При анализе данного скриншота регистрационной формы PayPal, переведенной в ч\б режим, наше внимание приковывает, в первую очередеь, треугольник с восклицательным знаком, размещенный в поле капчи. Судя по общей картине, можно сделать вывод, что пользователь забыл ввести лишь капчу, и что с остальными полями все в порядке (вне зависимости от того, заполнены они или нет).
Регистрационная форма PayPal в полноцветном режиме.
Как мы видим, в полноцветной реальности соответствующим образом обозначены все поля, а не только поле для капчи. Однако, тот самый треугольник, который в любом случае сообщит посетителю с расстройством восприятия цвета об ошибке, находится только в одном поле. Примечательно, что эта неявная, и, казалось бы, совершенно не бросающаяся в глаза ошибка была в дальнейшем устранена оптимизаторами:
Новая регистрационная форма PayPal однозначным образом сообщает пользователю об ошибке вне зависимости от того, способен ли он различать цвета.
Как и подход к дизайну в целом, способы создания современных и актуальных регистрационных форм постоянно претерпевают изменения. Несмотря на то, что такая сфера веб-разработки, как формы авторизации и регистрации, обладает устоявшимися правилами и традициями, сами подходы к созданию этих форм постоянно меняются, так же как меняется сам пользовательский опыт и пользовательское восприятие. Постоянно отслеживая изменения пользовательского поведения и тех тенденций, которые формируют сами веб-разработчики и оптимизаторы, вы всегда сможете сохранять все составные части своего проекта, в том числе и формы регистрации и авторизации, актуальными и легко доступными для пользователя. А мы, в свою очередь, будем продолжать держать вас в курсе самых последних трендов в проектировании и оптимизации сайтов. Желаем вам высоких конверсий и больших пользовательских аудиторий!
Продолжаю делиться версткой элементов интерфейса для сайтов. Как и в своей , я взял интересный пример с сайта PremiumPixels.com и сверстал его, используя CSS3. На этот раз это форма авторизации .
В дизайне этой формы используются приятные нежные цвета, поэтому выглядит она действительно элегантно. Глядя на подобную красоту, у меня всегда возникает мысль о том, как же здорово быть дизайнером и уметь вытворять такие вещи.
Я для себя уже нашел применение этой формы. Если и вам она тоже понравилась, то вы также можете использовать ее на своих сайтах. Далее в статье, пройдя по соответствующим ссылкам, вы найдете необходимый исходный код.
Примеры
Для удобства вы можете посмотреть живой пример сверстанной формы на сайте jsFiddle , либо скачать код архивом по следующей ссылки:
Особенности
- В верстке данной формы используется всего одно изображение — для фона страницы. Хотя и оно не обязательно. Возможности CSS3 позволили обойтись без изображения при создании кнопки.
- Максимально приближенно к исходному дизайну форма выглядит в правильных браузерах: Opera, Firefox, Chrome, Safari (исключение составляет лишь больший радиус закругления у внешней обводки полей ввода). Есть некоторые недочеты в IE9 (некорректные закругления углов полей ввода, отсутствие градиента у кнопки). Ну а если смотреть в более ранних версиях IE, то, как обычно, всей красоты мы лишаемся. Конечно, при желании в IE кнопку можно сделать изображением.
- Широкая обводка, которая присутствует у полей ввода помимо бордюра, реализована с помощью свойства box-shadow . В связи с особенностью этого свойства, радиус закругления получился больше, чем на исходном дизайне, но, я думаю, это не портит картину.
Пользуйтесь на здоровье.
На специализированном сайте представлены материалы по css html для чайников . Рассматриваются различные практичные примеры, а также публикуются советы и рекомендации для новичков в html-верстке.
Всем привет. Итак, мы изучили несколько элементов для создания форм. Пришло время объединить наши знания для решения задачи побольше. Давайте создадим самую простую форму для авторизации на сайте. Для этого нам необходимы два поля, делаем и привязываем к ним подписи.
Первое поле – для логина, второе – для пароля. И вот со вторым не все так просто. Поскольку на текущий момент оно представляет собой просто поле для ввода текста.
Результат в браузере:
Чтобы введенный в нем текст заменялся на звездочки, как это принято для поля такого типа, необходимо сделать одно простое действие. А именно, осуществить замену значения атрибута type на password :
Результат:
Кнопка отправки формы
Ну, вот. Наша форма уже почти готова. Теперь, чтобы завершить ее создание, необходимо сделать кнопку, которой будет осуществляться отправка формы. Задача решается с применением тега с типом submit .
Если на кнопке должна присутствовать какая-то надпись, то ее можно сделать, используя атрибут value . Задавать имя кнопке или нет – на ваше усмотрение, то если вы это сделаете, то сервер будет получать это имя, а также значение кнопки.
Как правило, в имени кнопки отправки формы есть потребность тогда, когда у формы есть несколько кнопок, каждая из которых выполняет определенное действие. Благодаря этому сервер, получая от браузера имя и значение кнопки, понимает, на какую именно кнопку нажал пользователь и что, соответственно, необходимо выполнить.
В итоге код нашей формы получится следующим:
Результат в браузере:
Привет, друзья! Сегодня мы хотим предложить вам очередное CSS-руководство! После всевозможных переключателей и выпадающих списков, позвольте нам перейти к разработке форм. В целом, мы будем создавать формы авторизации. Сегодня практически каждый веб-сервис, приложение, игра и так далее предлагает (а иногда даже требует) нам подписку, что означает необходимость иметь какую-нибудь форму, посредством которой пользователь регистрируется или авторизуется.
Учитывая это, мы попробовали разработать несколько разных форм авторизации, некоторые из которых были созданы под вдохновением от дизайн-идей с просторов интернета. Нашей целью было придать каждой из них какую-то особенность.
Кое-что перед тем, как начать:
* В отрывках CSS-кода вы не увидите браузерных префиксов, но все они есть в исходниках.
* Цель данного руководства заключается в том, чтобы показать вам потенциал CSS, в особенности CSS3, и поэтому рендер в IE8 и ниже может отличаться. Если вы планируете организовывать поддержку этих браузеров, постарайтесь предоставить запасные варианты.
* Мы не используем на теге формы атрибуты вроде action или method, так как наша цель – сосредоточиться на дизайне.
* Здесь мы используем box-model, где [ширина]=[ширина элемента]+[отступы]+[границы]. Эту модель можно активировать следующим отрывком кода:
*,
*:after,
*:before {
box-sizing: border-box;
}
Пару слов о дружественности с пользователем
Вам нужны формы для различных ситуаций, где взаимодействие с пользователем и вашим приложением неизбежно: авторизация, комментарии, обратная связь и многие другие случаи. Если вы что-то напартачите со своей формой, будьте уверены, что вы напартачили и с пользователем.
С учетом этого было выработано несколько правил, которые вам следует соблюдать для того, чтобы сделать свои формы лучше, более дружественными с пользователями. Давайте ознакомимся с небольшой подборкой.
* Ярлыки: ярлыки очень важны. Мы не говорим сейчас о теге "label", мы говорим о том, что нужно четко и ясно дать пользователю понять назначение того или иного поля. Давайте поясним: все поля одинаковы. И только потому, что пользователь видит ярлыки, он понимает, что нужно вписывать в какое поле. Используйте ярлыки, или иконки, или что угодно, лишь бы пользователь понял все сразу и точно.
* Поля: чем более привлекательны ваши поля ввода, тем приятнее на них смотреть и, соответственно, тем более довольным останется пользователь. Создайте немного пространства вокруг полей ввода. Не встраивайте их в контент. Поля ввода должны быть достаточно большими (они должны хотя бы вмещать в себя то, что в них заполняют). Не делайте поля ввода миниатюрными, вынуждая пользователей перемещаться по ним при помощи клавиш стрелок.
* Ярлыки + поля: создайте привязку между вашими полями ввода и соответствующими ярлыками. К ярлыкам примените атрибут "for". Нажимать на поля ввода текста очень просто даже на мобильных устройствах. Нажатие же на чекбокс может вызвать осложнения, особенно если речь идет о мобильной навигации. Если вы реализуете возможность кликать по ярлыку, чтобы поставить отметку в чекбоксе, вы в значительной степени облегчите жизнь пользователей. Также рекомендуем вам делать поля ввода достаточно большими, чтобы их было хорошо видно при просмотре через мобильное устройстве.
* Положения: CSS позволяет нам определять элемент по его текущему положению: hovered, focused, active, default и т.д. Важно показать пользователю, что он наводит курсор на что-то, на что можно кликнуть, либо выделить то, что он может заполнить.
* Кнопка подтверждения: кнопка подтверждения – это последний этап при заполнении формы. Она должна быть хорошо видна. Не забывайте про элементы, побуждающие к действию. Не используйте тот же стиль для кнопки подтверждения, сделайте ее веселее, привлекательнее! Никогда не используйте надпись «Submit»! Она смущает! Если это форма авторизации, то используйте соответствующую надпись «Sign in» или «Log in». Если же это форма комментариев, используйте что-нибудь в жанре «Опубликовать» или «Оставить комментарий». Сообщайте пользователю, для чего предназначена кнопка.
* Атрибуты и поля ввода в HTML5: HTML5 предоставляет нам множество удобных новых атрибутов и полей ввода, что в значительной степени облегчает нам работу с формами. Используйте эти атрибуты и поля ввода по необходимости и, конечно же, не забывайте о запасных вариантах для браузеров без поддержки. Подробнее об этом вы можете прочесть на Wufoo.
Итак, мы рассказали вам всю нужную информацию! Пора приступать к разработке форм, друзья!
Пример 1
Как мы говорили ранее, мы постарались делать каждую форму отличной от других, придать им специфику. В данном примере мы рассмотрим кнопку подтверждения, которая имеет закругленные углы и создает впечатление независимости от экрана.
Разметка
Итак, первый наш пример будет довольно миниатюрным, здесь мы не будем использовать ярлыки. Но нам, конечно же, необходимо рассказать пользователям о том, что им следует вписывать в эти поля, поэтому мы используем… иконки! Маленькие теги «i».
Примечание: как обычно, здесь мы не будем рассказывать о том, как использовать иконические шрифты вроде FontAwesome. Если вы хотите изучить эту тему, то можете на официальном веб-сайте.
У нас есть два контейнера, которые будут оборачивать поле ввода и иконку. Кнопка подтверждения будет в отдельном контейнере, и мы используем «button» вместо «input» с иконкой внутри.
Мы также задействуем заглушки для того, чтобы все было еще больше понятным для поддерживаемых браузеров. Больше информации по поводу браузерной поддержки атрибута placeholder вы можете найти на сайте CanIUse.com.
CSS-код
Давайте начнем со стилизации самого элемента формы. Форма будет основной оболочкой наших демо, поэтому задайте ей ширину и центрируйте при помощи полей.
Form-1 {
/* Size & position */
width: 300px;
margin: 60px auto 30px;
padding: 10px;
position: relative; /* For the submit button positioning */
/* Styles */
box-shadow:
0 0 1px rgba(0, 0, 0, 0.3),
0 3px 7px rgba(0, 0, 0, 0.3),
inset 0 1px rgba(255,255,255,1),
inset 0 -3px 2px rgba(0,0,0,0.25);
border-radius: 5px;
background: linear-gradient(#eeefef, #ffffff 10%);
}
Form-1 .field {
position: relative; /* For the icon positioning */
}
Важно: мы выставили ей относительное позиционирование для того, чтобы кнопку подтверждения позиционировать абсолютно. Мы делаем то же самое с контейнерами.field для того, чтобы также иконки расположить абсолютно.
Говоря об иконках, давайте сразу и сделаем их.
Form-1 .field i {
/* Size and position */
left: 0px;
top: 0px;
position: absolute;
height: 36px;
width: 36px;
/* Line */
border-right: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 1px 0 0 rgba(255, 255, 255, 0.7);
/* Styles */
color: #777777;
text-align: center;
line-height: 42px;
pointer-events: none;
}
Мы добавляем небольшую линию в правую сторону иконки, выставив правую границу и тень блока.
Так как мы хотим поиграть с их цветами для положений:hover и:focus, мы задаем им плавный переход.
Прибавка «pointer-events: none» позволяет нам кликать по области иконки и переносить фокус на поле ввода, которое расположено ниже (то есть, мы как будто кликаем по самому полю).
Теперь нам нужно задать стилизацию полям ввода:
Form-1 input,
.form-1 input {
font-size: 13px;
font-weight: 400;
/* Size and position */
width: 100%;
padding: 10px 18px 10px 45px;
/* Styles */
box-shadow:
inset 0 0 5px rgba(0,0,0,0.1),
inset 0 3px 2px rgba(0,0,0,0.1);
border-radius: 3px;
background: #f9f9f9;
color: #777;
transition: color 0.3s ease-out;
}
Form-1 input {
margin-bottom: 10px;
}
Нам нужно удостовериться в том, что ни иконка, ни кнопка ввода не перекрывают текст. Это можно сделать, задав полю ввода хорошие отступы. Мы также выставляем нижнее поле первому полю ввода для того, чтобы избежать перекрытия второго поля.
Form-1 input:hover ~ i,
.form-1 input:hover ~ i {
color: #52cfeb;
}
Form-1 input:focus ~ i,
.form-1 input:focus ~ i {
color: #42A2BC;
}
Form-1 input:focus,
.form-1 input:focus,
outline: none;
}
Здесь важно отметить две вещи: мы используем родственный селектор (~) для того, чтобы изменить цвет иконок при взаимодействии с полями ввода: светло-голубой для положения при наведении, темно-синий для активного положения. И для браузера Chrome мы исключаем контур.
Последнее, что нам нужно оформить, это кнопка подтверждения. По причине не очень привлекательного наложения (чертов параметр z-index), нам пришлось обернуть её в контейнер для того, чтобы все работало. Мы, вероятно, можем убрать этот контейнер, но тогда нам придется прибегнуть к другим хитрым CSS-трюкам, а нам это ни к чему.
Form-1 .submit {
/* Size and position */
width: 65px;
height: 65px;
position: absolute;
top: 17px;
right: -25px;
padding: 10px;
z-index: 2;
/* Styles */
background: #ffffff;
border-radius: 50%;
box-shadow:
0 0 2px rgba(0,0,0,0.1),
0 3px 2px rgba(0,0,0,0.1),
inset 0 -3px 2px rgba(0,0,0,0.2);
}
Здесь все довольно просто: мы создаем окружность, и располагаем ее поверх нашей формы, немного правее. Тени блока помогут акцентировать этот эффект наложения.
Проблема: тени блока акцентируют этот эффект наложения, но они также могут и испортить его. На самом деле, мы можем видеть тень у рамки формы (пространство между полями и правым отступом у формы).
В целом, мы можем скрыть эти тени масками с тем же фоновым цветом формы. И работа эта предназначена для псевдо-элемента!
Form-1 .submit:after {
/* Size and position */
content: "";
width: 10px;
height: 10px;
position: absolute;
top: -2px;
left: 30px;
/* Styles */
background: #ffffff;
/* Other masks trick */
box-shadow: 0 62px white, -32px 31px white;
}
У нас есть три тени, которые нужно скрыть, так как наш окружный элемент находится в месте пересечения пространства между полями и правым отступом от формы. Мы располагаем первую поверх окружного элемента. И посредством параметра box-shadow мы имитируем две другие маски. Нам кажется, что это довольно сложно объяснить, поэтому мы рекомендуем вам открыть ваш инструмент для разработки и отключить строку box-shadow на.submit:after для того, чтобы понять, что здесь происходит. Последнее, но не менее важное, это сама кнопка подтверждения:
Form-1 button {
/* Size and position */
width: 100%;
height: 100%;
margin-top: -1px;
/* Icon styles */
font-size: 1.4em;
line-height: 1.75;
color: white;
/* Styles */
border: none; /* Remove the default border */
border-radius: inherit;
background: linear-gradient(#52cfeb, #42A2BC);
box-shadow:
0 1px 2px rgba(0,0,0,0.35),
inset 0 3px 2px rgba(255,255,255,0.2),
inset 0 -3px 2px rgba(0,0,0,0.1);
Cursor: pointer;
}
Наконец, мы оформляем положения кнопки при наведении, фокусировки и активном положении (нажатое состояние):
Form-1 button:hover,
.form-1 button:focus {
background: #52cfeb;
transition: all 0.3s ease-out;
}
Form-1 button:active {
background: #42A2BC;
box-shadow:
inset 0 0 5px rgba(0,0,0,0.3),
inset 0 3px 4px rgba(0,0,0,0.3);
}
Все довольно просто: сплошной цвет для положений при наведении и фокусировке. Но погодите, здесь ведь больше! Так как мы используем градацию при стандартном положении, и градации не могут плавно перейти в сплошной текст, браузер сначала отключает градацию, потом применяет фоновый цвет. Такое поведение вызывает вспышку белого цвета, когда вы наводите на кнопку, что, как нам кажется, выглядит классно! Как будто вспышка света!
Пример 2
Следующий пример не такой простой, и предусматривает некоторые новые опции: кнопку «Sign in with Twitter», и переключатель «Show password». Здесь нам потребуется некоторый код javascript.
Разметка
Здесь мы будем использовать заголовок. Мы использовали h1, но вы можете использовать что захотите. Мы также использовали ярлыки, привязанные к полям ввода посредством атрибута "for".
CSS-код
Давайте начнем с того, что зададим некоторые основные стили всей форме:
Form-2 {
/* Size and position */
width: 340px;
margin: 60px auto 30px;
padding: 15px;
position: relative;
/* Styles */
background: #fffaf6;
border-radius: 4px;
color: #7e7975;
box-shadow:
0 2px 2px rgba(0,0,0,0.2),
0 1px 5px rgba(0,0,0,0.2),
0 0 0 12px rgba(255,255,255,0.4);
}
Мы создадим полу-прозрачную границу, применив тени блока.
Теперь, когда мы задали нашей форме базовую стилизацию, давайте поработаем над заголовком. В заголовке у нас три разных стиля: bold (полужирный), caps (заглавные буквы) и dark grey (темно-серый); bold (полужирный), caps (заглавные буквы) и orange (оранжевый), а также light (уточненный), low (прописные буквы) и light grey (светло-серый). Итак, основной стиль + 2 добавочных:
Form-2 h1 {
font-size: 15px;
font-weight: bold;
color: #bdb5aa;
padding-bottom: 8px;
border-bottom: 1px solid #EBE6E2;
text-shadow: 0 2px 0 rgba(255,255,255,0.8);
box-shadow: 0 1px 0 rgba(255,255,255,0.8);
}
Form-2 h1 .log-in,
.form-2 h1 .sign-up {
display: inline-block;
text-transform: uppercase;
}
Form-2 h1 .log-in {
color: #6c6763;
padding-right: 2px;
}
Form-2 h1 .sign-up {
color: #ffb347;
padding-left: 2px;
}
Далее мы используем два параграфа, которые будут расположены рядом друг с другом. Каждый будет занимать 50% доступного пространства в элементе "form\ и, благодаря “border-box” box-sizing, отступы будут высчитываться внутри этих 50%. Поэтому мы можем создать промежуток между этими двумя элементами.
Form-2 .float {
width: 50%;
float: left;
padding-top: 15px;
border-top: 1px solid rgba(255,255,255,1);
}
Form-2 .float:first-of-type {
padding-right: 5px;
}
Form-2 .float:last-of-type {
padding-left: 5px;
}
Наши оболочки выставлены. Давайте стилизуем элементы внутри них! У нас есть ярлык и поле ввода. В данном примере иконка внутри ярлыка:
Form-2 label {
display: block;
padding: 0 0 5px 2px;
cursor: pointer;
text-transform: uppercase;
font-weight: 400;
text-shadow: 0 1px 0 rgba(255,255,255,0.8);
font-size: 11px;
}
Form-2 label i {
margin-right: 5px; /* Gap between icon and text */
display: inline-block;
width: 10px;
}
Примечание: использование cursor: pointer на ярлыках помогает пользователям понять, что они могут кликнуть по этому элементу. Это очень важный момент.
Form-2 input,
.form-2 input {
font-family: "Lato", Calibri, Arial, sans-serif;
font-size: 13px;
font-weight: 400;
display: block;
width: 100%;
padding: 5px;
margin-bottom: 5px;
border: 3px solid #ebe6e2;
border-radius: 5px;
transition: all 0.3s ease-out;
}
Не забудьте о положениях при наведении и фокусировании:
Form-2 input:hover,
.form-2 input:hover {
border-color: #CCC;
}
Form-2 label:hover ~ input {
border-color: #CCC;
}
Form-2 input:focus,
.form-2 input:focus {
border-color: #BBB;
outline: none; /* Remove Chrome"s outline */
}
Посмотрите, как мы используем родственный селектор (~) для того, чтобы запустить положение hover у полей ввода тогда, когда мы наводим курсор на ярлыки. Круто, не правда ли?
Теперь, что касается кнопок подтверждения. Но погодите, так как они обе плавают в собственном контейнере, нам ведь нужно применить к ним clearfix. Не забыли, как мы должны это делать?
Clearfix:after {
content: "";
display: table;
clear: both;
}
Form-2 input,
.form-2 .log-twitter {
/* Size and position */
width: 49%;
height: 38px;
float: left;
position: relative;
/* Styles */
box-shadow: inset 0 1px rgba(255,255,255,0.3);
border-radius: 3px;
cursor: pointer;
/* Font styles */
font-family: "Lato", Calibri, Arial, sans-serif;
font-size: 14px;
line-height: 38px; /* Same as height */
text-align: center;
font-weight: bold;
}
Form-2 input {
margin-left: 1%;
background: linear-gradient(#fbd568, #ffb347);
border: 1px solid #f4ab4c;
color: #996319;
text-shadow: 0 1px rgba(255,255,255,0.3);
}
Form-2 .log-twitter {
margin-right: 1%;
background: linear-gradient(#34a5cf, #2a8ac4);
border: 1px solid #2b8bc7;
color: #ffffff;
text-shadow: 0 -1px rgba(0,0,0,0.3);
text-decoration: none;
}
Обе кнопки имеют в ширине 49%, а также левые/правые поля, что позволяет создать между ними небольшой промежуток. Теперь мы прибавим к ним положение при наведении (hover) и активное положение.
Form-2 input:hover,
.form-2 .log-twitter:hover {
box-shadow:
inset 0 1px rgba(255,255,255,0.3),
inset 0 20px 40px rgba(255,255,255,0.15);
}
Form-2 input:active,
.form-2 .log-twitter:active{
top: 1px;
}
Благодаря относительному позиционированию, мы можем применить top: 1px к кнопкам в активном положении для того, чтобы они создавали впечатление, будто мы их нажимаем.
Важно: для браузеров, которые не поддерживают box-shadow (а такие все еще остались), мы используем изменение в background-color. Класс "no-boxshadow" будет применяться к HTML посредством Modernizr в случае, если браузер не поддерживает тени блоков. Это очень хороший пример того, как мы можем быстренько создать запасной вариант для старых браузеров:
No-boxshadow .form-2 input:hover {
background: #ffb347;
}
No-boxshadow .form-2 .log-twitter:hover {
background: #2a8ac4;
}
javascript-код
Эй, не забыли ли мы о нашей маленькой функции отображения пароля? Как раз ей мы сейчас и займемся! Для начала давайте выясним, знали ли вы, что мы не можем изменить атрибут "type" у элемента ввода? Невозможно! Для того, чтобы сделать надпись "show password" переключателем, нам нужно удалить имеющееся поле пароля, и вместо него создать поле текстового ввода.
Мы нашли небольшой от Aaron Saray, который поможет нам справиться с этой задачей. Давайте посмотрим:
$(function(){
$(".showpassword").each(function(index,input) {
var $input = $(input);
$("
").append(
$("").click(function() {
var change = $(this).is(":checked") ? "text" : "password";
var rep = $("")
.attr("id", $input.attr("id"))
.attr("name", $input.attr("name"))
.attr("class", $input.attr("class"))
.val($input.val())
.insertBefore($input);
$input.remove();
$input = rep;
})
).append($("
Он обозначает все элементы ввода классом.showpassword.
Создает новый контейнер (.opt).
Внутри этого контейнера он создает чекбокс с ярлыком, привязанным к нему.
Он вставляет контейнер после родительского элемента поля.showpassword.
Когда по чекбоксу производится клик, он удаляет элемент ввода.showpassword, и создает вместо него еще один, но уже с соответствующим атрибутом "type".
Давайте не будем забывать о стилизации чекбокса и нового ярылка.
Form-2 p:last-of-type {
clear: both;
}
Form-2 .opt {
text-align: right;
margin-right: 3px;
}
Form-2 label {
display: inline-block;
margin-bottom: 10px;
font-size: 11px;
font-weight: 400;
text-transform: capitalize;
}
Form-2 input {
vertical-align: middle;
margin: -1px 5px 0 1px;
}
Последнее, но не менее важное то, что нам нужно добавить несколько строк кода jQuery, чтобы изменить иконку тогда, когда в чекбоксе будет стоять отметка! Просто очень просто, но невероятно эффективно!
$("#showPassword").click(function(){
if($("#showPassword").is(":checked")) {
$(".icon-lock").addClass("icon-unlock");
$(".icon-unlock").removeClass("icon-lock");
} else {
$(".icon-unlock").addClass("icon-lock");
$(".icon-lock").removeClass("icon-unlock");
}
});
Пример 3
Этот пример был создан под вдохновением от старой работы от Virgil Pana на Dribbble. К сожалению, он, по всей видимости, убрал эту работу с сайта, поэтому мы не сможем показать вам оригинальную идею. В любом случае, вы наверное догадались, что данный пример наглядно показывает нам, как можно создать невероятный световой эффект при помощи CSS.
Разметка
Посмотрите, как мы представляем новую функцию в этой форме: опция "Remember Me". Это нечто конкретное для форм авторизации, так как эта опция позволяет приложению запоминать авторизовавшихся пользователей.
CSS-код
Form-3 {
font-weight: 400;
/* Size and position */
width: 300px;
position: relative;
margin: 60px auto 30px;
padding: 10px;
overflow: hidden;
/* Styles */
background: #111;
border-radius: 0.4em;
border: 1px solid #191919;
box-shadow:
inset 0 0 2px 1px rgba(255,255,255,0.08),
0 16px 10px -8px rgba(0, 0, 0, 0.6);
}
Тень под формой авторизации выглядит особенным образом из-за отрицательного радиуса. Мы можем примерно так использовать тень.
Давайте немного углубимся в структуру нашей формы. Что касается полей, то здесь мы используем два тега p, обволакивающих ярлык и элемент ввода, оба из которых плавающие. Это означает, что нам нужно к нашим контейнерам применить clearfix (смотрите предыдущий пример).
Давайте добавим стилизацию к нашим ярлыкам и полям ввода текта и пароя, а также доведем до ума их положения при наведении и фокусировании:
Form-3 label {
/* Size and position */
width: 50%;
float: left;
padding-top: 9px;
/* Styles */
color: #ddd;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: 0 1px 0 #000;
text-indent: 10px;
font-weight: 700;
cursor: pointer;
}
Form-3 input,
.form-3 input {
/* Size and position */
width: 50%;
float: left;
padding: 8px 5px;
margin-bottom: 10px;
font-size: 12px;
/* Styles */
background: linear-gradient(#1f2124, #27292c);
border: 1px solid #000;
box-shadow:
0 1px 0 rgba(255,255,255,0.1);
border-radius: 3px;
/* Font styles */
font-family: "Ubuntu", "Lato", sans-serif;
color: #fff;
Form-3 input:hover,
.form-3 input:hover,
.form-3 label:hover ~ input,
.form-3 label:hover ~ input {
background: #27292c;
}
Form-3 input:focus,
.form-3 input:focus {
box-shadow: inset 0 0 2px #000;
background: #494d54;
border-color: #51cbee;
outline: none; /* Remove Chrome outline */
}
Теперь, когда у нас есть привлекательные поля ввода, нам нужно создать небольшой чекбокс для опции "Remember Me", а также кнопку подтверждения. Эти две вещи будут выравнены друг за другом:
Form-3 p:nth-child(3),
.form-3 p:nth-child(4) {
float: left;
width: 50%;
}
Мы воспользуемся расширенными CSS-селекторами для их определения, но вы можете использовать класс, если хотите (либо если вам приходится, для поддержки устаревших браузеров). В любом случае, давайте приступим к разработке чекбокса и его ярлыка:
Form-3 label {
width: auto;
float: none;
display: inline-block;
text-transform: capitalize;
font-size: 11px;
font-weight: 400;
letter-spacing: 0px;
text-indent: 2px;
}
Form-3 input {
margin-left: 10px;
vertical-align: middle;
}
Так как данный ярлык сильно отличается от других, нам нужно изменить пару вещей, чтобы он был полностью корректен. Лучше всего будет сначала исключить все ранее выставленные стили. Что касается чекбокса, то мы добавляем маленькое поле к его правой стороне, чтобы ярлык к нему не «прилипал», а также немного подправим вертикальное выравнивание.
Наконец, наша кнопка подтверждения с положением при наведении курсора:
Form-3 input {
/* Width and position */
width: 100%;
padding: 8px 5px;
/* Styles */
border: 1px solid #0273dd; /* Fallback */
border: 1px solid rgba(0,0,0,0.4);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 10px 10px rgba(255,255,255,0.1);
border-radius: 3px;
background: #38a6f0;
cursor:pointer;
/* Font styles */
font-family: "Ubuntu", "Lato", sans-serif;
color: white;
font-weight: 700;
font-size: 15px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
}
Form-3 input:hover {
box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
Form-3 input:active {
background: #287db5;
box-shadow: inset 0 0 3px rgba(0,0,0,0.6);
border-color: #000; /* Fallback */
border-color: rgba(0,0,0,0.9);
}
No-boxshadow .form-3 input:hover {
background: #2a92d8;
}
Но где же обещанный световой эффект? Итак, друзья, давайте теперь им и займемся. Нам понадобятся три элемента:
* один для линии градации от верхней части формы
* один для небольшой вспышки в предыдущей строке
* один для большого отражения правой части формы
Начнем с первых двух элементов с псевдо-элементами в теге form.
/* Gradient line */
.form-3:after {
/* Size and position */
content: "";
height: 1px;
width: 33%;
position: absolute;
left: 20%;
top: 0;
/* Styles */
background: linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
}
/* Small flash */
.form-3:before {
/* Size and position */
content: "";
width: 8px;
height: 5px;
position: absolute;
left: 34%;
top: -7px;
/* Styles */
border-radius: 50%;
box-shadow: 0 0 6px 4px #fff;
}
Наконец, наше световое отражение. Погодите, у нас ведь нет достаточного количества псевдо-элементов? Не беспокойтесь, для этого мы используем наш первый элемент параграфа.
Form-3 p:nth-child(1):before{
/* Size and position */
content: "";
width: 250px;
height: 100px;
position: absolute;
top: 0;
left: 45px;
/* Styles */
transform: rotate(75deg);
background: linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
pointer-events: none;
}
Важно: вам нужно будет отключить события при кликах при помощи параметра pointer-events. Если вы не сделаете этого, то вы не сможете нажимать на поля ввода, так как поверх них будет расположен еще один слой. Нам нужно будет убрать отражение в браузерах, которые не поддерживают pointer-events:
No-pointerevents .form-3 p:nth-child(1):before {
display: none;
}
Пример 4
Особенность этого примера заключается в отсутствии ярлыков. Или иконок. Да, мы знаем, что раньше говорили о том, что нам необходимо иметь что-то, что сообщает пользователям предназначение полей. И у нас здесь все будет! У нас будут заглушки. А для браузеров, которые их не поддерживают, мы сделаем видимые ярлыки!
Разметка
Позвольте нам представить "required" атрибут. Когда он поддерживается, он позволяет браузеру проверить, заполнено ли поле или нет, а также соответствующим образом подтвердить форму.
Важно: рекомендуем вам всегда создавать проверку подтверждаемой формы на стороне сервера. С помощью веб-инспектора без труда можете исключить атрибут, а также может быть отключена поддержка javascript, поэтому мы не рекомендуем вам полагаться только на проверку на стороне клиента.
CSS-код
Как обычно, давайте начнем с формы и заголовка, так как здесь все очень просто.
Form-4 {
/* Size and position */
width: 300px;
margin: 60px auto 30px;
padding: 10px;
position: relative;
/* Font styles */
color: white;
text-shadow: 0 2px 1px rgba(0,0,0,0.3);
}
Form-4 h1 {
font-size: 22px;
padding-bottom: 20px;
}
Дальше мы переходим к элементам ввода:
Form-4 input,
.form-4 input {
/* Size and position */
width: 100%;
padding: 8px 4px 8px 10px;
margin-bottom: 15px;
/* Styles */
border: 1px solid #4e3043; /* Fallback */
border: 1px solid rgba(78,48,67, 0.8);
background: rgba(0,0,0,0.15);
border-radius: 2px;
box-shadow:
inset 0 1px 1px rgba(0,0,0,0.1);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
/* Font styles */
font-family: "Raleway", "Lato", Arial, sans-serif;
color: #fff;
font-size: 13px;
}
Давайте изменим стиль заглушек (где это возможно):
Form-4 input::-webkit-input-placeholder {
color: rgba(37,21,26,0.5);
}
Form-4 input:-moz-placeholder {
color: rgba(37,21,26,0.5);
text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}
Form-4 input:-ms-input-placeholder {
color: rgba(37,21,26,0.5);
text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}
Далее, давайте добавим стилизацию элементов при наведении и фокусировании:
Form-4 input:hover,
.form-4 input:hover {
border-color: #333;
}
Form-4 input:focus,
.form-4 input:focus,
.form-4 input:focus {
box-shadow:
0 1px 0 rgba(255,255,255,0.2),
inset 0 1px 1px rgba(0,0,0,0.1),
0 0 0 3px rgba(255,255,255,0.15);
outline: none;
}
/* Fallback */
.no-boxshadow .form-4 input:focus,
.no-boxshadow .form-4 input:focus {
outline: 1px solid white;
}
А также кнопку подтверждения:
Form-4 input {
/* Size and position */
width: 100%;
padding: 8px 5px;
/* Styles */
background: linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));
border-radius: 5px;
border: 1px solid #4e3043;
box-shadow:
inset 0 1px rgba(255,255,255,0.4),
0 2px 1px rgba(0,0,0,0.1);
cursor: pointer;
transition: all 0.3s ease-out;
/* Font styles */
color: white;
text-shadow: 0 1px 0 rgba(0,0,0,0.3);
font-size: 16px;
font-weight: bold;
font-family: "Raleway", "Lato", Arial, sans-serif;
}
Form-4 input:hover {
box-shadow:
inset 0 1px rgba(255,255,255,0.2),
inset 0 20px 30px rgba(99,64,86,0.5);
}
/* Fallback */
.no-boxshadow .form-4 input:hover {
background: #594642;
}
А теперь, давайте разберемся с нашим запасным вариантом на случай отсутствия поддержки элемента "placeholder". Заглушка или "placeholder" не является критически важным элементом, насколько нам известно, пока вы не полностью полагаетесь только не него. В данном случае, нам как раз нужно предоставить запасной вариант.
Form-4 label {
display: none;
padding: 0 0 5px 2px;
cursor: pointer;
}
Form-4 label:hover ~ input {
border-color: #333;
}
No-placeholder .form-4 label {
display: block;
}
Все очень просто: если не поддерживаются заглушки, то ярлыки становятся видимыми. Конец истории.
Пример 5
Последний пример представляет нам минималистичную форму в стеклянном стиле. Мы не будем использовать ярлыки, и все здесь будет выглядеть компактно. Мы будем вращать текст кнопки подтверждения и сделаем так, чтобы стрелочка появлялась при наведении.
Разметка
Минималистичная разметка для минималистичной формы.
CSS-код
Form-5 {
/* Size and position */
width: 300px;
margin: 60px auto 30px;
position: relative;
/* Styles */
border-radius: 5px;
box-shadow: 0 0 5px rgba(0,0,0,0.1), 0 3px 2px rgba(0,0,0,0.1);
}
Давайте оформим наши параграф и поля ввода:
Form-5 p {
width: 70%;
float: left;
border-radius: 5px 0 0 5px;
border: 1px solid #fff;
border-right: none;
}
Form-5 input,
/* Size and position */
width: 100%;
height: 50px;
padding: 0 10px;
/* Styles */
border: none; /* Remove the default border */
background: white; /* Fallback */
background: rgba(255,255,255,0.2);
box-shadow:
inset 0 0 10px rgba(255,255,255,0.5);
/* Font styles */
font-family: "Montserrat", sans-serif;
text-indent: 10px;
color: #ee4c8d;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
font-size: 20px;
}
Form-5 input {
border-bottom: 1px solid #fff; /* Fallback */
border-bottom: 1px solid rgba(255,255,255,0.7);
border-radius: 5px 0 0 0;
}
Form-5 input {
border-top: 1px solid #CCC; /* Fallback */
border-top: 1px solid rgba(0,0,0,0.1);
border-radius: 0 0 0 5px;
}
Давайте добавим сюда немного стилизации при наведении и заглушки:
Form-5 input:hover,
.form-5 input:hover,
.form-5 input:focus,
.form-5 input:focus {
background: #f7def7; /* Fallback */
background: rgba(255,255,255,0.4);
outline: none;
}
Form-5 input::-webkit-input-placeholder {
color: #fff;
}
Form-5 input:-moz-placeholder {
color: #fff;
text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
font-family: "Handlee", cursive;
}
Form-5 input:-ms-input-placeholder {
color: #fff;
text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
font-family: "Handlee", cursive;
}
А теперь, пришло время перейти к кнопке подтверждения. Маленький i-элемент будет содержать иконку стрелки, но сейчас мы не будем делать ее видимой, только при наведении. Обратите внимание на то, что мы используем span-элемент внутри кнопки для того, чтобы вращать текст без вращения кнопки.
Form-5 button {
/* Size and position */
width: 30%;
height: 102px;
float: left;
position: relative;
overflow: hidden;
/* Styles */
background:
url(../images/noise.png),
radial-gradient(ellipse at center, #ee4c8d 0%,#b53467 100%);
border-radius: 0 5px 5px 0;
box-shadow:
inset 0 0 4px rgba(255, 255, 255, 0.7),
inset 0 0 0 1px rgba(0, 0, 0, 0.2);
border: none;
border-left: 1px solid silver;
cursor: pointer;
line-height: 102px; /* Same as height */
}
Form-5 button i {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: -20px;
font-size: 64px;
line-height: 109px;
color: #8d1645;
opacity: 0;
transition: all 0.2s ease-out;
}
Form-5 button span {
display: block;
/* Font styles */
color: #8d1645;
font-family: "Montserrat", Arial, sans-serif;
font-size: 20px;
text-shadow: 0 1px 0 rgba(255,255,255,0.4);
transform: rotate(-90deg);
transition: all 0.2s linear;
}
В случае, если браузер не поддерживает параметр "transform", текст просто не будет вращаться. Невелика потеря.
Мы также добавили незначительную текстуру к кнопке, применив два фона: текстуру и радиальную градацию, которая расположена под текстурой.
Теперь давайте перейдем к эффекту при наведении, фокусировании и активном положении. При наведении мы сделаем так, чтобы span-элемент сдвигался влево и растворялся, и появлялась стрелка:
Form-5 button:focus {
outline: none;
}
Form-5 button:hover span,
.form-5 button:focus span {
opacity: 0;
transform: rotate(-90deg) translateY(-20px);
}
Form-5 button:hover i,
.form-5 button:focus i {
opacity: 0.5;
left: 0;
transition-delay: 0.2s;
}
/* Click on button */
Form-5 button:active span,
.form-5 button:active i {
transition: none;
}
Form-5 button:active span {
opacity: 0;
}
Form-5 button:active i {
opacity: 0.5;
left: 0;
color: #fff;
}
Когда мы кликаем по кнопке, нам не требуется никаких переходов, поэтому все выглядит довольно опрятно.
javascript-код
Давайте здесь используем немного javascript для того, чтобы имитировать работу HTML5-параметра Placeholder в браузерах, которые не имеют соответствующей поддержки. Мы воспользуемся jQuery-плагином от Mathias Bynens. За подробностями обратитесь к репозиторию .
После включения jQuery и скрипта, мы просто вызываем его следующим образом:
$(function(){
$("input, textarea").placeholder();
});
И это добавит имитацию заглушки в старые версии браузеров.
Внимание! У вас нет прав для просмотра скрытого текста.
HTML5 дает много возможностей и улучшений для веб-форм, появились новые атрибуты и типы полей, которые были введены, главным образом, чтобы сделать жизнь веб-разработчикам проще, а работу с формами более удобной для веб-пользователей. Сегодня мы будем делать страницу авторизации при помощи html5. Если вы не знакомы с новыми «полезностями» для форм, этот урок вам поможет.
Окончательный результат:
Пишем разметку
Давайте создадим следующую разметку
Section class="loginform cf">
Если вы работали с HTML-формами раньше, этот код вам покажется знакомым. Но есть также и некоторые особенности. Поля имеют заполнители и некоторые атрибуты, которые являются новыми.
Заполнители полей (placeholder)
Атрибут placeholder позволяет включить текст по умолчанию в поле, который исчезнет, когда элемент получит фокус или когда поле заполнено. Раньше мы делали это при помощи JavaScript, но теперь все стало намного проще благодаря новым атрибутам.
Атрибут «required»
Атрибут required не позволяет оставлять пустые поля до отправки формы. Если пользователь не заполнил поле, появляется следующая ошибка.
Новый селектор также включен в CSS3 (:required). Вот пример:
Input { border : 1px solid red ; }
Типы полей
Наше первое поле имеет тип email (типы инпутов — это еще одно нововведение HTML5). Если пользователь не заполнит поле с адресом электронной почты, появится следующее уведомление;
Использование такого инпута также удобно тем, что пользователям мобильных устройств (iPhone или Android) будет удобнее заполнять поле с выделенным «@» .
Новые возможности, предлагаемые для форм HTML5, являются мощными и простыми в реализации, но они не везде поддерживаются, например;
Атрибут placeholder поддерживают только современные браузеры - Firefox 3.7+, Safari 4+, Chrome 4+ and Opera 11+ . Если вы хотите это исправить, используйте этот костыль в сочетании с Modernizr .
То же с атрибутом required
. Уведомление об ошибке не могут быть персонифицированы, но ошибка будет оставаться: «Пожалуйста, заполните поля» вместо
«Пожалуйста, введите имя», этот атрибут также поддерживается только в нормальных браузерах.
Label { display : block ; color : #999 ; } .cf :before , .cf :after { content : "" ; display : table; } .cf :after { clear : both ; } .cf { *zoom: 1 ; } :focus { outline : 0 ; }
Все поля, кроме поля для «submit», будут иметь следующие стили:
Loginform input:not ([ type=submit] ) { padding : 5px ; margin-right : 10px ; border : 1px solid rgba(0 , 0 , 0 , 0 .3 ) ; border-radius: 3px ; box-shadow: inset 0px 1px 3px 0px rgba(0 , 0 , 0 , 0 .1 ) , 0px 1px 0px 0px rgba(250 , 250 , 250 , 0 .5 ) ; }
А вот стили для кнопки для отправки формы.
Loginform input[ type=submit] { border : 1px solid rgba(0 , 0 , 0 , 0 .3 ) ; background : #64c8ef ; /* Old browsers */ background : -moz-linear-gradient(top , #64c8ef 0 % , #00a2e2 100 % ) ; /* FF3.6+ */ background : -webkit-gradient(linear, left top , left bottombottom, color-stop(0 % ,#64c8ef ) , color-stop(100 % ,#00a2e2 ) ) ; /* Chrome,Safari4+ */ background : -webkit-linear-gradient(top , #64c8ef 0 % ,#00a2e2 100 % ) ; /* Chrome10+,Safari5.1+ */ background : -o-linear-gradient(top , #64c8ef 0 % ,#00a2e2 100 % ) ; /* Opera 11.10+ */ background : -ms-linear-gradient(top , #64c8ef 0 % ,#00a2e2 100 % ) ; /* IE10+ */ background : linear-gradient(to bottombottom, #64c8ef 0 % ,#00a2e2 100 % ) ; /* W3C */ filter: progid:DXImageTransform .Microsoft .gradient ( startColorstr="#64c8ef" , endColorstr="#00a2e2" ,GradientType=0 ) ; /* IE6-9 */ color : #fff ; padding : 5px 15px ; margin-right : 0 ; margin-top : 15px ; border-radius: 3px ; text-shadow : 1px 1px 0px rgba(0 , 0 , 0 , 0 .3 ) ; }
Вот и все! Надеемся, этот урок вам пригодился.