Пару недель назад, я читал статью Люка Вроблевски. Для тех, кто еще не слышал о нем, Люк — автор книги о правильном дизайне веб-форм.
В его статье, меня особенно заинтересовала часть, о расположении подписей внутри текстовых полей:
Поскольку подписи, расположенные внутри текстовых полей, исчезают при вводе текста, вместе с ними исчезает контекст введенных данных. Так что, если вы вдруг забудете, на какой вопрос вы ввели ответ, значит вам не повезло – подпись к полю вы, скорее всего нигде не найдете. Из этого следует, что подписи, расположенные внутри текстовых полей – не самое лучшее решение для создания длинных форм. Когда вы заполните форму до конца, все подписи пропадут! В этом случае, гораздо сложнее будет вернутся и проверить свои ответы.
Люк Вроблевски
Эти слова стали хорошим поводом для размышления. Конечно, вы можете взглянуть на поле со значением “Вася Пупкин”, и точно сказать что это поле для ввода имени. Но в случае с длинными формами, очень легко забыть вопросы, на которые вы отвечали.
Самым лучшим решением, по мнению Люка, является размещение подписей за пределами текстового поля, с тем, чтобы они всегда были доступны для пользователя. Я думаю это неплохое решение, но мы можем придумать кое-что поинтереснее.
Скользящие подписи
После прочтения этой статьи, мне пришло в голову, что мы вполне можем использовать преимущества каждого из методов. Мне нравится как выглядят подсказки внутри полей, но тем не менее, я согласен с тем, что она всегда должна оставаться на экране. Но, к счастью у нас в распоряжении есть JQuery, мы знакомы с принципом постепенного улучшения, поэтому давайте создадим подписи, расположенные внутри текстовых полей, которые, вместо того, чтобы исчезать, будут сдвигаться влево (или вверх, как вам больше хочется), при клике по текстовому полю.
HTML
<form action="" method="post" id="info">
<h2>Контактная информация</h2>
<div id="name-wrap" class="slider">
<label for="name">
Имя
</label>
<input type="text" id="name" name="name">
</div><!--/#name-wrap-->
<div id="email-wrap" class="slider">
<label for="email">
E–mail
</label>
<input type="text" id="email" name="email">
</div><!--/#email-wrap-->
<div id="street-wrap" class="slider">
<label for="st">
Город
</label>
<input type="text" id="st" name="st">
</div><!--/#street-wrap-->
<div id="city-wrap" class="slider">
<label for="city">
Улица
</label>
<input type="text" id="city" name="city">
</div><!--/#city-wrap-->
<div id="zip-wrap" class="slider">
<label for="zip">
Индекс
</label>
<input type="text" id="zip" name="zip">
</div><!--/#zip-wrap-->
<input type="submit" id="btn" name="btn" value="отправить">
</form>
Единственным необходимым элементом, для создания скользящих подписей (в моей реализации), является оборачивающий элемент (в моем примере DIV), и применение к нему класса “slider” (это легко можно изменить в JavaScript).
На этом этапе, у нас получилась очень простая, и некрасивая форма:
CSS
body {
font: 12px / 1.3 Arial, Sans-serif;
}
form {
width: 360px;
padding: 10px 20px 30px 60px;
margin: auto;
background: #f7f7f7;
border: 1px solid #ddd;
}
div {
clear: both;
position: relative;
margin: 0 0 10px;
}
label {
cursor: pointer;
display: block;
}
input[type =
"text"] {
width: 300px;
border: 1px solid #999;
padding: 5px;
-moz-border-radius: 4px;
}
input[type =
"text"]:focus {
border-color: #777;
}
input[name =
"zip"] {
width: 150px;
}
/* submit button */
input[type =
"submit"] {
cursor: pointer;
border: 1px solid #999;
padding: 5px;
-moz-border-radius: 4px;
background: #eee;
}
input[type =
"submit"]:hover, input[type = "submit"]:focus {
border-color: #333;
background: #ddd;
}
input[type =
"submit"]:active {
margin-top: 1px;
}
Единственный, 100%-необходимый CSS в этом примере – это применение position: relatve, к оборачивающему элементу (DIV). Все остальное используется только для настройки внешнего вида формы, вы можете изменять его по своему вкусу.
Теперь у нас получилась вполне симпатичная форма, в которой подписи расположены сверху непосредственных полей ввода.
jQuery
Теперь, раздел, который все обычно пропускают, переходя к демо-странице:
$('form#info .slider label').each(function(){
var labelColor = '#999';
var restingPosition = '5px';
// стилизация и позиционирование подписей
$(this).css({
'color' : labelColor,
'position' : 'absolute',
'top' : '6px',
'left' : restingPosition,
'display' : 'inline',
'z-index' : '99'
});
// получение введенного в поле, значения
var inputval = $(this).next('input').val();
// получение длины подписи, и добавление к ней 5px
var labelwidth = $(this).width();
var labelmove = labelwidth + 5;
//проверяем, если поле заполнено, то сдвигаем подпись за пределы поля
if(inputval !== ''){
$(this).stop().animate({ 'left':'-'+labelmove }, 1);
}
// если значение поля пустое при фокусе, сдвигаем подпись влево
// если оно осталось пустым, при потере фокуса, возвращаем их обратно
$('input').focus(function(){
var label = $(this).prev('label');
var width = $(label).width();
var adjust = width + 5;
var value = $(this).val();
if(value == ''){
label.stop().animate({ 'left':'-'+adjust }, 'fast');
} else {
label.css({ 'left':'-'+adjust });
}
}).blur(function(){
var label = $(this).prev('label');
var value = $(this).val();
if(value == ''){
label.stop().animate({ 'left':restingPosition }, 'fast');
}
});
})
Вот и все, у вас должна получится полностью работающая форма со скользящими подписями.
Обратите внимание, что форма остается рабочей, даже с отключенным ява-скриптом, это является основным принципом постепенного улучшения. Верите или нет, но все еще остаются люди, не использующие ява-скрипт при просмотре веб-страниц.
Демонстрационная страница.
Архив с примером.
Перевод статьи “Form Design with Sliding Labels”, автор Tim Wright
я бы сказал что выглядит СЕКСИ! :)
супер, нужно будет где-то использовать ;)
зы: напишу наверное jQ.плагин по автоматической переделки формы в такую красоту ;)))
Меня только почему-то смущает cursor:pointer над инпутами.
А, ну да, но это легко убрать.
Наткнулся на эту статью в блоге у Дэвида Волша (David Walsh), где он переделывает всю эту красоту под MooTools. Так вот в комментах у него есть ссылка на немного изменённый вариант. По-моему это ещё более симпатично.
Да, здорово смотрится. Но по сути это тот же эффект, только в пределах инпута. С анимацией можно экспериментировать любыми способами.
Правда, только что заметила, там сама подпись, если ввести текст, при потере фокуса пропадает. Этого как раз не стоило делать.
так я и не спорю ))
я же написал «немного изменённый вариант» )
Не по теме, конечно, но не могли бы Вы писать в начале статьи, что это перевод? А то странновато видеть конструкции вроде «я читал», зная, что автор — девушка.
Интересное и продвинутое решение. Даже в голову такое изящество не приходило.
Скрипт симпатичный но в большинстве форм бесполезный. Сам хотел к себе прикрутить, но как оказалось, ни на блоге оригинала (я там нашёл этот скрипт), ни здесь — нет решения для textarea. Простая замена в скрипте (‘input’) на (‘input,textarea’) не помогает: эффект в textarea появляется, но lable её устанавливается точно повер lable предыдущего input. Вобщем отказался, так как в JavaScript не силён.
почему не работает?
даже тут в примере есть textarea, с работающим эффектом…
Решение для textarea есть. Просто нужно добавить textarea во все селекторы скрипта, можете еще раз взглянуть на демонстрационную страницу, я немного изменила скрипт.
Ой спасибочки! Теперь всё в порядке. :-)
Подписался на ваш RSS, познавательно…
Интересно, а с селектами такое можно провернуть? Скажем первый option в селекте делаем пустым, а его lable пусть ложится поверх. А при разворачивании селекта съезжал бы в сторону с тем же эффектом. если в селекте не было выбрано любое прочее значение кроме первого пустого, то при закрытии селекта lable наежал бы на него обратно. Я совсем не разбираюсь в JavaScrip^ как уже сказал, но что-то мне подсказывает, что реализовать это будет несложно. Во всяком случае, возможно. И вот тогда бе данная форма была бы в законченном варианте и полностью функциональна (потому как для radio и checkbox данного эффекта не нужно). Если бы кто-то проделал данную доработку я бы был очень признателен, а мастеру — респект и уважение на весь интернет. :-)
Отличное решение, как с точки зрения функциональности, так и по юзабилити. Снимаю шляпу :)
Интересно реализовано )
Я так понимаю чтобы эта форма работала нужно ещё php файл вставлять?
Что и где нужно прописать чтобы поля формы отправлялись на почту?
Очень интересный примерчик!
С селектами тоже разобрался. Теперь вполне рабочая форма. Спасибо ещё раз!
Вопрос есть…только сильно не ругайтесь…..я новичок…. а как это все вставить в WP? нужно что-то создать? если да, то что и куда вставить? =)
заранее спасиба =)
бомбавый эффект, а че ты себе в комменты его не поставишь??
Красивый эффект, но давайте представим, что подпись к полю имеет довольно значительную длину. Не типа «имя», «телефон», «майл», а например «марка используемого оборудования».
Нам нужно резервировать место слева от полей ввода, чтобы подпись поля смогла без труда уместиться там, когда на поле будет фокус.
Причем пустое пространство слева должно быть значительной ширины. Если мы сделаем это, загруженная форма будет выглядеть странновато — подписи к полям внутри полей и огромное пустое место слева.
А вообще, скажу вам господа, я в свое время наигрался с этими примочками, еще когда не было фреймворков, и ради них писались яваскрипт скрипты на два экрана, и пришел к выводу, что самое большое наслаждение данные примочки на сайте доставляют его создателю, а посетителю глубоко фиолетово. И если рассматривать сайт, как необходимый элемент в процессе бизнеса любой компании, то эффективность данного инструмета зависит вовсе не ото всех этих наворотов. Конечно круто, кто же спорит. Мне и самому все это нравится…
Попробовал интегрировать в свой сайт — ничего не произошло, все как на картинке до использования jQuery. Использую для сайта WordPress 3.0, в нем используется версия библиотеки 1.4.2, может в этом суть? Если так, то каким образом можно адаптировать?
Дело именно в этом, но как адаптировать я не знаю.
Да, Я тоже натыкался на несовместимость версий jQuery. Попробуйте поместить вызов jQuery другой версии до того, который был изначально. Мне помогало. Сам удивлялся :)
А как бы сделать, чтоб label уезжал вправо к концу инпута, а не влево за его пределы?
Попробуйте поэкспериментировать со скриптом: там есть довольно очевидные части, например:
$(this).stop().animate({ 'left':'-'+labelmove }, 1);Тут и в подобных случаях стоит попробовать заменить ‘left’ на ‘right’ — и, уже имея небольшой опыт издевательства над скриптом (и jQuery в целом), обращаться за помощью сюда или на форумы JavaScript-программистов.