Подсказка input – Как сделать подсказки для полей ввода HTML — атрибут placeholder для input, select, textarea

Как сделать подсказки для полей ввода HTML - атрибут placeholder для input, select, textarea

Создано: 28.07.18 Обновлено: 28.07.18 Категория: HTML

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

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

Видя такое положение дел, разработчики HTML начали работу над этим – для тега input type="text" со временем был разработан и добавлен специальный атрибут – placeholder. Он позволяет быстро прописать нужную подсказку для текста, которая будет показана пользователю. Цвет текста в подсказке сразу выделяется серым цветом.

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

<input type="text" placeholder="Введите текст">

Но как быть с другими типами полей input? Например, type="checkbox" и type="radio". Для этих типов полей можно использовать тег label, он задает подсказку для помещаемого в него поля. Например, можно написать так:

<label>
	<span>Отметьте нужное:</span>
	<input type="checkbox">
</label>

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

<select>
	<option value="- Выберите значение -">- Выберите значение -</option>
	<option value="Значение 1"> Значение 1</option>
	<option value=" Значение 2"> Значение 2</option>
	<option value=" Значение 3"> Значение 3</option>
</select>

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

<textarea>Введите текст</textarea>

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

  • для input type="text"
    следует использовать атрибут placeholder;
  • для остальных типов input можно использовать тег label;
  • для select используется подсказка в виде первого option;
  • для textarea подсказка размещается внутри данного тега.

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

Подсказывающий текст | WebReference

В дизайне часто требуется вставить пояснение к текстовому полю, но не всегда для этого имеется место. Решением в таком случае является добавление подсказывающего текста непосредственно внутрь поля, а при получении фокуса или вводе текста подсказка пропадает. Это делается с помощью атрибута placeholder, значением которого служит любой текст. Подсказка делается для полей text, password, search, email, tel, url и <textarea>, иными словами, везде, где вводится текст.

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

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

Пример 1. Подсказывающий текст

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Подсказка</title>
 </head>
 <body>
  <form>
   <p><input name="login" placeholder="Логин"></p>
   <p><input name="pass" type="password" placeholder="Пароль"></p>
   <p><input type="submit" value="Вход"></p>
  </form>
 </body>
</html>

Результат примера показан на рис. 1.

Вид полей с подсказывающим текстом

Рис. 1. Вид полей с подсказывающим текстом

Серый цвет, используемый по умолчанию, выбран удачно, но не всегда вписывается в дизайн страницы, особенно если меняется цвет фона полей формы. Для изменения цвета текста выводимого через атрибут placeholder в Firefox применяется псевдоэлемент ::-moz-placeholder.

::-moz-placeholder { color: red; }

В Safari, Opera и Chrome стиль текста меняется следующим образом.

::-webkit-input-placeholder { color: red; }

В IE используется другой подход.

:-ms-input-placeholder { color: red; }

Соединяя воедино эти стили получим страницу, одинаково работающую во всех современных браузерах (пример 2).

Пример 2. Цвет подсказывающего текста

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Подсказка</title>
  <style>
   input {
    background: #86328c; /* Цвет фона */
    color: #fffac0; /* Цвет текста */
    padding: 5px; /* Поля */
    border: transparent; /* Прячем рамку */
    width: 200px; /* Ширина поля */
   }
   ::-webkit-input-placeholder {
    color: #f9a4bc; /* Chrome, Safari, Opera */
   }
   ::-moz-placeholder {
    color: #f9a4bc; /* Firefox */
   }
   :-ms-input-placeholder { 
    color: #f9a4bc; /* IE */
   }
  </style>
 </head>
 <body>
  <form>
   <p><input name="login" placeholder="Логин"></p>
   <p><input name="pass" type="password" placeholder="Пароль"></p>
   <p><button type="submit">Вход</button>
  </form>
 </body>
</html>

Результат данного примера показан на рис. 2.

Вид полей с подсказывающим текстом

Рис. 2. Изменение цвета подсказывающего текста

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 05.09.2017

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Всплывающие метки в формах на чистом CSS / Habr

Возможно, вам уже попадался на глаза этот приём. Это поле ввода, которое выглядит так, как будто в нем есть текстовая подсказка (placeholder), но при начале набора текста она не исчезает, а отодвигается в сторону. Мне нравится эта идея. Брэд Фрост написал очень хорошую статью об этом приёме, подробно рассмотрев все «за» и «против».

Большинство примеров использования этой техники полагаются на JavaScript. В один прекрасный день я зашёл на nest.com, увидел там этот приём и задумался: а нельзя ли реализовать то же самое без JavaScript? И вот что из этого вышло.

Вот так выглядит форма на nest.com:



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

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

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

Хотя в общем случае постоянно видимые метки лучше, но, при правильной реализации, этот приём иногда может быть уместен. Тем не менее, всегда есть риск напортачить с доступностью, так что будьте осторожны. Ещё один недостаток этого подхода — нельзя поместить в placeholder информацию, которая дополняет метку (например, метка — «номер телефона», a подсказка — "(555) 555-5555").
Трюк №1 — метка в качестве подсказки

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


HTML:
<div> <input name="name" type="text" required> <label for="name">Your Name</label> </div>

CSS:

form > div {
  position: relative;
}
form > div > label {
  position: absolute;
}
Трюк №2 - состояние псевдокласса :focus и ближайший родственный элемент

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

CSS:
input:focus + label { /* делаем что-нибудь с меткой */ }


Вы можете сделать с меткой всё, что придёт вам в голову. Главное, чтобы это выглядело красиво и не мешало набирать текст в поле. В моём примере реализованы два варианта: в одном из них метка уменьшается и съезжает вниз, а в другом - отодвигается вправо.
form.go-bottom label {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  transition: 0.2s;
}
form.go-bottom input:focus + label
  top: 100%;
  margin-top: -16px;
}

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

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

<input type="text" required>


А теперь вспомним, что метка видна на странице только потому, что у поля ввода прозрачный фон. Чтобы спрятать её, сделаем его непрозрачным:
form input:valid {
  background: white;
}

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

Исчезающий текст в input

Вы здесь: Главная - JavaScript - JavaScript Основы - Исчезающий текст в input

Исчезающий текст в input

Не так давно у меня спросили, как сделать исчезающий текст в input. То есть чтобы изначально было некое слово написано в текстовом поле (какая-нибудь подсказка, например), а при клике оно стиралось. При этом ещё чтобы и менялся цвет, то есть был изначально бледно-серный, а текст, который вводит пользователь, становился чёрным. Вот как такое сделать, мы с Вами разберём в этой статье.

В основе лежит достаточно простой JavaScript, который можно уместить прямо в самом теге input:

<input type="text" name="name" value="Ваше имя" onfocus="if (this.value == 'Ваше имя') {this.value = ''; this.style.color = '#000';}" onblur="if (this.value == '') {this.value = 'Ваше имя'; this.style.color = '#777';}" />

Поясняю алгоритм. Вначале у нас в поле серым цветом написано "Ваше имя". При получении фокуса на это поле вызывается обработчик события onfocus, в котором мы проверяем, если значение поля равно "Ваше имя", мы его стираем, плюс устанавливаем чёрный цвет. Если там написано что-то другое (пользователь ранее написал), то ничего не делаем.

При потере фокуса вызывается onblur, в котором мы смотрим значение текстового поля, и если оно пустое, то устанавливаем "Ваше имя" и ставим серый цвет.

Я рекомендую Вам просто скопировать данный код и посмотреть на его работу, чтобы Вы поняли, как он действует, а уже, поняв его работу, разобраться в данном алгоритме не составит никакого труда.

Вот таким нехитрым образом делается исчезающий текст в input.

  • Исчезающий текст в input Создано 19.12.2012 11:03:07
  • Исчезающий текст в input Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href="https://myrusakov.ru" target="_blank"><img src="https://myrusakov.ru/images/button.gif" alt="Как создать свой сайт" /></a>

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:
    <a href="https://myrusakov.ru" target="_blank">Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL="https://myrusakov.ru"]Как создать свой сайт[/URL]

создание подсказок в input поле online-формы

Наверняка все видели поля с подсказками для ввода данных. Такой подход к оформлению полей поможет пользователю узнать что же именно вводить в поле, а вам - получить данные в том формате, который нужен. Есть множество способов реализации таких подсказок. Приведу примеры реализации в хронологическом порядке: 

Первый способ появился очень давно, реализован на JS:

<input name="search" maxlength="30" 
alt="Поиск" type="text" size="30" value="Поиск..." 
onblur="if(this.value=='') this.value='Поиск...';" 
onfocus="if(this.value=='Поиск...') this.value='';">

При фокусировке курсора на поле меняем значение поля на пустую строку, а при потере фокуса, если значение осталось пустым, заполняем поле дефолтным "Поиск...". Из плюсов подхода - практически безотказен, можно кастомизировать, добавлять какие угодно проверки и т.д. Из минусов - не работает при отключенном js, при фокусировке на поле не виден пример вводимой информации. 

Способ второй, пришел со вводом в обиход css3/html5 - свойство placeholder:

<input name="search" maxlength="30" alt="Поиск" type="text" size="30" placeholder="Поиск...">

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

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input name="search" maxlength="30"
 alt="Поиск" type="text" size="30" value="Поиск..."
 onblur="$('label[for=search]').hide()"
 onfocus="$('label[for=search]').show()">
<label for="search">Пример поисковой фразы</label>

Наглядный пример (полный код с css):

<!doctype html>
<html lang="ru">
<head>
 <meta charset="UTF-8">
 <title>Пример номер три</title>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 <style type="text/css">
 html,body{
 margin: 0;
 padding: 0;
 border: 0;
 height: 100%;
 width: 100%;
 font-family: Tahoma, PT Sans, Arial, sans-serif;
 }
 div {
 width: 300px;
 height: 300px;
 position: absolute;
 top: 50%;
 left: 50%;
 margin-left: -150px;
 margin-top: -150px;
 }
 input{
 width: 278px;
 padding: 5px 10px;
 outline: none;
 border: 1px solid #006699;
 margin: 0px;
 font-size: 18px;
 margin-top: 5px;
 }
 label{
 display: inline-block;
 background: #006699;
 width: 294px;
 color: #fefefe;
 font-size: 14px;
 padding: 3px;
 }
 </style>
</head>
<body>
<div>
 <input name="name" alt="Поиск" type="text" placeholder="Гоголь Николай Васильевич" autocomplete="off"
 onblur="$('label[for=name]').hide()"
 onfocus="$('label[for=name]').show()">
 <label for="name">Ф.И.О (Гоголь Николай Васильевич)</label>
 <input name="phone" alt="Поиск" type="text" placeholder="+79265554488" autocomplete="off"
 onblur="$('label[for=phone]').hide()"
 onfocus="$('label[for=phone]').show()">
 <label for="phone">Телефон (+79265554488)</label>
 <input name="snils" alt="Поиск" type="text" placeholder="123-456-789-00" autocomplete="off"
 onblur="$('label[for=snils]').hide()"
 onfocus="$('label[for=snils]').show()">
 <label for="snils">Снилс (123-456-789-00)</label>
</div>
</body>
</html>

Минус такого оформления - скачущие формы ввода, как вариант - использовать для label такие настройки css:

input{
 width: 278px;
 padding: 5px 10px 30px 10px;
 outline: none;
 border: 1px solid #006699;
 margin: 0px;
 font-size: 18px;
 margin-top: 5px;
}
label{
 display: block;
 background: #006699;
 width: 294px;
 height: 23px;
 color: #fefefe;
 font-size: 14px;
 padding: 3px;
 margin-top: -29px;
 position: relative;
 line-height: 23px;
}

А так же изменить поведение функции onfocus:

onfocus="$('label[for=phone]').css({'display':'block'})"
//Для остальных полей соответственно проставить for

В таком случае поля не прыгают, но поля input получаются растянутыми по вертикали.

Хочешь стать экспертом в SEO?

Пройди курсы от SEO Интеллект

Подробнее

Понравилось? Репост!

Текстовое поле | Учебные курсы

Однострочное текстовое поле предназначено для ввода строки символов с помощью клавиатуры. Синтаксис создания такого поля следующий.

<input type="text">

Значение атрибута type для <input> по умолчанию определено как text, поэтому его можно не указывать явно. Таким образом, текстовое поле задаётся просто как <input>.

<input>

Если вы создаёте реальную форму, то, конечно же, к полю следует добавить атрибуты. Допустимые атрибуты текстового поля перечислены в табл. 1.

Табл. 1. Атрибуты однострочного текстового поля
АтрибутОписание
nameИмя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
disabledБлокирует поле для ввода текста и не отправляет данные на сервер.
formИдентификатор формы для связывания текстового поля с элементом <form>.
typeДля текстового поля мы указываем значение text или вообще не пишем этот атрибут.
maxlengthУстанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным. Если данный атрибут опустить, то можно вводить строку длинее самого поля.
readonlyБлокирует поле для ввода текста.
sizeШирина текстового поля, которая определяется числом символов моноширинного шрифта. Обычно не указывают, потому что через стили задать желаемые размеры проще и точнее.
valueНачальный текст, отображаемый в поле.
autocompleteВведённый ранее текст запоминается браузером и подставляется при следующем вводе.
autofocusПоле получает фокус после загрузки документа.
listЗначение атрибута id элемента <datalist>, для связи с этим элементом.
patternШаблон ввода текста.
requiredУказывает, что поле является обязательным для заполнения.
placeholderДобавляет подсказку, которая исчезает при вводе текста.
dirnameИмя переменной, которая отправляется на сервер и автоматически получает значение ltr (для текста слева направо) или rtl (для текста справа налево).

Большинство атрибутов являются типовыми и применяются к другим элементам формы. Некоторые атрибуты мы подробнее рассмотрим в следующих уроках.

Создание текстового поля показано в примере 1.

Пример 1. Текстовое поле

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Текстовое поле</title>
 </head>
 <body>
  <form>
   <p><strong>Как вас зовут?</strong></p>
   <p><input name="name" maxlength="25" size="40" value="Вася"></p>
  </form>
 </body>
</html>

В результате получим следующее (рис. 1).

Вид текстового поля в браузере

Рис. 1. Вид текстового поля в браузере

Для элемента <input> есть простые правила, которые следует соблюдать:

  • <input> нельзя вкладывать внутрь ссылки <a>;
  • <input> нельзя вкладывать внутрь кнопки <button>;
  • атрибут list должен ссылаться на элемент <datalist>.

Элемент <datalist> позволяет создать список подсказок, который появляется при наборе текста. Подобное можно наблюдать в поисковой системе Яндекс или Гугл, когда вы вводите поисковый запрос.

<datalist> пишется обычно за пределами формы, каждый пункт при этом создаётся элементом <option>, а затем полученный список связывается с текстовым полем с помощью атрибута list, значением которого выступает значение id у <datalist> (пример 2).

Пример 2. Подсказки для текстового поля

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Подсказки</title>
 </head>
 <body>
  <form>
   <p><strong>Введите ваш город</strong></p>
   <p><input name="city" list="city"></p>
  </form> 
  <datalist>
   <option>Волгоград</option>
   <option>Воронеж</option>
   <option>Екатеринбург</option>
   <option>Казань</option>
   <option>Красноярск</option>
   <option>Москва</option>
   <option>Нижний Новгород</option>
   <option>Новосибирск</option>
   <option>Омск</option>
   <option>Пермь</option>
   <option>Ростов-на-Дону</option>
   <option>Самара</option>
   <option>Санкт-Петербург</option>
   <option>Уфа</option>
   <option>Челябинск</option>
  </datalist>
 </body>
</html>

Результат данного примера показан на рис. 2.

Вид текстового поля с подсказками

Рис. 2. Вид текстового поля с подсказками

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

Перейти к заданиям

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *