9 318 Form / Codepen

Textarea auto height

Скрипт для авто подстройки высоты тега формы textarea в зависимости от вводимого внутри текста

Textarea auto height
6 421 Form / Codepen

Форма авторизации в стиле неоморфизм

Верстка формы авторизации и регистрации в стиле неоморфизм. При клике на вторую кнопку происходит плавная slide анимация смены полей формы с авторизации на регистрацию и наоборот.

Форма авторизации в стиле неоморфизм
9 563 Codepen

Форма оплаты кредитной картой

Интерактивная форма оплаты кредитной картой. При заполнении полей, данные сразу отображаются на SVG изображении карты. При заполнении Security Code срабатывает анимация переворачивания карты, где отображается введенный код. К полям прикручен плагин масок, который позволяет быстро их заполнять. Также от номера карты зависит, какой тип карты отобразится - Visa, MasterCard или другая.

Форма оплаты кредитной картой
4 073 Codepen

Форма авторизации и регистрации

Совмещенная форма авторизации и регистрации в одном интерфейсе. Переключение сделано посредством табов с анимацией на CSS. Само переключение табов сделан на JS, также в скрипте добавлена проверка валидации для форм.

Форма авторизации и регистрации
5 047 Скрипты / Form

Superplaceholder — другой взгляд на placeholder

superplaceholder.js - библиотека, которая покажет пользователю дополнительную информацию по заполнению полей форм за счет циклической смены подсказки placeholder в поле. Весит около 2кб. Хорошо работает на последних версиях браузеров. Для не поддерживаемых браузеров будет, так называема, graceful degradation.

Superplaceholder — другой взгляд на placeholder
5 722 Скрипты / Form

Эффекты для текстовых полей

Несколько интересных эффектов для текстовых полей включающих некоторые новые методы реализации и идеи. В основном используются CSS transitions и изредка CSS animations на label тегах или на псевдо-элементах.

Эффекты для текстовых полей
4 139 Скрипты / Form

FancyText - текстовые эффекты для инпутов

  FancyText - jQuery плагин плюс CSS3 анимация. Плагин позволяет из обычного текстового поля (input) получить составной элемент (input + label) с разнообразным количеством эффектов на выбор. Использование плагина очень простое: нужно добавить в HTML документ текстовое поле, добавить пользовательские атрибуты и вызвать функцию FancyText.

FancyText - текстовые эффекты для инпутов