1960

Топ-15 плагинов для расширения веб-форм

Вы можете добавить массу полезных функций на свой сайт с помощью JavaScript.

Но есть так много библиотек и плагинов на выбор, это может быть перетащить, найдя лучшие варианты.

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

Формы JCF

Одним из моих любимых плагинов JS-форм является JCF Forms, созданная командой на PSD2HTML.

Скрытая аббревиатура JCF означает пользовательские формы JavaScript и соответствует ее названию.

Вы можете настроить меню выбора по умолчанию, ползунки диапазона, поля ввода, формы загрузки, почти все, что вам нужно в форме.

Это абсолютно бесплатно и построено на jQuery, поэтому его не нужно настраивать.

Вы также можете найти больше документов и информации об официальном репо GitHub, если хотите узнать больше.

я проверяю

Флажки и переключатели являются основным элементом веб-форм.

Но они также сложны для настройки, а стили по умолчанию выглядят очень мягкими.

К счастью, плагин iCheck очень прост в настройке и настройке без значительных знаний JS.

Это работает на jQuery и поставляется с несколькими предустановленными темами, которые вы можете редактировать с легкостью.

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

Если вы предпочитаете ванильный JS, вам может понравиться Parsley , бесплатная библиотека проверки формы на основе JS.

Это абсолютно бесплатно, и это один из самых полных плагинов, предназначенных для проверки данных.

Петрушка уникальна тем, что она не требует сложных регулярных выражений, чтобы заставить ее работать.

Он поставляется со встроенными валидаторами для всех типов входов, таких как номера телефонов, кредитные карты, адреса и электронные письма.

Проверьте страницу примеров , чтобы увидеть , если Петрушка может быть для вас.

Я не против текста заполнителя, но я очень предпочитаю метод FloatLabel.js над чем-либо еще.

Это создает местозаполнитель для полей по умолчанию, но перемещает текст чуть выше поля после его фокусировки и заполнения.

Таким образом, вы можете легко добавлять информацию в поле и сохранять ярлык формы.

Обратите внимание, что это плагин jQuery, поэтому требуется копия этой библиотеки.

Но настройка довольно проста, и вы можете следовать инструкциям от GitHub, чтобы обеспечить бесперебойную работу.

Сложные формы хорошо сочетаются с подсказками, направляющими пользователя по пути.

Это красота Tooltipster , бесплатный плагин jQuery, который позволяет добавлять всплывающие подсказки в любом месте экрана.

Вы можете определить эти всплывающие подсказки на основе поведения пользователя, такого как наведение, щелчок, фокус или ввод текста в поле.

Вы также можете настроить свои стили и анимации при подключении этих всплывающих подсказок к Ajax-запросам или методам обратного вызова.

<

Если вам не нравится стиль меню выбора HTML по умолчанию, взгляните на Flexselect.

Этот бесплатный плагин jQuery восстанавливает все выбранные меню в раскрывающихся панелях, привязанных к полям ввода.

Они могут лучше сочетаться с типичной компоновкой, и они чувствуют себя более удобными в использовании.

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

<

На некоторых веб-сайтах отображаются индикаторы выполнения в верхней части экрана, чтобы показать завершение формы.

Это более полезно при длительных формах, когда пользователь может захотеть узнать, как скоро они будут выполнены.

С Fort.js вы можете быстро добавить этот эффект на свой сайт всего несколькими строками кода.

Плагин полностью свободен и работает с любым количеством полей ввода.

Также посмотрите демо-версию, чтобы посмотреть, как это будет выглядеть на реальной странице.

Switchery

Классический переключатель в стиле iOS переопределил входные данные.

Эти оригинальные переключатели включения / выключения получили редизайн в iOS 7, который привел к таким библиотекам, как Switchery.

Этот бесплатный плагин с открытым исходным кодом позволяет создавать кнопки включения / выключения в том же стиле, что и входы iOS 7.

Каждый коммутатор работает с флажком, в который пользователь щелкает, чтобы либо проверить (вкл.), Либо снять отметку (выключить) настройку.

Вы можете оживить любую страницу настроек или страницу профиля, заменив простые флажки для этих вкл / выкл.

Магазины электронной торговли должны иметь дело с проверкой кредитной карты и управлением чувствительными входами.

Защита данных - это целая отдельная тема, но этот JQuery CC Validator на сегодняшний день является лучшим плагином для проверки.

Это совершенно бесплатно, и с открытым исходным кодом работает поверх библиотеки jQuery.Это очень просто настроить, и живая демонстрация показывает, сколько вы можете сделать с этим невероятным плагином.

Одной из новых функций в HTML5 является ввод диапазона. Это позволяет пользователю сдвинуть панель ввода и выбрать диапазон числовых данных.

Но стиль по умолчанию довольно простой, поэтому плагины, такие как Rangeslider.js , стали популярными.

Этот бесплатный плагин jQuery работает как полиполк ползунка диапазона HTML5.

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

Вы можете найти множество бесплатных баз Bootstrap для потрясающих веб-шаблонов.

И то же самое касается плагинов, которые добавляют функциональность в библиотеку Bootstrap.

Одним из таких примеров является BS3 Datepicker, созданный для пользовательских веб-форм.

Для выбора даты редко существует одноразовое решение.

Но этот плагин предлагает подлинный интерфейс, который большинство людей поймет, как использовать, даже с первого взгляда.

Кроме того, он полностью разработан вокруг стилей Bootstrap, поэтому он смешивается прямо.

Если вы хотите, чтобы датпикер немного упростил настройку, проверьте Flatpickr .

Этот бесплатный плагин использует чистый JavaScript для создания полного набора даты / времени с множеством дополнительных функций.

Демонстрационная страница является отличным местом , чтобы проверить и посмотреть , что эта вещь может сделать.

Он использует простую анимацию JavaScript вместе с базовым эффектом теневой тени, чтобы вписаться в любой макет.

Любой, кто нуждается в выборе даты / времени с большим количеством места для настройки, получит много из этого плагина.

Обработка загрузок файлов пользователей является, безусловно, самой сложной задачей формы.

Вам нужно создать ввод, который работает на всех устройствах, но также принимает файлы определенных типов и знает, как их обрабатывать на бэкэнд.

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

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

В новейшей версии Ideal Forms 3 вы найдете множество замечательных функций, таких как автоматическая форма проверки и пользовательские формы.

Эти проекты включают флажки, переключатели, поля ввода, пользовательские интерфейсы календаря и даже поддержку плагинов сторонних разработчиков.

Процесс установки очень длинный, но дает вам десятки дополнительных функций формы с одной библиотекой.

Более подробную информацию см. В руководстве по установке GitHub.

Последнее, но, конечно же, не в последнюю очередь это плагин jQuery Autotab от Matthew Miller.

Это позволяет вам определить определенную длину для ввода любой формы, чтобы она автоматически включалась в следующую форму после ее завершения.

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

Просмотрите демо-версию, чтобы увидеть, как это работает, и если это может помочь расширить ваши веб-формы.

0 комментариев

Написать сообщение

Пожалуйста, оцените по 5 бальной шкале