Шаблоны форм авторизации html css. Отправка данных формы. Добавление шрифтовых иконок

Все знают, что типы ссылок описывают взаимосвязь между двумя или более страницами на сайте. Определение типа ссылки полезно для SEO, так как позволяет поисковым системам лучше понимать ваш сайт. Так же они могут объяснять причину, почему эта ссылка присутствует на данной странице и дать поисковому роботу гораздо больше информации, чем вы можете подумать.

Краткий перечень типов ссылок

Тип	Для чего используется
alternate	альтернативный способ отображения страницы
author	За ссылкой подробная информация об авторе
bookmark	Постоянная ссылка
help	Справка или информация помогающая с какой-то частью сайта или контента
license	Ссылка на информацию об авторском праве
nofollow	Ссылка, которую вы не рекомендуете. Возможно вы ее разместили их корыстных мотивов
prefetch	Ресурс, который скорее всего заинтересует пользователя. Сообщает браузеру, что его можно заранее поместить в кэш
search	Поиск по сайту
tag	Ключевое слово или название категории сайта
next	Ссылка на следующую страницу
prev	Ссылка на предыдущую страницу

Как определить тип ссылки?

Для определения типа используется атрибут rel

rel=alternate
Тип alternate указывает на то, что по этой ссылкой идет альтернативный вид отображения страницы. Например, это может быть PDF версия, или версия оптимизированная для печати.

PDF версия страницы

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

English version

rel=author
Этот тип сообщает, что за ссылкой находиться подробная информация об авторе сайта или страницы.

Постоянная ссылка на страницу автора

rel=help
Ссылка данного типа ведет к контенту справочного характера. Но есть важный момент. Help-ссылка контекстно-зависимая. Браузер сопоставит эту справочную информацию с родительским контейнером, в котором была размещена эта ссылка.

Ваш комментарий: Помощь по комментариям

rel=license
Этот тип может использоваться когда ссылка ведет на лицензионное соглашение основного контента данной страницы. Ссылка данного типа должна быть размещена в пределах тега main сайта. Лицензионное соглашение относится только к тому контенту, которое размещено в пределах этой секции. Оно не будет относится к тому, что например у вас в подвале.

Лицензия

rel=nofollow
Этот тип сообщает, что поисковому роботу не следует воспринимать эту ссылку как ссылку, которую рекомендует публицист

Робот, не переходи на эту страницу

rel=prefetch
Ссылки этого типа следует использовать когда вы ссылаетесь на некие внешние ресурсы, которые пользователь скорее всего откроет. Браузер закеширует заранее эту ссылку и она откроется очень быстро без всяких ожиданий.

Это обязательно нужно прочитать

rel=search
Этот тип сообщает, что ссылка ведет на интерфейс поиска

Открыть поиск на сайте

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

rel=next и rel=prev
Указывает и используется в постраничной навигации. Ссылка на следующую страницу имеет тип next , а на предыдущую – prev

• 1 страница
• Текущая страница
• 3 страница

Путешествуя в бурных волнах Интернет, дабы не забыть место, куда волей или неволей судьба забросила пользователя, он делает закладки в своем любимом броузере. Они называются Bookmarks или Favorites. Bookmarks (Закладки) или Favorites (Избранное) - это набор ссылок (URL) на интернет-ресурсы, как правило, целые сайты или отдельные страницы. Microsoft Internet Explorer сохраняет каждую ссылку в отдельном файле, Netscape использует для этого html-файл bookmark.htm. Для работы с большим количеством закладок одного броузера становится недостаточно. Помочь пользователю призваны специальные программы для работы со ссылками.
Они подразделяются на:

Программы для организации коллекции ссылок (менеджеры);

Программы для конвертации ссылок из Microsoft Internet Explorer в Netscape, HTML-страницу и наоборот;

Программы для проверки "живучести" ссылок и также для определения изменения ресурсов на указанных страницах.

Рассмотрим эти категории более подробно на примерах лучших программ данного направления..

URL Managers (Менеджеры ссылок)

Compass 2.82
Довольно известный менеджер закладок с большими возможностями.

Поддерживает форматы трех основных броузеров: Netscape, Microsoft Internet Explorer, Opera и другие менее распространенные форматы.

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

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

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

Linkman 6.0.1.45
Еще один довольно известный менеджер по закладкам. Позволяем импортировать закладки из Microsoft Internet Explorer, Netscape, а также позволяет настроить импорт ссылок пользовательского формата. Экспорт в Microsoft Internet Explorer, Netscape, HTML, поддерживает собственный формат. Содержит шаблоны для экспорта в html-файл, которые можно задавать самому. Содержит две уже готовые базы ссылок на ресурсы интернета, в том числе одну по производителям компьютерного "железа". Позволяет задавать рейтинг от 0 до 5 для каждой ссылки.

Поиск дубликатов. Выборка ссылок на локальном диске, удовлетворяющих заданным условиям.

Проверка ссылок на "живучесть" и изменение содержания страниц.

Программа содержит большое количество настроек и по своим характеристикам не уступает Compass"у.

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

Программа позволяет импортировать/экспортировать закладки трех основных броузеров: Netscape, Microsoft Internet Explorer и Opera. Содержит небольшую базу готовых закладок.

URL Converters (Программы конвертации закладок)

Bookmark Converter 2.9
Программка для конвертации закладок Netscape в избранное Microsoft Internet Explorer.

и наоборот.

Ничего лишнего. Просто и со вкусом. Поддерживает режим командной строки. Интуитивно-понятный интерфейс. Умеет также синхронизировать ссылки между Netscape и Microsoft Internet Explorer. Нет лимита на размер коллекции, с моими пятью тысячами ссылок справилась великолепно.

Bookmark Magic 2.31
Еще один конвертер закладок. Конвертация между Microsoft Internet Explorer, Netscape и html-файлом Программа умеет искать дублирующие ссылки. Есть сортировка по описаниям. Основные функции программы также доступны через командную строку.

Программы поиска "мертвых" ссылок

SiteChecker 3.5
Программа проверяет все ссылки на вашем сайте (html-файлы, рисунки и т.д.), включая файлы, на которые никто не ссылается и ссылки на внешние ресурсы. Программа может работать локально или через FTP.

Гибкая система настроек результирующего отчета. На сайте производителя доступно подробное описание: линк

SiteMapper 1.04
SiteMapper от Trellian Software (создавшем линейку продуктов Wolf ) тщательно проанализирует ваш сайт, проиндексирует все ресурсы и создаст детальный рапорт. Проверяет ссылки на отсутствующие страницы и изображения. Пример рапорта можно посмотреть здесь . Программа отмечена многочисленными наградами и, по-видимому, не зря.

Xenu"s Link Sleuth 1.1f
Еще одна программа для проверки сайта на предмет наличия "мертвых" ссылок. Проверяет простые ссылки, рисунки, фреймы, плагины, таблицы стилей, скрипты, Java-аплеты и т.д. Выдает подробный рапорт с сортировкой по заданным критериям, если отметить все опции на больших сайтах, выдает рапорты размером несколько мегабайт.

Поддерживает SSL соединения, FTP, Gopher, redirect"ы. Возможность перепроверки ссылок на случай ошибок во время случайных сбоев сети. Программа отмечена множеством наград. На странице автора имеется подробное описание и ответы на вопросы.

CopyURL 2.30
Говоря о ссылках, нельзя не рассказать о еще одной замечательной программке, которая не вписывается в указанные выше категории, но часто, несмотря на свои размеры, облегчает жизнь. Это бесплатное приложение CopyURL от Moon Software . Оно позволяет добавлять в проводник три дополнительных меню: Copy URL, Copy Link и Copy Name, появляющиеся при нажатии на URL-файле правой кнопки мыши.

В результате выбора этих пунктов в буфер обмена скопируется следующая информация:
Copy URL:
Copy Link: сайт
Copy Name: сайт:
Можно задавать сразу несколько URL. Скачать CopyURL 2.30 можно отсюда

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

Интерфейс Bookmark OS разбит на две части. В левой находится список меток и дерево папок. Кликнув по любой из них, вы увидите все соответствующие закладки в правой части окна с наглядными иконками в виде скриншотов. Благодаря кнопкам на панели инструментов можно сортировать ссылки по дате, названию, домену и прочим атрибутам. Другие кнопки позволяют менять режим отображения закладок: список или плитка.

Разумеется, есть возможность поиска по названиям ссылок и папок.

Добавление и редактирование

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

Отдельного внимания заслуживает возможность редактирования добавленных закладок и папок. Вы можете выделить один или сразу несколько элементов с помощью мышки, а затем перетянуть их в нужную папку или удалить - прямо как в Windows. Но стоит сказать, что в мобильной версии Bookmark OS групповое редактирование отсутствует.

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

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

Кнопка для отмены последнего совершённого действия может не раз спасти ваши данные в подходящий момент.

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

Кроме того, вы можете открывать доступ к выбранным папкам для своих знакомых. Это позволит вам вместе работать над общими ссылками.

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

Здравствуй, дорогой хабрадруг! В этом туториале мы научимся создавать две формы HTML5: форма входа и форма регистрации. Эти формы будут меняться друг с другом местами с помощью псевдо-класса CSS3 :target . Мы будем использовать CSS3 и шрифт с иконками. Идея этого демо в том, чтобы показать пользователю форму входа и предоставить ему ссылку “перехода” к форме регистрации.
В этом туториале я подробно расскажу о том, как создавать эффект как в Демо 1 .

HTML

Здесь мы использовали несколько приемов HTML5. Например, элемент type=password автоматически скрывает то, что пользователь печатает и заменяет символы точками или звездочками (зависит от браузера). Элемент type=email позволяет браузеру проверить правильность формата email адреса. Кроме того, мы использовали параметр require=required ; браузеры, поддерживающие данный параметр не позволят пользователю отправить форму до тех пор, пока поле не заполнено, JavaScript здесь не требуется. Параметр autocomplete=on будет автоматически заполнять некоторые поля. Мы также использовали замещающийся текст, который поможет пользователю при заполнении формы.

Теперь о двух хитрых моментах. Вы наверное заметили две ссылки в начале формы. Этот ловкий прием позволит нашей формы вести себя правильно при работе с якорями (anchors).

Второй момент связан с применением шрифта с иконками. Мы будем использовать data-attribute , чтобы отобразить иконки. Устанавливая параметр data-icon=”icon_character” с соответствующим символов в HTML, мы должны назначить лишь одно правило в CSS для установления стиля всех иконок. Подробнее об этом приеме можно почитать на сайте: 24 Ways: Displaying Icons with Fonts and Data- Attributes .

CSS

Для чистоты кода я пропущу базовые параметры (html, body и т.п.), но вы сможете найти их в исходных файлах. Повторяю, что я использую приемы CSS3, которые не будут работать во всех браузерах. Итак, давайте же приступим!

Стилизуем формы, используя CSS3

Во-первых, давайте назначим нашим формам базовый стиль.

#subscribe, #login{ position: absolute; top: 0px; width: 88%; padding: 18px 6% 60px 6%; margin: 0 0 35px 0; background: rgb(247, 247, 247); border: 1px solid rgba(147, 184, 189,0.8); box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset; border-radius: 5px; } #login{ z-index: 22; }

Здесь мы назначим свойства для шапки:

/**** текст ****/ #wrapper h1{ font-size: 48px; color: rgb(6, 106, 117); padding: 2px 0 10px 0; font-family: "FranchiseRegular","Arial Narrow",Arial,sans-serif; font-weight: bold; text-align: center; padding-bottom: 30px; } /** На донный момент только webkit поддерживает background-clip:text; **/ #wrapper h1{ background: -webkit-repeating-linear-gradient(-45deg, rgb(18, 83, 93) , rgb(18, 83, 93) 20px, rgb(64, 111, 118) 20px, rgb(64, 111, 118) 40px, rgb(18, 83, 93) 40px); -webkit-text-fill-color: transparent; -webkit-background-clip: text; } #wrapper h1:after{ content:" "; display:block; width:100%; height:2px; margin-top:10px; background: linear-gradient(left, rgba(147,184,189,0) 0%, rgba(147,184,189,0.8) 20%, rgba(147,184,189,1) 53%, rgba(147,184,189,0.8) 79%, rgba(147,184,189,0) 100%); }

Замечу, что сегодня только браузеры с webkit поддерживают background-clip: text , поэтому мы сделаем полосатый фон только для webkit и привяжем его к заголовку H1. Так как параметр background-clip: text работает только в Webkit браузерах, я решил работать только со свойствами webkit. Именно поэтому я разделил CSS на две части и использовал только градиент webkit. Однако вы не должны использовать лишь webkit на своих вебсайтах! Так, например, параметр -webkit-text-fill-color: transparent позволяет нам иметь прозрачный фон, но только для браузеров webkit, все другие браузеры проигнорируют это свойство.

Мы также создали тонкую линию под заголовком с помощью элемента:after pseudo-class. Мы использовали градиент с 2px в высоту и уменьшили прозрачность по краям до нуля.

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

/**** advanced input styling ****/ /* placeholder */ ::-webkit-input-placeholder { color: rgb(190, 188, 188); font-style: italic; } input:-moz-placeholder, textarea:-moz-placeholder{ color: rgb(190, 188, 188); font-style: italic; } input { outline: none; }

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

/* все поля исключают submit и checkbox */ #wrapper input:not(){ width: 92%; margin-top: 4px; padding: 10px 5px 10px 32px; border: 1px solid rgb(178, 178, 178); box-sizing: content-box; border-radius: 3px; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; transition: all 0.2s linear; } #wrapper input:not():active, #wrapper input:not():focus{ border: 1px solid rgba(91, 90, 90, 0.7); background: rgba(238, 236, 240, 0.2); box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; }

Здесь мы использовали псевдо класс:not, чтобы стилизовать все поля, кроме чекбоксов. Кроме того, я решил убрать обводку и добавил свойства:focus и:active.

Теперь время веселиться: шрифт с иконками. Так как мы не можем использовать псевдо-классы:before и:after, мы добавим иконку в параметр label, а затем разместим в поле. Я буду использовать библиотеку fontomas . Вы можете сами сопоставить иконки с соответствующей буквой. Помните атрибут data-icon ? Именно в него нужно вставить букву. Я использовал data-icon=’u’ для логина, ‘e’ для email, ‘p’ для пароля. Как только я выбрал буквы, я скачал шрифт и использовал генератор шрифтов fontsquirrel для конвертации в формат, пригодный для @font-face.

@font-face { font-family: "FontomasCustomRegular"; src: url("fonts/fontomas-webfont.eot"); src: url("fonts/fontomas-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/fontomas-webfont.woff") format("woff"), url("fonts/fontomas-webfont.ttf") format("truetype"), url("fonts/fontomas-webfont.svg#FontomasCustomRegular") format("svg"); font-weight: normal; font-style: normal; } /** магический трюк! **/ :after { content: attr(data-icon); font-family: "FontomasCustomRegular"; color: rgb(106, 159, 171); position: absolute; left: 10px; top: 35px; width: 30px; }

Вот собственно и все. Вам не требуется иметь отдельный класс для каждой иконки. Мы использовали параметр content: attr(data-icon) , чтобы получить букву из атрибута data-icon. Таким образом, нам нужно лишь назначить шрифт, выбрать цвет и разместить иконку.

Теперь назначим правила для кнопки отправки формы.

/*стилизуем обе кнопки*/ #wrapper p.button input{ width: 30%; cursor: pointer; background: rgb(61, 157, 179); padding: 8px 5px; font-family: "BebasNeueRegular","Arial Narrow",Arial,sans-serif; color: #fff; font-size: 24px; border: 1px solid rgb(28, 108, 122); margin-bottom: 10px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); border-radius: 3px; box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0px 0px 0px 3px rgb(254, 254, 254), 0px 5px 3px 3px rgb(210, 210, 210); transition: all 0.2s linear; } #wrapper p.button input:hover{ background: rgb(74, 179, 198); } #wrapper p.button input:active, #wrapper p.button input:focus{ background: rgb(40, 137, 154); position: relative; top: 1px; border: 1px solid rgb(12, 76, 87); box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; } p.login.button, p.signin.button{ text-align: right; margin: 5px 0; }

Трюк заключается в том, чтобы использовать box-shadow, чтобы создать несколько рамок. Естественно, вы можете использовать лишь одну рамку, но также можно и несколько. Мы будем использовать параметр length для создания “фейковой” второй белой рамки, 3px в ширину, без размытия.

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

/* стилизуем чекбокс "запомнить меня"*/ .keeplogin{ margin-top: -5px; } .keeplogin input, .keeplogin label{ display: inline-block; font-size: 12px; font-style: italic; } .keeplogin input#loginkeeping{ margin-right: 5px; } .keeplogin label{ width: 80%; }

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

P.change_link{ position: absolute; color: rgb(127, 124, 124); left: 0px; height: 20px; width: 440px; padding: 17px 30px 20px 30px; font-size: 16px ; text-align: right; border-top: 1px solid rgb(219, 229, 232); border-radius: 0 0 5px 5px; background: rgb(225, 234, 235); background: repeating-linear-gradient(-45deg, rgb(247, 247, 247) , rgb(247, 247, 247) 15px, rgb(225, 234, 235) 15px, rgb(225, 234, 235) 30px, rgb(247, 247, 247) 30px); } #wrapper p.change_link a { display: inline-block; font-weight: bold; background: rgb(247, 248, 241); padding: 2px 6px; color: rgb(29, 162, 193); margin-left: 10px; text-decoration: none; border-radius: 4px; border: 1px solid rgb(203, 213, 214); transition: all 0.4s linear; } #wrapper p.change_link a:hover { color: rgb(57, 191, 215); background: rgb(247, 247, 247); border: 1px solid rgb(74, 179, 198); } #wrapper p.change_link a:active{ position: relative; top: 1px; }

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

Создаем анимацию

Первое, что мы сделаем, мы спрячем вторую форму, назначив opacity на 0:

#register{ z-index: 21; opacity: 0; }

Помните, что форма входа имеет параметр z-index: 22? Второй форме мы назначим этот параметр на 21, чтобы поставить его “под” форму входа.

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

#toregister:target ~ #wrapper #register, #tologin:target ~ #wrapper #login{ z-index: 22; animation-name: fadeInLeft; animation-delay: .1s; }

Вот, что происходит: когда мы кликаем на кнопку Присоединиться , мы направляемся на #toregister. Затем происходит анимация и лишь потом переходим на элемент #register. Мы используем анимацию под названием fadeInLeft . Так как мы “прячем” форму, используя нулевую прозрачность, мы применим анимацию, которая будем постепенно появляться. Мы также изменили z-index, чтобы она появилась поверх другой формы. То же самое происходит для другой формы same happens for the other form.
Вот код для анимации. Мы использовали CSS3 animation framework от Dan Eden и адаптировали этот фреймворк под наш туториал.

Animate{ animation-duration: 0.5s; animation-timing-function: ease; animation-fill-mode: both; } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } }

Форма, которая “исчезает”, будет иметь анимацию затемнения влево:

#toregister:target ~ #wrapper #login, #tologin:target ~ #wrapper #register{ animation-name: fadeOutLeftBig; } @keyframes fadeOutLeft { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-20px); } }

Теперь вы можете использовать другие анимации от Dan Eden’ с помощью файла animate.css: просто измените класс.animate class и названия анимаций. Вы также обнаружите несколько других анимаций в конце файла animate-custom.css file.

Вот и все, друзья. Надеюсь вам понравился этот туториал!

Заметим, что в некоторых браузерах параметр background-clip: text не поддерживается. В Internet Explorer 9 анимации не работают. В Internet Explorer 8 и ниже псевдо-класс:target pseudo-class не поддерживается, поэтому там этот эффект вообще работать не будет.

P.S. Все замечания по поводу перевода с удовольствием приму в личку. Спасибо!

Теги: Добавить метки

HTML5 дает много возможностей и улучшений для веб-форм, появились новые атрибуты и типы полей, которые были введены, главным образом, чтобы сделать жизнь веб-разработчикам проще, а работу с формами более удобной для веб-пользователей. Сегодня мы будем делать страницу авторизации при помощи html5. Если вы не знакомы с новыми «полезностями» для форм, этот урок вам поможет.

Окончательный результат:

Пишем разметку

Давайте создадим следующую разметку

Section class="loginform cf">

• Email
• Password

< /section>

Если вы работали с 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 ) ; }

Вот и все! Надеемся, этот урок вам пригодился.