All posts in Forms

Natural Language Form with Custom Input Elements in CSS3 & JS

Natural Language Form with Custom Input Elements in CSS3 & JS

An experimental form that uses natural language instead of the usual form display. Values are entered using custom input elements.The idea is to turn a classic form into one that uses natural language to obtain information from the user. For that we’ll construct a sentence where some words and parts are select elements and text inputs. We’ll then transform the select elements so that we can customize them.

Natural language forms are quite suitable for some UI cases, not for all, of course. They have a couple of limitations but they can also be more engaging for users if used in the right place and in the right way. Anyway, we wanted to give this concept a try and we’ll show you how we did it.

jQuery-Tristate : Checkbox-plugin

jQuery-Tristate : Checkbox-plugin

A plugin that allows for checkboxes in nested lists to receive indeterminate state.

jQuery UI Bootstrap : Bootstrap-themed kickstart for jQuery UI widgets

jQuery UI Bootstrap : Bootstrap-themed kickstart for jQuery UI widgets

A jQuery UI theme based on Twitter Bootstrap.This project was started to bring the beauty and ease-of-use of Twitter Bootstrap to jQuery UI widgets.In their original forms, jQuery UI and Bootstrap can’t coexist resulting in conflicts with both CSS classes and styles as well as JavaScript when you do try to use them. jQuery UI Bootstrap provides the JavaScript and CSS required to quickly start a project using both jQuery UI and Twitter Bootstrap.

Our solution offers a custom version of Bootstrap compatible with jQuery UI as well as a Bootstrap-themed jQuery UI theme you can use to prototype your projects.

flexibleArea.js : jQuery plugin that dynamically updates Textarea’s Height

flexibleArea.js : jQuery plugin that dynamically updates Textarea's Height

A jQuery plugin that dynamically updates textarea’s height to fit the content.This plugin works for textareas with fixed width as well as for textareas with fluid width. The CSS resize property is set to “none” by this plugin, which means you will not be able to manually resize the textarea.

Mini AJAX File Upload Form with jQuery

Mini AJAX File Upload Form with jQuery

In this tutorial we are going to create an AJAX file upload form, that will let visitors upload files from their browsers with drag/drop or by selecting them individually. For the purpose, we will combine the powerful jQuery File Upload plugin with the neat jQuery Knob to present a slick CSS3/JS driven interface.

Responsive HTML5/jQuery Sign In/Registration Form

Responsive HTML5/jQuery Sign In/Registration Form

Responsive HTML5 Sign In / Registration form, with jQuery effects and CSS3 customization.

Features:

  • it is compatible with all major browsers (IE8, IE9, IE10, Chrome, Mozilla Firefox, Opera, Safari)
  • really easy to use and to integrate into your website
  • cool effects
  • html5 custom validation
  • responsive layout
  • really easy to modify (100% CSS customizable)

Bootstrap Maxlength : jQuery Html5 maximum length field Plugin

Bootstrap Maxlength : jQuery Html5 maximum length field Plugin

This plugin integrates by default with Twitter bootstrap using badges to display the maximum lenght of the field where the user is inserting text. Uses the HTML5 attribute “maxlength” to work.

The indicator badge show up on focusing on the element, and disappear when the focus is lost.

Data Saver : Never Lost your Data with jQuery

Data Saver : Never Lost your Data with jQuery

This plugin saves data from input fields to local storage and can restore data if you reopen “form”.

Features:

  • Listen to events (onKeyPress, OnChange)
  • Plugin can save data in form by URL
  • Open custom dialog forms
  • Add prefix to different forms

Multiselect.js : jQuery plugin to customize your select with multiple attribute

Multiselect.js : jQuery plugin to customize your select with multiple attribute

This plugin is a drop-in replacement for the standard <select> element with multiple attribute activated.

Features:

  • Free (under WTFPL license)
  • Works in an unobtrusive fashion
  • Fully open sourced
  • Keyboard support
  • Provides some callbacks
  • Fully customizable via CSS

Switchy : jQuery beautiful Select box

Switchy : jQuery beautiful Select box

A tiny jQuery plugin that firstly aims to transform a standard <select> in a beautiful switchy element.



Best jQuery websites design awards