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

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

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

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

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

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

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

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

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

HTML:


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

form > div {
  position: relative;
}
form > div > label {
  position: absolute;
}

, когда фокус перемещается на поле ввода. Используется тот же принцип, что и в хаке с чекбоксом.
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;
}

, если их значение проходит валидацию. В частности, можно считать валидным поле, в котором есть хоть какой-то текст. Это делается так:
<input type="text" required>

form input:valid {
  background: white;
}

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

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

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

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

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

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

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

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

• Создано 19.12.2012 11:03:07
• Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (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">

<input>

<!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>

<!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>