Как сделать подсказку в input в html

Добавил пользователь Дмитрий К.
Обновлено: 05.10.2024

Что такое input (инпут)? Тег input в HTML представляет собой элемент управления формы. Он позволяет пользователю вводить данные и взаимодействовать с сайтом или приложением.

Тег input в HTML — cинтаксис

Записывается как ( без закрывающегося тега ). Тегу присваивается атрибут type для указания типа элемента управления и атрибут name , чтобы процессор формы мог ссылаться на него. Часто используется атрибут value для указания значения по умолчанию для элемента управления.

Базовый пример синтаксиса тега с несколькими атрибутами:

Пример, содержащий три элемента в стандартной форме:

Базовая форма

Ниже приводится форма, которая используется для ввода имени/фамилии пользователя. Используются три тега input type : для имени и фамилии, один для кнопки отправки:

Атрибут form

Мы можем связать тег input с формой с помощью атрибута form .

Если вы используете атрибут form , то должны указать идентификатор формы, с которой необходимо связать элемент.

В следующем примере я разместил элементы, связанные с формой, вне элемента

Радио-кнопки (переключатели)

В этом примере мы создадим радиокнопки. Для этого тега input атрибуту type присваивая значение radio .

Каждый пункт для выбора в группе должен иметь одно и то же значение name . Таким образом они связываются. Через value мы можем задавать различные варианты:

Связанные с формой элементы

Тег input рассматривается как связанный с формой элемент. Так как он может принадлежать определенной форме.

Мой вариант вы можете посмотреть на CodePen. Он, конечно, выглядит не так круто, как у Nest, где текст плавно исчезает, а метка выдвигается снизу. Разумеется, я мог бы сделать так же с помощью JavaScript, как, наверное, и на чистом CSS, но цель статьи — показать принцип, а красоту вы можете навести и самостоятельно.

Есть две причины, по которым имеет смысл использовать эту технику:

Экономия места. Так как поле ввода и его метка объединены, они занимают меньше места. Когда поле вводя попадает в фокус, для того чтобы по-прежнему видеть и то и другое, вы можете занять часть места внутри поля, или временно расширить пространство для этого конкретного поля ввода за счёт других.
Всё поле ввода становится одной большой кнопкой. Конечно, обычное поле ввода и так реагирует на щелчок, а если указать для label атрибут for , то и метка становится активной, но есть что-то очень привлекательное в большом прямоугольнике, который приглашает щёлкнуть по нему и начать набирать текст. Это особенно хорошо для мобильных приложений.

Трюк №1 — метка в качестве подсказки

Трюк №2 - состояние псевдокласса :focus и ближайший родственный элемент

Порядок расположения элементов и в коде не имеет большого значения, так как их семантическая связь определяется атрибутом for . Однако, если расположить первым, мы сможем использовать его псевдокласс :focus и комбинированный селектор ближайшего родственного элемента (+), чтобы менять стиль
Вы можете сделать с меткой всё, что придёт вам в голову. Главное, чтобы это выглядело красиво и не мешало набирать текст в поле. В моём примере реализованы два варианта: в одном из них метка уменьшается и съезжает вниз, а в другом - отодвигается вправо.

Трюк №3 - состояние псевдокласса :valid

Если в поле уже введён какой-то текст, и оно теряет фокус, будет очень плохо, если мета вернётся на своё прежнее место и введённый текст будет отображаться поверх неё. К счастью, в CSS есть псевдокласс :valid , который присваивается элементам
А теперь вспомним, что метка видна на странице только потому, что у поля ввода прозрачный фон. Чтобы спрятать её, сделаем его непрозрачным:

Всё что осталось сделать - поработать над деталями дизайна, чтобы стало красиво.

Дополнения

В сегодняшней статье я расскажу и покажу парочку трюков, которые можно использовать для тега input .
Не терпится узнать, какие это трюки?

- убрать обводку при клике на поле формы;

- добавить обводку при наведении мишкой;

- изменить курсор мышки при наведении на input;

- убрать при клике на input текст подсказки;

- вывести данные из input в div (JavaScript);

- проверка поля input на ввод цифр.

Как убрать обводку при клике на input (поле формы)

Не знаю как вас, но меня дико раздражает, когда кликаешь мышкой по полю формы, и появляется обводка, которая реально портит весь дизайн полей.

Давайте по порядку.
Вставьте для примера вот этот HTML код к себе на страничку:

Можно поменять и цвет обводки:

Как добавить обводку при наведении мышки на input (поле формы)

Как убрать стандартную обводку при клике на поле формы вы уже знаете, а вот как сделать обводку при наведении на нее мышки, это вы сейчас узнаете.

Чтобы форма красиво смотрелась, можно сделать вот так:

Как изменить курсор мышки при наведении на input (поле формы)

Как убрать при клике на input текст подсказки

Чтобы такое сделать, достаточно вставить код событий в поле input :

Как вывести данные из input в div (JavaScript)

Проверка поля input на ввод цифр (JavaScript)

Если хотите запретить ввод поля input буквами, а разрешить только ввод цифрами, то воспользуйтесь вот таким кодом:

Если хотите запретить только ввод цифр, тогда JS код будет вот таким (обратите внимание на строку №4 ):

Стремясь уменьшить форму и сократить визуальный шум, дизайнеры тег заменяют на атрибут placeholder , тем самым увеличивая нагрузку на кратковременную память. Людям с нарушенным зрением подсказку трудно прочитать. Лучше разместить непосредственно над полем ввода. Пустое поле легче распознаётся как элемент, требующий заполнения. [uxdesign.cc]

Стилизация: изменить цвет placeholder CSS

Поменять стиль поля ввода с placeholder CSS

Селектор [placeholder] определяет внешний вид элементов, у которых задан атрибут placeholder .

Псевдокласс :placeholder-shown CSS определяет внешний вид поля, пока видна подсказка из атрибута placeholder .

Подсказка пропадает при получении фокуса другие «> и

В конце длинного обрезанного подсказывающего текста поставить многоточие

Текст в плейсхолдер должен быть коротким, иначе он не имеет смысла, так как его никто не сможет увидеть.

При добавлении полей ввода на страницы сайта для них необходимо указывать вспомогательный текст – подсказки, которые объясняют предназначение полей. Раньше такие подсказки обычно делались просто путем добавления строки текста выше над полем, но можно было встретить самописные решения, которые выполняли роль нового атрибута placeholder.

Как все началось? Часто на практике приходилось для компактности вводить подсказки прямо в полях вводах, а не добавлять лишнюю строку с подсказкой. Но специального атрибута для выполнения этой функции не было – можно было лишь просто добавить текст внутри поля при помощи значения value. Когда пользователь кликнет на поле — при помощи JavaScript происходило удаление текста и если пользователь ничего не оставил в поле, то при удалении фокуса — подсказка возвращалась на свое место опять же при помощи JavaScript. Также необходимо было изменять цвет текста на более светлый при помощи CSS-свойств, чтобы он выглядел как подсказка, а не обычный текст. То есть, данное решение требовало дополнительного написания кода.

На настоящее время поддержка атрибута placeholder есть во всех современных браузерах. Браузеры, не поддерживающие данный атрибут, просто игнорируют его. Существуют специальные разработки – полифилы, которые при помощи JavaScript реализуют работу атрибута placeholder. Поэтому можно просто писать данный атрибут, а в крайних случаях для остальных браузеров использовать полифилы.

Для select нет атрибута placeholder, но можно сделать подсказку внутри поля простым способом – ею будет первый option из этого select. Можно визуально выделить его, например, добавить вначале и в конце дефис.

Остается разобраться с textarea. У тега textarea атрибут placeholder отсутствует, но можно добавить подсказку прямо в поле, просто разместив его между тегами textarea.

Краткий итог, как сделать подсказки для полей ввода HTML:

Мы рассмотрели, каким образом можно сделать подсказки для различных полей ввода HTML, даже если они не поддерживают атрибут placeholder.

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

, иными словами, везде, где вводится текст.

Подсказывающий текст отображается серым цветом, исчезает при получении фокуса и снова появляется, если фокус теряется. Если в поле с подсказкой ввести любой текст, то подсказка больше не появится. Также её не будет при наличии атрибута value с непустым значением.

В примере 1 показано добавление подсказки к полям формы для создания авторизации.

Читайте также: