Форма регистрации
Сниппет формы регистрации аккаунта на сайте при помощи CSS.
Регистрация
Заполните форму, чтобы создать аккаунт.
Электронный адрес
Пароль
Пароль еще раз
Создавая аккаунт вы соглашаетесь с нашими Правилами & Условиями.
Регистрация
Уже есть аккаунт? Войти.
Как сделать форму регистрации аккаунта на сайте
Шаг 1) Добавляем HTML:
Для создания ввода используем элемент . Затем добавляем элементы (с соответствующими метками) для каждого поля ввода:
Шаг 2) Добавляем CSS:
* < box-sizing: border-box; >/* Добавляем отступы для контейнеров */ .container < padding: 16px; >/* Поля ввода на всю ширину */ input[type=text], input[type=password] < width: 100%; padding: 15px; margin: 5px 0 22px 0; display: inline-block; border: none; background: #f1f1f1; >input[type=text]:focus, input[type=password]:focus < background-color: #ddd; outline: none; >/* Переопределяем стиль по умолчанию для hr */ hr < border: 1px solid #f1f1f1; margin-bottom: 25px; >/* Стиль для кнопки регистрации */ .registerbtn < background-color: #4CAF50; color: white; padding: 16px 20px; margin: 8px 0; border: none; cursor: pointer; width: 100%; opacity: 0.9; >.registerbtn:hover < opacity:1; >/* Добавляем синий цвет для текста ссылок */ a < color: dodgerblue; >/* Задаем серый фон и центрируем текст секции "войти" */ .signin
Форма регистрации
Создайте без использования таблиц форму регистрации, представленную на рис. 1. Ширина обрамляющей рамки и серого поля внизу с кнопкой «Зарегистрироваться» резиновая, и меняется в зависимости от ширины окна браузера. Форма должна корректно работать в IE7, IE8, IE9, Firefox 3, Safari 5, Opera 10, Opera 11, Chrome 6 и старше.
Рис. 1. Форма регистрации
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные задачи
- TEX
- Отступы между блоков
- Андроид в тени
- Ссылка как кнопка
- Вложенные списки
- Форма регистрации
- Объединение ячеек таблицы
- Обязательные поля формы
- Цвет и фон в таблице
- Асуанская плотина
- Батарейка
- Заголовки
Создание формы регистрации
Создайте простую форму регистрации как на изображении ниже:
- Цвет фона страницы #f8f8f8;
- Размер формы 320px, внутренний отступ 15px, фон #fff;
- Цвет границ input #ccc;
- Цвет фона кнопки #1cbc11;
- Цвет фона кнопки при наведении #14a20a;
Результат
Если хотите поделиться своим решением, используйте сайты типа codepen.io и оставляйте ссылку в комментарии
Обсуждение ( 7 )
Войдите или зарегистрируйтесь для того чтобы оставлять комментарии
ФОРМА авторизации и регистрации
За несколько уроков создадим форму авторизации и регистрации с переключателями в виде табов и различными эффектами. В данных уроках разберем рад фишки как на CSS так и на JS, к тому же, вы сами сможете эти два инструмента сравнить, и выбрать оптимальный вариант который вам по душе.
Вкратце что разберем:
- Верстку сделаем с использованием FlexBox .
- Пробежимся, как вставлять шрифтовые иконки
- Научимся делать вкладки, к тому же не просто научимся, а по этап но разберем, как этот механизм работает на CSS и на JS .
- Реализуем с вами плавающий текст. До этого в одном из уроков я показывал, как это делать при помощи JS, а тут рассмотрим как это сделать при помощи CSS.
- Познакомимся по ближе с псевдоэелемтами ::before и ::after , и на базе этих знаний сделаем анимацию у кнопки, далее создадим свой анимированный чекбокс.
- В заключительном уроке создадим круговую анимированную обводку у социальных иконок.
По истечению этих уроков вы определенно приобретете знания, которые в дальнейшем вам пригодятся. Обязательно практикуйтесь и внедряйте то что узнали, ведь теория это просто слова, подкрепляйте это все своими действиями и вы научитесь понимать как CSS так и JS.
Предварительная подготовка файлов
Делаем общею разметку, а далее оформляем блоки при помощи CSS.
Сделаем index файл и прописываем в нем DOCTYPE.
Вставляем заголовок «Форма для авторизации», мета тег viewport оставим можно не прописывать но лишним не будет. Подключаем jquery , при помощи его покажу как реализовать ряд эффектов как на нем, так и сравним его с CSS . Ниже подключаем иконки через bootstrapcdn , и далее файл стилей, который позже создадим.
В самой структуре расположен блок с классом dws-wrapper , в нем буду описывать html разметку , а затем при помощи данного класса все выровним посередине экрана. Я его использую для удобства записи и просмотра текущего видео урока. Так что сам класс этот не обязательный, и в своих примерах можете его не прописывать.
Форма для авторизации Тут описываем весь код формы
Далее создаем файл стилей style.css , в нем подключаем шрифт Roboto , сбрасываю отступы у body и центрую блок с классом dws-wrapper посередине экрана.
/* —— google Font ——*/ @import url(‘https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700’); body < margin: 0; padding: 0; font-family: Roboto, sans-serif; >.dws-wrapper
Данную центровку я делаю при помощи позиционирования и трансформации, вы так же можете ее сделать при помощи flexbox .
Для этого объявляем flex-контейнер, задаем высоту область окна 100vh , а затем его элементы выравниваем по горизонтали и вертикали.
/* —— Выравнивание по середине ——*/ .dws-wrapper
Переходим в index файл и создаем в нутрии блок с классом dws-form , он будет являться основным контейнером обертки форм.
Мы сделаем две формы, они будут состоять из двух переключателей и двух контейнеров, это форма Авторизации и форма Регистрации. Логика работы следующая, по нажатию на переключатель мы активируем один из контейнеров, который будет к нему привязан в то же время, второй блок мы автоматически скрываем, а начинаем все описывать с переключателей.
Описываем Переключатели
Переключатели сделаем при помощи label , в нутрии располагаем заголовок (Вкладка 1, Вкладка 2) и соответственно названия полей.
Ниже расположим контейнер для первого переключателя, он же будет отображаться в момент загрузки страницы.
Описываем структуры для Авторизации
Открываем, тег form , присваиваем для него класс tab-form , что бы к ней было проще обращаться при оформлении.
В нутрии формы вкладываем input для ввода Email, прописываем название данного поля при помощи placeholder .
Дублированием текущий input , и модифицируем его под ввод пароля.
Ниже располагаем ссылку, которая будет кнопкой для отправки формы.
Ниже создаем блок с социальными иконками.
Блок с иконками оформим в виде списков, в нутрии каждого списка помещаем ссылку, а в ней уже размещаем иконку.
Иконки отбираю через статью Работа со шрифтовыми иконками. Вы так же можете перейти по ссылке, отобрать те иконки, которые вам нужны, и прописать соответствующий класс в теге (i) внутри ссылки.
Если возникли сложности с отображением иконок, либо они не появились на странице или отобразились в виде пустых квадратов! Вероятней всего, вы не правильно их подключили к странице, либо не полностью прописали класс, просто проверьте повторно себя и все должно заработать.
Более подробно как вставлять иконки, описано в этой же статье. Если по ней пробежитесь, проблем с отображением иконок у вас не составит. К тому же, вы узнаете, как делать анимированные иконки, как их трансформировать, накладывать друг на друга, увеличивать, в общем, все об этом можете почитать в ней.
Далее, ниже блока с иконками, размещаем ссылку на восстановление пароля.
На этом, первый блок разметки мы заканчиваем и приступаем к разметки второго блока для Регистрации.
Описываем структуры для Регистрации
Так как второй блок особо не чем не отличается, я скопирую предыдущую форму и немного ее модифицирую.
Первое поле так и остается для ввода Email, хотя можно дописать в нем placeholder «Введите E-mail адрес», что бы чем-то оно отличалось.
Далее пойдет аналогичное поле для ввода имени только с другим атрибутом type и placeholder . Ниже ссылка, меняем в ней название на «Регистрация».
Затем, социальный блок и ссылку мы убираем, а в место них создаем отдельный блок с классом recover под чекбокс и ссылкой для пользовательского соглашения.
В нем располагаем input с type checkbox , а ниже его label с ссылкой на соглашение.
Вот мы с вами описали первичную структуру текущих форм, и вероятней всего к ней еще вернемся, а сейчас переходим в файл стилей и приступим к их оформлению.
Оформляем блоки с формами в CSS
Добавим для body задний фон, для этого я подготовил изображение, копирую его в основную директорию и подключаю на странице в теге body.
Саму картинку можете скачать поданной ссылке (фоновое изображение).
Начинаем как всегда оформление с основного родителя. Это в нашем случае блок с классом dws-form . Задаем для него белый фон и что бы, содержимое формы не прилипало к стенкам контейнера, устанавливаем внутренние отступы по бокам в 10 пик.
Затем оформим общие элементы, такие как ссылки, списки и input . Зададим для ссылок плавную анимацию, их поведение при наведении и т.д.
Я специально описываю общие элементы через класс dws-form , что бы вы могли вставить данный код на свою страницу, и она не пересекалась бы с вашими стилями.
.dws-form < background: #ffffff; padding: 10px; width: 330px; >.dws-form a < text-decoration: none; transition: 0.5s; color: #298cad; >.dws-form a:hover < color: #36d2ff; >.dws-form ul < list-style: none; padding: 0; margin: 0; >.dws-form input
Что бы, не отвлекали на странице лишние элементы, я изначально их стараюсь скрывать. Для этого создам отдельный стиль, и добавим текущий класс к элементам, которые мы хотим временно убрать.
В данном случае это форма Регистрации, пока она нам не нужна и ее временно скроем.
Оформляем вкладки
Когда описали стили общей структуры, можно приступать к оформлению отдельно взятых элементов. Первые по ДОМ структуре идут вкладки, и рассмотрим логику, как они будут работать.
В момент загрузки страницы одна из вкладок должна быть активная, а тоже время вторая деактивирована. Когда кликаем на неактивную вкладку, она активируется в то же время у другой вкладке активность пропадает.
В принципе тут все довольно просто, это все можно показать при помощи визуального оформления.
Для этого сделаем фон формы прозрачным на 20%, и этот фон будет как бы внешней его частью, а самой форме зададим белый цвет, для этого классу dws-form добавляем соответствующий background, а белого цвета.
.dws-form
Затем, нам нужно показать, как будет выгладить активная и неактивная вкладка.
Наипростейший вариант, это для вкладок label задать отдельный класс tab , который по другому можно оформить.
Добавляем его и в CSS сразу опишем его стили.
Я для удобства что бы видеть границы элементов, с которыми работаю, добавляю для них временно outline обводку. По этому на это внимание не обращайте.
Текст задаем белым, немного сделаем пожирнее. Добавляем внутренние отступы в 15 пик., и что бы вкладки не наезжали на форму при помощи свойства display делаем их строчными элементами.
label.tab
Затем оформляем вкладку, которая является активной.
Наипростейший способ это добавить какой ни будь класс, и далее его оформить. Для этого добавляем одному label класс active и для него описываем стили.
Задаем задний фон как у формы белого цвета, а текст делаем, темно синим.
Обводку убираем, она уже не нужна, у нас и так есть задний фон, делаем у него закругление верхних углов в 3 пик. А что бы вкладка гармонично смотрелась с формой, убираем в низу отступ и добавляем курсор по наведению.
label.tab.active < background: #fff; color: #1b5f75; >label.tab
В конечном итоге визуально оформили вкладки, а в следующем уроке реализуем логику их переключения как на JS так и покажу как это сделать при помощи CSS.
Урок подготовил Горелов Денис.