Красивое оформление полей для ввода с помощью jQuery

В прошлой статье я писал о том, что каждый элемент на сайте хочется сделать особенным, пусть даже самый незначительный. И мы рассматривали как сделать своё собственное оформление для выпадающих списков. А в этом уроке мы рассмотрим как красиво оформить поля для ввода на сайте. Практически на любом сайте есть формы комментирования, регистрации или поиска. Приятно когда они красиво оформлены и вписываются в общий дизайн сайта. В уроке представлены несколько примеров, и вы можете выбрать тот, который вам больше всего понравился.

Рекомендую также обратить внимание на этот вариант:

• Оригинальное оформление текстового поля HTML

Пример и оформление полей для ввода можно увидеть здесь:

Посмотреть примерСкачать

Как использовать?

HTML часть

Первым шагом необходимо подключить библиотеку jQuery(последняя версия находится здесь) и сам плагин jQuery.label_better.js(который можно скачать здесь):

1
2

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery.label_better.js"></script>

jQuery библиотеку можно не скачивать, а подключить как показано выше. Затем мы создаем форму и каждому полю для ввода, к которому хотим применить функции плагина задаем класс label_better:

1

<input type="text" class="label_better" placeholder="Имя" >

jQuery часть

Здесь нам осталось в конце документа разместить следующий код:

1
2
3
4
5
6

$("input.label_better").label_better({
    position: "top",
    animationTime: 500,
    easing: "ease-in-out",
    offset: 20
});

Подробнее о каждом свойстве:

• position — задает то, с какой стороны появится описание поля. Значения, которые может принимать: «top»(сверху), «bottom»(снизу), «left»(слева) и «right»(справа).
• animationTime — длительность по времени, в течение которого появляется описание поля.
• easing — данное свойство задает плавность анимации. Доступные значения — linear, ease, ease-in, ease-out, ease-in-out и cubic-bezier.
• offset — это расстояние в пикселях между появляющимся описанием и полем для ввода.

Настройки плагина в HTML

Помимо того, что можно задавать настройки с помощью функции, также есть возможность указать необходимые значения свойств с помощью атрибутом в HTML документе. В этом вы можете убедиться, посмотрев как реализованы Демо 2, Демо 3, Демо 4 и Демо 5. А атрибуты следующие:

• data-position — тоже самое что свойство position при настройке с помощью функции. Атрибут принимает те же свойства.
• data-new-placeholder — произвольный текст, который появится при активном поле ввода.

Вы можете выбрать любой способ на своё усмотрение.

Вывод

Достаточно интересный эффект, но на мой взгляд лучше когда пользователь сразу видит где необходимо ввести имя или логин, а где пароль.

Успехов!

Источник: http://www.onextrapixel.com/2014/01/07/label-your-input-fields-like-a-boss-with-label_better-js/