В этой статье я хочу поделиться с Вами некоторыми приемами усовершенствования HTML форм при помощи JavaScript. В частности, в приведенных здесь примерах используется библиотека jQuery. Речь здесь пойдет о четырех усовершенствованиях – подсказках, автозаполнении, счетчике введенных символов и скрытых полях.
Всплывающие подсказки
Смысл этого трюка заключается в том, что при выделении определенного поля, справа от последнего плавно появится подсказка, которая поясняет, что нужно вводить в данное поле.
HTML код:
<h1>Демонстрация примера подсказок для полей форм.</h1>
<form action="" id="myForm">
<fieldset>
<legend>Установите курсор в одно из полей.</legend>
<label for="username">Логин</label><br/>
<input type="text" name="username" value="" />
<label for="username" class="fieldHint">Введите имя пользователя (не более 20 символов)</label>
<br/>
<label for="password">Пароль</label><br/><input type="password" name="password" value="" />
<label for="password" class="fieldHint">Введите Ваш пароль</label><br/>
</fieldset>
<input type="submit" name="" value="Отправить" />
</form>
JavaScript
$(document).ready(function(){
$('#myForm input').focus(function(){
var name = $(this).attr('name');
$('label.fieldHint[for="'+name+'"]').fadeIn('slow');
}).blur(function(){
var name = $(this).attr('name');
$('label.fieldHint[for="'+name+'"]').fadeOut('slow');
});
});
В начале, мы получаем ссылки на текстовые поля, для которых нужно показывать подсказки. Для этих полей мы устанавливаем обработчики событий onfocus и onblur, которые вызываются при получении и потере полем фокуса. В обработчиках этих двух событий мы получаем ссылки на сами подсказки (подсказки хранятся в элементах label с атрибутом for равным имени поля), и плавно показываем их функцией fadeIn().
Автозаполнение полей.
Автозаполнение – это такая функция, которая предоставляет варианты ответа при вводе пользователем текста в поле. Если пользователь выбирает один из предложенных вариантов, то он автоматически подставляется в текстовое поле.
Для реализации такой функции существует множество плагинов. В целях демонстрации я выбрал один из них – jQuery.autocomplete. Работает он предельно просто – нужно просто подключить скрипт и вызвать функцию autocomplete() для нужного поля, передав в качестве аргумента массив вариантов для заполнения либо URL из которого он будет получен.
HTML
<form action="" id="myForm">
<fieldset>
<legend>Начинайте вводить слова в следующее поле (например, буквы C, П)</legend>
<label for="keyword">Ключевое слово</label><input type="text" name="keyword" value="" />
</fieldset>
<input type="submit" name="" value="Поиск" />
</form>
JavaScript
$(document).ready(function(){
var data = "Селекторы Атрибуты Манипуляция События CSS Эффекты Ajax Утилиты Плагины Поиск DOM Функции Скрипты".split(" ");
$("#myForm input[name='keyword']").autocomplete(data);
});
Счетчик символов в текстовом поле
Некоторые текстовые поля форм имеют ограничение на ввод символов. В этом примере показана функция, которая вычисляет количество символов, которое пользователю еще можно ввести, и показывает это количество возле поля. При приближении этого числа к нулю, оно будет плавно изменять свой цвет на красный.
HTML
<form action="" id="myForm">
<fieldset>
<legend>Начинайте вводить текст в поле "Имя пользователя"</legend>
<label for="username">Имя пользователя</label><br/><input type="text" name="username" value="" />
<label for="username">осталось <span id="username_counter">20</span> символов</label><br/>
<label for="password">Пароль</label><br/><input type="password" name="password" value="" /><br/>
</fieldset>
<input type="submit" name="" value="Отправить" />
</form>
JavaScript
$(document).ready(function(){
// вычисляем первоначальное значение счетчика и его цвет
var value = $('#myForm input[name="username"]').attr('value') || '';
var initLength = Math.max((value ? (20 - value.length) : 20),0);
$('#username_counter').css('color', 'rgb('+(12*value.length)+', 0, 0)');
$('#username_counter').html(initLength.toString());
$('#myForm input[name="username"]').keyup(function(){
var value = $(this).attr('value') || '';
var lengthToGo = Math.max((20 - value.length),0);
$('#username_counter').css('color', 'rgb('+(12*value.length)+', 0, 0)');
$('#username_counter').html(lengthToGo.toString());
});
});
Количество введенных элементов в поле вычисляется при событии onkeyup, значение счетчика устанавливается функцией html(), а цвет функцией css(). Для установки цвета используется формат RGB. В этом примере я использовал коэффициент 12, который умножался на количество введенных символов. Поскольку в примере максимальное количество символов равняется 20, то максимаьный уровень красного цвета счетчика равняется 240. Если вы будете использовать такой счетчик, то значение коэффициента нужно пересчитать, чтобы максимальный уровень красного цвета не превышал 255.
Смотреть демо
Скрытое текстовое поле
Этот пример помогает скрыть поля в форме, и показывать их лишь в том случае, если пользователь выбирает определенную опцию.
HTML
<form action="" id="myForm">
<fieldset>
<legend>Хотите ли Вы получать новости на Email?</legend>
<input type="radio" name="newsletter" id="newsletter-0" value="0" checked /><label for="newsletter">Нет</label><br/>
<input type="radio" name="newsletter" id="newsletter-1" value="1" /><label for="newsletter">Да</label><br/>
<div id="email" style="display:none">
<label for="email">Введите Ваш email:</label><input type="text" name="email" value="" />
</div>
</fieldset>
<input type="submit" name="" value="Ввод" />
</form>
JavaScript
$(document).ready(function(){
$('#newsletter-1').click(function(){
$('#email').fadeIn('slow');
});
$('#newsletter-0').click(function(){
$('#email').fadeOut('slow');
$('input[name="email"]').attr('value','');
});
});
Этот код предельно прост. Здесь используются всего лишь две функции fadeIn() и fadeOut(), которые соответственно показывают и скрывают скрытое поле. При скрытии поля мы также очищаем значение атрибута value, чтобы предотвратить отправку данных на тот случай, если пользователь что-то ввел в поле, а позже передумал и выбрал опцию “Нет”.
