Создаем простую форму 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 лучше подключать отдельным файлом, но в нашем уроке мы запишем все стили между тегами
.
Вот весь код нашей красивой формы регистрации:
Авторизация на сайте
Забыли пароль? Создание формы регистрации
Создайте простую форму регистрации как на изображении ниже:
- Цвет фона страницы #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.
Урок подготовил Горелов Денис.
Как сделать — Форму регистрации
Узнать, как создать адаптивную форму регистрации с помощью CSS.
Нажмите на кнопку, чтобы открыть форму регистрации:
Форма регистрации
Пожалуйста, заполните эту форму, чтобы создать учетную запись.
Пароль
Повторить пароль Запомнить меня
Создавая учетную запись, вы соглашаетесь с нашим Условия и конфиденциальность.
Регистрация
Создать форму регистрации
Шаг 1) Добавить HTML:
Используйте элемент для обработки входных данных. Вы можете узнать больше об этом в нашем учебнике PHP. Затем добавьте входные данные (с соответствующей меткой) для каждого поля:
Пример
Шаг 2) Добавить CSS:
Пример
/* Поля ввода полной ширины */
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 border: 1px solid #f1f1f1;
margin-bottom: 25px;
>
/* Установите стиль для всех кнопок */
button background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
>
/* Дополнительные стили для кнопки «Отмена» */
.cancelbtn padding: 14px 20px;
background-color: #f44336;
>
/* Поплавок отмена и кнопки регистрации и добавить равную ширину */
.cancelbtn, .signupbtn float: left;
width: 50%;
>
/* Добавить отступы к элементам контейнера */
.container padding: 16px;
>
/* Очистить поплавки */
.clearfix::after content: «»;
clear: both;
display: table;
>
/* Измените стили для кнопки отмены и кнопки регистрации на дополнительных маленьких экранах */
@media screen and (max-width: 300px) .cancelbtn, .signupbtn width: 100%;
>
>
Создать модальную форму регистрации
Шаг 1) Добавить HTML:
Используйте элемент для обработки входных данных. Вы можете узнать больше об этом в нашем учебнике PHP. Затем добавьте входные данные (с соответствующей меткой) для каждого поля:
Пример
times;
Форма регистрации
Пожалуйста, заполните эту форму, чтобы создать учетную запись.
Шаг 2) Добавить CSS:
Пример
*
/* Поля ввода полной ширины */
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;
>
/* Установите стиль для всех кнопок */
button background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
>
/* Дополнительные стили для кнопки «Отмена» */
.cancelbtn padding: 14px 20px;
background-color: #f44336;
>
/* Поплавок очистить и кнопки регистрации и добавить равную ширину */
.cancelbtn, .signupbtn float: left;
width: 50%;
>
/* Добавить отступы к элементам контейнера */
.container padding: 16px;
>
/* Модальный (фон) */
.modal display: none; /* Скрыто по умолчанию */
position: fixed; /* Оставаться на месте */
z-index: 1; /* Сидеть на вершине */
left: 0;
top: 0;
width: 100%; /* Полная ширина */
height: 100%; /* Полный высота */
overflow: auto; /* Включите прокрутку, если это необходимо */
background-color: #474e5d;
padding-top: 50px;
>
/* Модальное Содержание/Бокс */
.modal-content background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% сверху, 15% снизу и по центру */
border: 1px solid #888;
width: 80%; /* Может быть больше или меньше, в зависимости от размера экрана */
>
/* Стиль горизонтальной линейки */
hr border: 1px solid #f1f1f1;
margin-bottom: 25px;
>
/* кнопка закрытия (x) */
.close position: absolute;
right: 35px;
top: 15px;
font-size: 40px;
font-weight: bold;
color: #f1f1f1;
>
.close:hover,
.close:focus color: #f44336;
cursor: pointer;
>
/* Снимите поплавки */
.clearfix::after content: «»;
clear: both;
display: table;
>
/* Измените стили для кнопки отмены и кнопки регистрации на дополнительных маленьких экранах */
@media screen and (max-width: 300px) .cancelbtn, .signupbtn width: 100%;
>
>
Совет: Вы также можете использовать следующий javascript для закрытия модального, щелкнув за пределами модального содержимого (а не только с помощью кнопки «x» или «отмена», чтобы закрыть его):
Пример
// Когда пользователь щелкает в любом месте за пределами модального, закройте его
window.onclick = function(event) if (event.target == modal) modal.style.display = «none»;
>
>
Совет: Зайдите на наш учебник HTML Форма, чтобы узнать больше о формах HTML.
Совет: Зайдите на наш учебник CSS Форма, чтобы узнать больше о том, как стилизовать элементы формы.