Підказка в полі форми

9 червня 2022 р.215

Підказки в полях форми допомагають користувачеві зрозуміти, які дані треба вводити. Для <input> є атрибут placeholder, він виводить у поле текст, який зникає при наборі тексту. За допомогою псевдокласу :focus та псевдоелемента ::placeholder можна змінити вигляд підказки, щоб при отриманні фокусу вона зсувалася вгору і зменшувалася (рис. 1).

Мал. 1. Зміна виду підказки

Стиль підказки встановлюється через селектор ::placeholder — задамо сірий колір тексту за допомогою властивості color та час трансформації через transition.

input::placeholder { transition: 0.5s; /* Час трансформації */
color: #aaa; /* Колір підказки */
}

Вигляд підказки при отриманні полем фокусу встановлюється через селектор :focus::placeholder. У стильових правилах задамо розмір шрифту через властивість font-size і перемістимо підказку через transform з функцією translateY. Негативне значення зрушить підказку вгору.

input:focus::placeholder { font-size: 10px; /* Розмір шрифту */
transform: translateY(-16px); /* Зсуваємо вгору */
}

Інший код потрібен для краси і наведений у прикладі 1.

Приклад 1. Зміна підказки при фокусі<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>:focus</title> <style> form { background: #f5f5f5; /* Колір тла */ width: 300px; /* Ширина форми */ margin: auto; /* Вирівнюємо по центру */ padding: 20px; /* Поля навколо тексту */ } input { width: 100%; /* Ширина поля */ box-sizing: border-box; /* Ширина не враховує padding */ margin: 10px 0; /* Відступи зверху та знизу */ padding: 12px 0; /* Поля навколо тексту */ border: none; /* Забираємо рамку */ border-bottom: 1px solid #ccc; /* Лінія знизу */ background: transparent; /* Прозоре тло */ } input:focus { outline: none; /* Забираємо контур */ border-bottom: 2px solid #1976D2; /* Синя лінія знизу */ } input::placeholder { transition: 0.5s; /* Час трансформації */ color: #aaa; /* Колір підказки */ } input:focus::placeholder { font-size: 10px; /* Розмір шрифту */ transform: translateY(-16px); /* Зсуваємо вгору */ } </style> </head> <body> <form action="/example/handler.php"> <input type="text" name="login" placeholder="Логін"> <input type="password" name="pass" placeholder="Пароль"> </form> </body> </html>

На жаль, цей варіант не є універсальним і не працює бажаним чином у браузерах Internet Explorer та Firefox. Отже, наведемо альтернативне рішення, коли підказка виводиться за допомогою елемента <label>. Кожний рядок укладемо <div> з класом row, а всередину вставимо <input> ; та <label>, зв'язавши їх один з одним через атрибути id та for.

<code data-language="html"><div class="row"> <input type="text" name="login" id="login"> <label for="login">Логін</label>
</div>

Стиль для <input> залишиться тим же, що і в прикладі 1, і додасться тільки стиль для <label>. Щоб текст підказки відображався поверх поля форми, перетворюємо <label> на блоковий елемент і зміщуємо його вгору через властивість transform з функцією translateY. Також важливо задати постійний line-height, оскільки шрифт при фокусі зменшуватиметься, відповідно, зменшуватиметься і міжрядкова відстань, що призведе до «стрибків» тексту. Тут же ставимо час трансформації підказки.

.row label { display: block; /* Блоковий елемент */
color: #aaa; /* Колір підказки */
transform: translateY(-1.5rem); /* Зсуваємо вгору */
line-height: 1rem; /* Міжрядковий інтервал */
transition: 0.5s; /* Час трансформації */
}

Для визначення стилю підказки при отриманні фокусу використовуємо селектор input:focus+label. Але цього недостатньо, адже якщо набрати в полі текст і прибрати фокус, підказка повернеться у своє вихідне положення і відображатиметься поверх введеного тексту. Нам треба зробити так, що якщо поле містить текст, то підказка залишається вгорі. Для цього підключаємо селектор input:valid+label, він ставить стиль <label>, коли в <input> введено коректний текст.

.row input:focus + label, .row input:valid + label { font-size : 10px; /* Розмір шрифту */
transform: translateY(-2.5rem); /* Зсуваємо вгору */
}

Псевдоклас :valid працює для полів форми, коли в них вставлено атрибут required. Так що в коді HTML додаємо цей атрибут до <input>, як показано в прикладі 2.

Приклад 2. Підказка через <label>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:focus</title> <style> form { background: #f5f5f5; /* Колір тла */
width: 300px; /* Ширина форми */
margin: auto; /* Вирівнюємо по центру */
padding: 20px; /* Поля навколо тексту */
} 
.row input { width: 100%; /* Ширина поля */
box-sizing: border-box; /* Ширина не враховує padding */
padding: 0.5rem 0; /* Поля навколо тексту */
border: none; /* Забираємо рамку */
border-bottom: 1px solid #ccc; /* Лінія знизу */
background: transparent; /* Прозоре тло */
} 
.row input:focus { outline: none; /* Забираємо контур */
border-color: #1976D2; /* Синя лінія знизу */
} 
.row label { display: block; /* Блоковий елемент */
color: #aaa; /* Колір підказки */
transform: translateY(-1.5rem); /* Зсуваємо вгору */
line-height: 1rem; /* Міжрядковий інтервал */
transition: 0.5s; /* Час трансформації */
} 
.row input:focus + label, .row input:valid + label { font-size: 10px; /* Розмір шрифту */
transform: translateY(-2.5rem); /* Зсуваємо вгору */
}
</style>
</head>
<body> <form action="/example/handler.php"> <div class="row"> <input type="text" name="login" id="login" required> <label for="login">Логін</label>
</div> <div class="row"> <input type="password" name="pass" id="pass" required> <label for="pass">Пароль</label>
</div>
</form>
</body>
</html>

Див. також