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

В этой статье мы познакомимся с CSS и сделаем симпатичную форму входа на HTML.

Для начала давайте сразу набросаем очень простенькую и НЕ красивую форму :

<html>
 <head>
   <meta charset="UTF-8">
 </head>
<body>
 <form>

  <h1>Вход</h1>

  <div>
    <input>
    <label>Email</label>
  </div>
  <div>
    <input>
    <label>Пароль</label>
  </div>

  <button>Войти</button>

 </form>
<body>
</html>

Да уж, согласитесь убогенько. Что бы сделать все красивей мы воспользуемся CSS(Cascading Style Sheets — каскадные таблицы стилей) — язык описания внешнего вида документа, написанного с использованием языка разметки. Преимущественно используется как средство описания внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML.

Первым делом.

Первым делом мы подключаем внешний файл стилей c помощью тега <link> , атрибут href="style.css" указывает на путь к файлу.

<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>

Теперь давайте создадим файл style.css и напишем первый стиль в нем . Разместим нашу форму по середине экрана в центре.

body {
         display: flex;
         justify-content: center;
         align-items: center;
         height: 100vh;
 }

Тут мы используем Flexbox систему компоновки элементов на веб-странице — display: flex; Выравниваем по осям justify-content: center; align-items: center; Ну и body {} говорит нам что этот стиль применяется ко всему телу тега <body>.

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

.form {
         width: 300px; # Ширина 300 пикселей
         padding: 32px; #  Внутренний отступ 10 пикселей  
         border-radius: 10px; # Закруглённую рамку или скруглить углы элемента. 
         box-shadow: 0 4px 16px #ccc; # Тень элемента. 0 - смещение Х, 4 - смешение Y, 16 - степень размытия, #ccc - цвет.
         font-family: sans-serif; # Шрифт. 
         letter-spacing: 1px; # Расстояние между буквами
 }

Ну и конечно не забудем добавить этот стиль в HTML файл:

<form class="form">

Делай два.

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

.form_title { 
         text-align: center; # Текст по центру
         margin: 0 0 32px 0; #  margin:10px 5px 15px 20px; - верхний отступ 10px - правый отступ 5px - нижний отступ 15px - левый отступ 20px. 
         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 :

 <h1 class="form_title">Вход</h1>
 <button class="form_button">Войти</button>

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

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

.form_grup {
         position: relative; # Положение элемента устанавливается относительно его исходного места. 
         margin-bottom: 32px;# Внешний отступ снизу элемента 

Теперь стиль поля ввода :

.form_input {
         width: 100%;
         padding: 0 0 10px 0;
         border: none; # Без рамки.
         border-bottom: 1px solid #e0e0e0; # Нижняя рамка 1 пиксель, цвет  #e0e0e0 
         background-color: transparent; # Фон будет прозрачным. 
         outline: none;
         transition: 0.3s;
 }

Стиль подсказок :

.form_label {
         position: absolute; # Абсолютное позиционирование.
         top: 0; # Смещение позиционированного элемента относительно верхнего края 
         z-index: -1; #
         color: #9e9e9e; # Цвет текска.
         transition: 0.3s;
 }

CSS свойство z-index определяет порядок расположения позиционированных элементов по оси Z. Это позволяет контролировать наложение перекрывающихся элементов.

 <div class="form_grup">
    <label class="form_label">Email</label>
    <input class="form_input">
  </div>
  <div class="form_grup">
    <label class="form_label">Пароль</label>
    <input class="form_input">
  </div>

Уже намного лучше выглядит ?

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

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

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

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

.form_input:focus {
         border-bottom: 1px solid #1a73a8;
 }

Так же поменяем свойства подсказок, сдвинем их в верх и уменьшим шрифт :

.form_input:focus ~ .form_label {
         top: -18px;
         font-size:12px;
         color: #e0e0e0;
 }

Уже совсем хорошо , но есть один косяк. Когда уходит фокус, подсказка возвращается на место.

Мы исправим это с помощью псевдоэлемент placeholder для стилизации дефолтного текста в элементе input или textarea. Большинство современных браузеров поддерживают это. Первым делом добавим его в HTML :

<input class="form_input" placeholder=" ">

Теперь под правами CSS стиль :

.form_input:focus ~ .form_label,
.form_input:not(:placeholder-shown) ~ .form_label {
         top: -18px;
         font-size:12px;
         color: #e0e0e0;
 }

Надеюсь вам эта статья пригодилась и понравилась . Успехов.