Текстове поле html - оригінальне оздоблення текстового поля html

На сайті знаходиться сотні статей, в яких описується як надати красиві стилі для тих чи інших елементів сторінки. Ця колекція постійно поповнюється. Адже постійно з`являються нові можливості і місце для експериментів. На цей раз я хочу звернути увагу на текстове поле HTML. Його можна зробити дуже привабливим. Краще самі особисто протестуйте дане поле.

Цей ефект досить цікавий, але на сайті є й інші способи оформлення текстового поля:

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

Як це виглядає дивіться на реальному прикладі:

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

Виглядає дуже цікаво і незвично для текстового поля, правда? Давайте подивимося як же встановити даний ефект на свій сайт.

Як зробити такий ефект для текстового поля HTML?

HTML частина

Підключаємо необхідні стилі (fancyInput.css) І скрипти (jquery і fancyInput.js):

123

lt;link rel="Stylesheet" href="Css / fancyInput.css"gt;lt;script src="Http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"gt; lt;/scriptgt;lt;script src=`Js / fancyInput.js`gt; lt;/scriptgt;

Відео: Курс HTML - Урок 13. Текстові поля форм

Після чого необхідно ОБОВ`ЯЗКОВО помістити тег або всередину тега:

123456

lt;divgt;lt;input type=`Text` placeholder=`Введіть текст...`gt;lt;/divgt;lt;divgt;lt;textarea cols=`1`gt; lt;/textareagt;lt;/divgt;

jQuery частина

Щоб все запрацювало в кінці документа HTML додаємо виклик функції плагіна fancyInput:

Відео: HTML форми - тег input і валідація форм. Частина 1

123

lt;scriptgt; $ ( `div: input`). fancyInput () -lt;/scriptgt;

Відео: GoToWeb - Відеокурс Html і Css, урок 29, Форми html - 1 частина

На цьому установка плагіна fancyInput для оформлення текстових полів HTML закінчена.

висновок

А як Вам ідея використовувати даний ефект на що продає сторінці? Також можна таким чином оформити форму коментування у себе на сайті. Звичайно, установка не з простих та, можливо, відразу у Вас все не запрацює, але ефект варто того, щоб витратити на нього час.

Успіхів!

З повагою, Юрій Німець