Гарне оформлення полів для введення за допомогою jquery

У минулій статті я писав про те, що кожен елемент на сайті хочеться зробити особливим, нехай навіть самий незначний. І ми розглядали як зробити своє власне оформлення для випадаючих списків. А в цьому уроці ми розглянемо як красиво оформити поля для введення на сайті. Практично на будь-якому сайті є форми коментування, реєстрації або пошуку. Приємно коли вони красиво оформлені і вписуються в загальний дизайн сайту. В уроці представлені кілька прикладів, і ви можете вибрати той, який вам найбільше сподобався.

Рекомендую також звернути увагу на цей варіант:

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

Відео: Розмітка документа в Word: професійне оформлення, навігація, списки і посилання

Приклад і оформлення полів для введення можна побачити тут:

Відео: Створення сайту | Урок # 14 - Перевірка полів JS + Ajax + PHP відправка

Подивитися прімерСкачать

Як використовувати?

HTML частина

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

Відео: Випадашка при введенні тексту в поле Input

12

lt;script type="Text / javascript" src="Http://code.jquery.com/jquery-1.9.1.js"gt; lt;/scriptgt;lt;script type="Text / javascript" src="Js / jquery.label_better.js"gt; lt;/scriptgt;

jQuery бібліотеку можна не викачувати, а підключити як показано вище. Тоді ми творимо форму і кожному полю для введення, до якого хочемо застосувати функції плагіна задаємо клас label_better:

1

lt;input type="Text" class="Label_better" placeholder="Ім`я" gt;

jQuery частина

Тут нам залишилося в кінці документа розмістити такий код:

123456

$("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 - довільний текст, який з`явиться при активному полі введення.

Ви можете вибрати будь спосіб на свій розсуд.

висновок

Досить цікавий ефект, але на мій погляд краще коли користувач відразу бачить де необхідно ввести ім`я або логін, а де пароль.

Успіхів!

джерело: https://onextrapixel.com/2014/01/07/label-your-input-fields-like-a-boss-with-label_better-js/

Відео: jQuery Form Styler або інший погляд на форми в HTML!