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