Подсказки заполнения полей

  1. Главная
  2. Блог
  3. Программирование
  4. Подсказки заполнения полей

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

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

<input name="search" id="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" id="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" id="search" maxlength="30"
 alt="Поиск" type="text" size="30" value="Поиск..."
 onblur="$('label[for=search]').hide()"
 onfocus="$('label[for=search]').show()">
<label for="search" style="display: none;">Пример поисковой фразы</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" id="name" alt="Поиск" type="text" placeholder="Гоголь Николай Васильевич" autocomplete="off"
 onblur="$('label[for=name]').hide()"
 onfocus="$('label[for=name]').show()">
 <label for="name" style="display: none;">Ф.И.О (Гоголь Николай Васильевич)</label>
 <input name="phone" id="phone" alt="Поиск" type="text" placeholder="+79265554488" autocomplete="off"
 onblur="$('label[for=phone]').hide()"
 onfocus="$('label[for=phone]').show()">
 <label for="phone" style="display: none;">Телефон (+79265554488)</label>
 <input name="snils" id="snils" alt="Поиск" type="text" placeholder="123-456-789-00" autocomplete="off"
 onblur="$('label[for=snils]').hide()"
 onfocus="$('label[for=snils]').show()">
 <label for="snils" style="display: none;">Снилс (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 получаются растянутыми по вертикали.

Понравилось? Репост!
Сергей
Прикольная тема! Пригодится такая функция на каждом сайте.
Андрей
Первый вариант это ппц полный. На сервере невозможно проверить на пустоту, не когда не используйте его. Или нужно дописывать скрипт который бы при сабмите формы отчищал значение. Используйте 2й вариант.