Как сделать форму регистрации в html css
Перейти к содержимому

Как сделать форму регистрации в html css

  • автор:

Форма регистрации

Сниппет формы регистрации аккаунта на сайте при помощи 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

Создание формы регистрации

Создайте простую форму регистрации как на изображении ниже:

  • Цвет фона страницы #f8f8f8;
  • Размер формы 320px, внутренний отступ 15px, фон #fff;
  • Цвет границ input #ccc;
  • Цвет фона кнопки #1cbc11;
  • Цвет фона кнопки при наведении #14a20a;

Результат

Если хотите поделиться своим решением, используйте сайты типа codepen.io и оставляйте ссылку в комментарии

Обсуждение ( 7 )

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии

Создаем простую форму html

В этом уроке рассмотрим создание красивой формы регистрации html + css. Вот что должно у нас получиться:

Фомы нужны для получения различных данных от пользователя. Для создания форм в html есть тег .

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

action — адрес страницы которая будет обрабатывать данные.

method — метод протокола http, может быть GET или POST

GET- данные будут передаваться в адресной строке, например в форме будут введены имя ivan и пароль qwerty, в адресной строке мы увидим примерно следующее:

POST- посылает на сервер данные в запросе браузера. Этот метод используется, если нам не нужно, чтобы в адресной строке были видны введенные данные. Например нам не нужно чтобы было видно введенный пароль. В адресной строке мы получим http://site.ru/form.php

name — имя формы, нужно для обработки данных.

Приступим к созданию простой формы регистрации html. Дадим имя нашей форме regisrration, страница обработки наших данных будет form.php, метод передачи данных будем использовать POST.

За создание полей формы в html отвечает тег

Для создания формы регистрации нам понадобится три типа инпутов:

type=”text – текстовое поле

type=”password – поле пароля

type=”submit” – кнопка отправки формы

Также нам пригодятся следующие атрибуты

name — имя для обработки данных;

value — значение элемента;

required – указание, что поле обязательно для заполнения

Вот такой код html у нас получиться:

Пока наша html форма регистрации выглядит не очень красиво.

Теперь добавим немного стилей css к нашей html форме.

Запихнем нашу форму в блок div и добавим заголовок и ссылку для восстановления пароля. И добавим классы css для наших элементов.

Стили css лучше подключать отдельным файлом, но в нашем уроке мы запишем все стили между тегами

.

Вот весь код нашей красивой формы регистрации:

      

Авторизация на сайте

Забыли пароль?

ФОРМА авторизации и регистрации

Тройная АНИМАЦИЯ на CSS | transform - transition

За несколько уроков создадим форму авторизации и регистрации с переключателями в виде табов и различными эффектами. В данных уроках разберем рад фишки как на 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) внутри ссылки.

Если возникли сложности с отображением иконок, либо они не появились на странице или отобразились в виде пустых квадратов! Вероятней всего, вы не правильно их подключили к странице, либо не полностью прописали класс, просто проверьте повторно себя и все должно заработать.

Более подробно как вставлять иконки, описано в этой же статье. Если по ней пробежитесь, проблем с отображением иконок у вас не составит. К тому же, вы узнаете, как делать анимированные иконки, как их трансформировать, накладывать друг на друга, увеличивать, в общем, все об этом можете почитать в ней.

Далее, ниже блока с иконками, размещаем ссылку на восстановление пароля.

 
Войти Я забыл свой E-mail или пароль

Разметка первой формы авторизации

На этом, первый блок разметки мы заканчиваем и приступаем к разметки второго блока для Регистрации.

Описываем структуры для Регистрации

Так как второй блок особо не чем не отличается, я скопирую предыдущую форму и немного ее модифицирую.

Первое поле так и остается для ввода Email, хотя можно дописать в нем placeholder «Введите E-mail адрес», что бы чем-то оно отличалось.

Далее пойдет аналогичное поле для ввода имени только с другим атрибутом type и placeholder . Ниже ссылка, меняем в ней название на «Регистрация».

Затем, социальный блок и ссылку мы убираем, а в место них создаем отдельный блок с классом recover под чекбокс и ссылкой для пользовательского соглашения.

В нем располагаем input с type checkbox , а ниже его label с ссылкой на соглашение.

 
Регистрация

Html Разметка двух форм

Вот мы с вами описали первичную структуру текущих форм, и вероятней всего к ней еще вернемся, а сейчас переходим в файл стилей и приступим к их оформлению.

Оформляем блоки с формами в 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.

Урок подготовил Горелов Денис.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *