Как создать HTML-форму регистрации с эффектами анимации

Мы создадим форму регистрации с эффектами анимации, используя только HTML и CSS. Ниже продемонстрирован конечный результат.

HTML-разметка формы

Базовая HTML-разметка нашей формы регистрации.

<form>
<label>
<input name="name" id="name" type="text" required />
<div class="label-text">Full Name</div>
</label>
<label>
<input type="email" name="email" id="email" required />
<div class="label-text">Email</div>
</label>
<label>
<input type="tel" name="phone" id="phone" required />
<div class="label-text">Phone Number</div>
</label>
<button type="submit" value="Submit">Submit</button>
</form> 

Теперь переходим к CSS, с помощью которого стилизуем и анимируем форму регистрации.

Стили CSS

Сначала стилизуем текст label.

label {
display: block;
letter-spacing: 4px;
padding-top: 30px;
text-align: center;
} 

Затем создадим первый эффект анимации: изменение размера текста label, а также его непрозрачности при клике по полю формы.

Стили CSS
/* анимация возврата текста label в нормальное состояние, когда пользователь переходит к другому полю формы */
label .label-text {
  color: #9B9B9B;
  cursor: text;
  font-size: 15px;
  line-height: 20px;
  text-transform: uppercase;
  -moz-transform: translateY(-34px);
  -ms-transform: translateY(-34px);
  -webkit-transform: translateY(-34px);
  transform: translateY(-34px);
  transition: all 0.3s;
}
/* анимация смещения и изменения цвета текста label */
label input:focus + .label-text {
  color: #F0F0F0;
  font-size: 13px;
  margin-top: 10px;
  -moz-transform: translateY(-74px);
  -ms-transform: translateY(-74px);
  -webkit-transform: translateY(-74px);
  transform: translateY(-74px);
}

Когда вы кликаете по полю ввода, его ширина также увеличивается.

Стили CSS - 2

Следующий CSS-код анимирует ширину поля ввода, когда оно выделяется фокусом ввода.

/* удаляем стили поля ввода */
label input {
  background-color: transparent;
  border: 0;
  border-bottom: 2px solid #4A4A4A;
  color: white;
  font-size: 20px;
  letter-spacing: 1px;
  outline: 0;
  padding: 5px 20px;
  text-align: center;
  transition: all 0.3s;
  width: 200px;
}/* анимация, когда пользователь кликает по полю ввода */
label input:focus {
  max-width: 100%;
  width: 400px;
}

Обратите внимание, что HTML-разметка формы содержит встроенную валидацию. Создадим анимацию, которая будет появляться, когда обязательное для заполнения поле будет оставлено пустым. Это та же анимация, что и при клике по полю ввода.

/* текст смещается вверх во время валидации */
label input:valid + .label-text {
  font-size: 13px;
  -moz-transform: translateY(-74px);
  -ms-transform: translateY(-74px);
  -webkit-transform: translateY(-74px);
  transform: translateY(-74px);
}

Последнее, над чем нужно поработать, это кнопка.

/* стили кнопки */
button {
  background: transparent;
  color: #F0F0F0;
  border: 2px solid #F0F0F0;
  font-size: 15px;
  letter-spacing: 2px;
  padding: 20px 75px;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-block;
  margin: 15px 30px;
  -webkit-transition: all 0.4s;
 -moz-transition: all 0.4s;
 transition: all 0.4s;
}button:hover, button:focus {
  background-color: white;
  color: #333333;
}

Это все

Мы создали минималистичную HTML-форму регистрации с простыми, но привлекательными эффектами анимации, используя только CSS.

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

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

Вадим Дворниковавтор-переводчик статьи «How to Create an HTML Sign Up Form with Animation Effects»