Как создать сайт с использованием плавающих лейблов для форм

Плавающие лейблы для форм являются весьма популярным и современным элементом дизайна в веб-разработке. В этой статье мы рассмотрим, как создать сайт с использованием плавающих лейблов в формах.

Что такое плавающие лейблы?

Плавающие лейблы — это метки полей ввода, которые изначально находятся внутри поля ввода, а при фокусе на поле перемещаются над ним. Это позволяет пользователю видеть название поля ввода, даже если он уже начал вводить данные 😊.

Реализация плавающих лейблов

Для реализации плавающих лейблов нам потребуется HTML, CSS и немного JavaScript.

HTML

Сначала создадим структуру формы с полями ввода и лейблами:

<form class="floating-labels-form">
  <div class="form-group">
    <input type="text" class="form-control" id="username" required>
    <label for="username">Имя пользователя</label>
  </div>
  <div class="form-group">
    <input type="password" class="form-control" id="password" required>
    <label for="password">Пароль</label>
  </div>
  <button type="submit">Отправить</button>
</form>

CSS

Теперь добавим стили для плавающих лейблов:

.floating-labels-form {
  position: relative;
}

.form-group {
  position: relative;
  margin-bottom: 20px;
}

.form-control {
  font-size: 16px;
  padding: 10px;
  border: 1px solid #ccc;
}

.form-control:focus {
  border-color: #007bff;
}

.form-control:focus + label,
.form-control:not(:placeholder-shown) + label {
  font-size: 12px;
  top: -20px;
  left: 5px;
  color: #007bff;
}

label {
  position: absolute;
  top: 10px;
  left: 10px;
  color: #777;
  transition: all 0.3s;
  pointer-events: none;
}

JavaScript

И наконец, добавим небольшой скрипт на JavaScript для поддержки старых браузеров, которые не поддерживают псевдокласс :placeholder-shown:

document.addEventListener('DOMContentLoaded', function () {
  var formControls = document.querySelectorAll('.form-control');

  for (var i = 0; i < formControls.length; i++) {
    formControls[i].addEventListener('keyup', function () {
      if (this.value) {
        this.classList.add('not-empty');
      } else {
        this.classList.remove('not-empty');
      }
    });
  }
});

Теперь у вас есть сайт с использованием плавающих лейблов для форм! 🎉 Всегда рад помочь новичкам, и не забудьте продолжать изучать веб-разработку!