Перейти в телеграм, чтобы получить результаты теста
Плавающие лейблы для форм являются весьма популярным и современным элементом дизайна в веб-разработке. В этой статье мы рассмотрим, как создать сайт с использованием плавающих лейблов в формах.
Что такое плавающие лейблы?
Плавающие лейблы — это метки полей ввода, которые изначально находятся внутри поля ввода, а при фокусе на поле перемещаются над ним. Это позволяет пользователю видеть название поля ввода, даже если он уже начал вводить данные 😊.
Реализация плавающих лейблов
Для реализации плавающих лейблов нам потребуется 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
Теперь добавим стили для плавающих лейблов:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | .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:
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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'); } }); }}); |
Теперь у вас есть сайт с использованием плавающих лейблов для форм! 🎉 Всегда рад помочь новичкам, и не забудьте продолжать изучать веб-разработку!
Добавить комментарий