Всплывающие метки в формах на чистом CSS
Возможно, вам уже попадался на глаза этот приём. Это поле ввода, которое выглядит так, как будто в нем есть текстовая подсказка (placeholder), но при начале набора текста она не исчезает, а отодвигается в сторону. Мне нравится эта идея. Брэд Фрост написал очень хорошую статью об этом приёме, подробно рассмотрев все «за» и «против».
Большинство примеров использования этой техники полагаются на JavaScript. В один прекрасный день я зашёл на nest.com, увидел там этот приём и задумался: а нельзя ли реализовать то же самое без JavaScript? И вот что из этого вышло.
Вот так выглядит форма на nest.com:
Мой вариант вы можете посмотреть на CodePen. Он, конечно, выглядит не так круто, как у Nest, где текст плавно исчезает, а метка выдвигается снизу. Разумеется, я мог бы сделать так же с помощью JavaScript, как, наверное, и на чистом CSS, но цель статьи — показать принцип, а красоту вы можете навести и самостоятельно.
Есть две причины, по которым имеет смысл использовать эту технику:
- Экономия места. Так как поле ввода и его метка объединены, они занимают меньше места. Когда поле вводя попадает в фокус, для того чтобы по-прежнему видеть и то и другое, вы можете занять часть места внутри поля, или временно расширить пространство для этого конкретного поля ввода за счёт других.
- Всё поле ввода становится одной большой кнопкой. Конечно, обычное поле ввода и так реагирует на щелчок, а если указать для label атрибут for , то и метка становится активной, но есть что-то очень привлекательное в большом прямоугольнике, который приглашает щёлкнуть по нему и начать набирать текст. Это особенно хорошо для мобильных приложений.
Трюк №1 — метка в качестве подсказки
Трюк №2 — состояние псевдокласса :focus и ближайший родственный элемент
Порядок расположения элементов и в коде не имеет большого значения, так как их семантическая связь определяется атрибутом for . Однако, если расположить первым, мы сможем использовать его псевдокласс :focus и комбинированный селектор ближайшего родственного элемента (+), чтобы менять стиль
Вы можете сделать с меткой всё, что придёт вам в голову. Главное, чтобы это выглядело красиво и не мешало набирать текст в поле. В моём примере реализованы два варианта: в одном из них метка уменьшается и съезжает вниз, а в другом — отодвигается вправо.
Трюк №3 — состояние псевдокласса :valid
Если в поле уже введён какой-то текст, и оно теряет фокус, будет очень плохо, если мета вернётся на своё прежнее место и введённый текст будет отображаться поверх неё. К счастью, в CSS есть псевдокласс :valid , который присваивается элементам
А теперь вспомним, что метка видна на странице только потому, что у поля ввода прозрачный фон. Чтобы спрятать её, сделаем его непрозрачным:
Всё что осталось сделать — поработать над деталями дизайна, чтобы стало красиво.
Дополнения
-
Этот приём изначально придумал Мэтт Д. Смит, вот в таком варианте:
Как сделать подсказку в input в html
Однострочное текстовое поле создается с помощью элемента input , когда его атрибут type имеет значение text :
С помощью ряда дополнительных атрибутов можно настроить текстовое поле:
dir : устанавливает направление текста
list : устанавливает список подсказок для ввода в поле
maxlength : максимально допустимое количество символов в текстовом поле
pattern : определяет шаблон, которому должен соответствовать вводимый текст
placeholder : устанавливает текст, который по умолчанию отображается в текстовом поле
readonly : делает текстовом поле доступным только для чтения
required : указывает, что текстовое поле обязательно должно иметь значение
size : устанавливает ширину текстового поля в видимых символах
value : устанавливает значение по умолчанию в текстовом поле
Применим некоторые атрибуты:
В этом примере во втором текстовом поле сразу устанавливаются атрибуты maxlength и size . При этом size — то есть количество символов, которые помещаются в видимое пространство поля больше, чем допустимое количество символов. Однако все равно ввести символов больше, чем maxlength, мы не сможем.
В данном случае также важно различать атрибуты value и placeholder , хотя оба устанавливают видимый текст в поле. Однако placeholder устанавливает своего рода подсказку или приглашение к вводу, поэтому он обычно отмечается серым цветом. В то время как значение value представляет введенный в поле текст по умолчанию:
Атрибуты readonly и disabled делают текстовое поле недоступным, однако сопровождаются разным визуальным эффектом. В случае с disabled текстовое поле затеняется:
Среди атрибутов текстового поля также следует отметить такой атрибут как list . Он содержит ссылку на элемент datalist , который определяет набор значений, появляющихся в виде подсказки при вводе в текстовое поле. Например:
Атрибут list текстового поля указывает на id элемента datalist. Сам элемент datalist с помощью вложенных элементов option определяет элементы списка. И при вводе в текстовое поле этот список отображается в виде подсказки.
Направление текста
Атрибут dir задает направление ввода текста. Он может принимать два значения: ltr (слева направо) и rtl (справа налево):
Поле поиска
Для создания полей поиска предназначен элемент input с атрибутом type=»search» . Формально он представляет собой простое текстовое поле:
Поле ввода пароля
Для ввода пароля используется элемент input с атрибутом type=»password» . Его отличительной чертой является то, что вводимые символы маскируются точками:
Javascript: Подсказки внутри INPUT
К счастью, все современные обозреватели поддерживают атрибут placeholder , позволяющий задать подсказку внутри <input> очень просто и без Javascript:
Пожалуйста, используйте именно этот способ.
Если хочется поддерживать и не очень современные браузеры, например, IE младше девятки, придется подмешивать немного Javascript для совместимости. Если ты используешь jQuery, для него есть отличный плагин jQuery.placeholder. Преимущество такого подхода в том, что, если браузер сам поддерживает свойство placeholder , то никакого яваскрипта ему не понадобится. А еще в том, что плагин этот подхватывает подсказки непосредственно из HTML, и их не нужно объявлять отдельно, как делал это я в своем скрипте.
Именно так и реализованы подсказки в полях формы для добавления комментариев на этом блоге.
Для истории и для людей, желающих сделать подсказки с особым цинизмом, оставляю оригинал статьи. Исходники тоже старые – такие вот скрипты я писал три года назад.
Статья 2008 года
Вывод какого-то текста в <input> , когда он пустой.
Скрипт взят с написанного мной в 2008 году песенного архива lyrified.com.
Постановка задачи: нужно, чтобы в пустом <input> выводился приглушенным цветом какой-то текст, например, подсказка.
HTML-разметка
Javascript
Придется хранить несколько параметров для каждого поля, поэтому создаем глобальный массив.
Чтобы добавить конкретное поле в этот массив, используем функцию:
Обратите внимание, для того, чтобы определить, пустое поле или нет, уже нельзя проверить value==» . Поэтому нужно написать функцию:
Обработчик события onFocus: если поле было пустым (но в нем отображалась подсказка), при получении фокуса его нужно очистить.
Кроме того, выставляется флажок isFocused .
Обработчик события onBlur: если пользователь закончил редактирование поля и оставил его пустым, нужно вернуть подсказку.
Как сделать подсказку в input в html
В рубрике «HTML» Вы найдете бесплатные уроки по работе с этим языком гипертекстовой разметки, который лежит в основе большинства сайтов.
Данная рубрика заменит Вам полноценный «HTML учебник». Здесь Вы сможете найти ответы на большинство вопросов, связанных с HTML и DHTML.
Бесплатные уроки HTML для начинающих
Помимо текстовых уроков, Вы также сможете найти на нашем сайте полезные видео уроки по HTML. Простые и понятные примеры и объяснения помогут Вам в кратчайшие сроки освоить этот базовый язык «сайтостроения».
Лайфхак: наиполезнейшая функция var_export()
При написании или отладки PHP скриптов мы частенько пользуемся функциями var_dump() и print_r() для вывода предварительных данных массив и объектов. В этом посте я бы хотел рассказать вам о функции var_export(), которая может преобразовать массив в формат, пригодный для PHP кода.
17 бесплатных шаблонов админок
Парочка бесплатных шаблонов панелей администрирования.
30 сайтов для скачки бесплатных шаблонов почтовых писем
Создание шаблона для письма не такое уж простое дело. Предлагаем вам подборку из 30 сайтов, где можно бесплатно скачать подобные шаблоны на любой вкус.
Как осуществить задержку при нажатии клавиши с помощью jQuery?
К примеру у вас есть поле поиска, которое обрабатывается при каждом нажатии клавиши клавиатуры. Если кто-то захочет написать слово Windows, AJAX запрос будет отправлен по следующим фрагментам: W, Wi, Win, Wind, Windo, Window, Windows. Проблема?.
15 новых сайтов для скачивания бесплатных фото
Подборка из 15 новых сайтов, где можно скачать бесплатные фотографии для заполнения своих сайтов.
50+ бесплатных Bootstrap 3 шаблонов и элементов UI
Подборка бесплатных UI материалов и Bootstrap 3 шаблонов за уходящий месяц.
Зум слайдер
Сегодняшний черновик — это простой слайдер с возможностью раскрытия подробной информации о каждом элементе.