Делаем красивую форму на HTML и CSS. | LinuxBlog.РФ

Делай два.

Едем дальше. Создадим стиль для кнопочки(Войти) поменяем цвет , шрифт и поправим заголовок(Вход)

.form_title { 
         text-align: center; # Текст по центру
         margin: 0 0 32px 0; # Внешний отступ на всех четырех сторонах элемента. 
         font-weight: normal;# Насыщенность шрифта, убираем жирность.
 }

Кнопочка :

.form_button {
         padding: 10px 20px;
         border: none; # Без границы блока.
         border-radius: 5px; # Радиус закругления
         font-family: sans-serif;
         letter-spacing: 1px;
         font-size: 16xp;
         color :#fff ; # Цвет текста
         background-color: #0071f0; # Цвет фона
         outline: none; #  Внешней границы элемента 
         cursor: pointer; # Тип курсора при наведение
         transition: 0.3s; #  transition позволяет делать плавные переходы между двумя значениями какого-либо CSS свойства
 }

Добавляем стили в HTML :

Добавление шрифтовых иконок

Добавим иконки в виде шрифтов, переходим на сервис
fontawesome.io и скачиваем их к себе на компьютер. Распакуем архив, копируем папку fonts, в которой находятся шрифты, и копируем файл стилей в директории css. Затем подключаем стили к страничке.

Каркас формы в html

Первым создаем каркас формы. Открываем заготовку html и пропишем следующий код между тегами.

Немного анимации, завершаем.

Начнем с кнопки , если она в фокусе или на нее нажимают меняем цвет бэкграунд:

.form_button:focus,
.form_button:hover{
         background-color: rgba(0, 113, 240, 0.7); RGBA Цвет фона и значение прозрачности. 
 }

Когда поле ввода в фокусе , поменяем цвет нижней границы:

Описываем в css элементы формы

Затем оформим данные элементы формы. Создадим дополнительную директорию CSS в которой будем размещать файлы стилей. В ней создаем файл style.css и подключаем его к нашей страничке.

Описываем переключатели

Переключатели сделаем при помощи 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.

Оформляем вкладки

Когда описали стили общей структуры, можно приступать к оформлению отдельно взятых элементов. Первые по ДОМ структуре идут вкладки, и рассмотрим логику, как они будут работать.

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


В принципе тут все довольно просто, это все можно показать при помощи визуального оформления.

Для этого сделаем фон формы прозрачным на 20%, и этот фон будет как бы внешней его частью, а самой форме зададим белый цвет, для этого классу dws-form добавляем соответствующий background, а белого цвета.

.dws-form {
 background: rgba(255, 255, 255, 0.2);
…

.tab-form {
 background: #fff;
}

Затем, нам нужно показать, как будет выгладить активная и неактивная вкладка.

Наипростейший вариант, это для вкладок label задать отдельный класс tab, который по другому можно оформить.


Добавляем его и в CSS сразу опишем его стили.

Поля ввода, подсказки.

Дальше на очереди поля в вода. Если вы обратили внимание каждое поле находиться в своем блоке <div> . Задаем стиль для блоков :

Пояснения к статье:

Здравствуйте, в этой статье мы расскажем вам о том, как создать форму авторизации для входа на сайт. Для этого нам понадобятся просто HTML и CSS, JavaScript будем использовать по минимуму.

Панель авторизации — очень важная часть любого сайта. Она позволяет пользователю зайти в свой личный кабинет на сайте, если такой имеется. На некоторых сайтах авторизация дает дополнительные привилегии для посетителя, взять то же написание комментариев.

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

Итак, мы создадим 2 блока — для авторизации и регистрации. При переключении между блоком форма будет плавно скользить. Ещё одним преимуществом является то, что это добавит интерактивности для вашего сайта.

Форма авторизации: стилизация. css

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

Из свойств мы применим только центрирование(margin 0 auto), изменим позиционирование, размеры и расположение по координатам.

После этого приступаем к стилизации слайдеров. Здесь будут применены стандартные свойства CSS, такие как фон, изменение ширины и высоты, рамки, тени и т.д.

Форма авторизации на сайте - самостоятельно

После стилизации слайдера, нам необходимо провести изменение небольших деталей, а также поработать над дизайном высшего блока.

Ваш CSS код должен выглядеть примерно так:

Форма авторизации на сайте - самостоятельно

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

Форма авторизации на сайте - самостоятельно

Заключение

Форма авторизации на сайте - самостоятельно

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

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

Теги:

Похожее:  android - How do I make a Login with Basic Auth in Kotlin with a GET requet API? - Stack Overflow

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

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