In this post we have a selection of jQuery plugins and tutorials for enhancing and aiding in the development of the dreaded form area. There are the always important validation plugins, plugins that will give the form added functionality (stretching text-areas, auto-tabbing…) and also plugins that will help you to style the form exactly as you need…and more.
In-Field Labels jQuery Plugin
This is a simple plugin that turns properly formatted HTML forms into forms with in-field label support. Labels fade when the field is focussed and disappear when text entry begins. Clearing a field and leaving brings back the label.
Jqtransform – jQuery form plugin
This plugin is a jQuery styling plugin wich allows you to skin form elements and transform the entire look an d feel of the form.
A jQuery Inline Form Validation, because Validation is a Mess
When it comes to form validation, it’s hard to have a versatile solution that works with every form. Figuring out how to display errors is not a simple task. When an error needs to be displayed, the script creates a div and positions it in the top right corner of the input. This way you don’t have to worry about your HTML form structure. The rounded corner and shadow are done with CSS3 and degrade well in non compliant browsers.
ClearField
This plugin takes care of your input fields. Often used by opt-in input fields where the default value of the field is something like "Your e-mail address". If you click the field the text disappears so that you can type your e-mail address.
Justify Elements Using jQuery and CSS – Tutorial
When creating a web form you have to make a functional and visually aligned layout. The simplest way to do this is to place elements in a table or by fixing the width of labels. But what if you don't want to use tables and you want to align input elements according to the width of the longest label? This small jQuery tutorial shows you how.
Autotab: jQuery auto-tabbing and filter plugin
Autotab is a jQuery plugin that provides auto-tabbing and filtering on text fields in a form. Once the maximum number of characters has been reached within a defined text fields, the focus is automatically set to the defined target of the element.
Autocomplete
Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering. By giving an autocompleted field focus or entering something into it, the plugin starts searching for matching entries and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.
jQuery Form Plugin
The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX. The main methods, ajaxForm and ajaxSubmit, gather information from the form element to determine how to manage the submit process. Both of these methods support numerous options which allows you to have full control over how the data is submitted. Submitting a form with AJAX doesn't get any easier than this!
jQuery Shiftcheckbox Plugin
The jQuery Shiftcheckbox Plugin allows you to select a range of consecutive checkboxes with just two clicks. The plugin is inspired by the GMail checkboxes functionality and works exactly the same. Just keep the 'Shift' key pressed and select a starting checkbox and the last checkbox that you want to select.
Sexy Combo jQuery Plugin
Sexy Combo is a jQuery plugin that allows you to turn default browser selectboxes into much more attractive and usable comboboxes. The user can choose whether to select option from the dropdown list or just type it.
jQuery Comment Preview – Tutorial
jQuery Comment Preview plugin not only gives site users the chance to preview a comment they have posted, it also allows them to preview it in real time, and it is simply awesome. There is also a MooTools version of this tutorial.
jQuery "Highlight" Plugin
jQuery "Highlight" plugin increases usability by highlighting elements within a form as you interact with each element. Its primary use is for forms, but it can also be used for tables, lists, or any element you specify. It can also be used to toggle elements on and off, for example, table rows.
Select Multiple Form Fields
Most of the form fields available with HTML are straightforward and easy for people to understand and use. But there is one exception. The select multiple. While useful and necessary, the select multiple form field has always been a usability challenge. The Select Multiple Form Fields plugin offers a really cool solution, click the demo button to see for yourself.
Ajax Upload
AJAX Upload allows you to easily upload multiple files without refreshing the page and use any element to show file selection window. It works in all major browsers and starting from version 2.0 doesn’t require any library to run (although it will use some jQuery functions if it’s already loaded on the page).
Ajax Fancy Captcha
Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from bots and spammers. Captcha’s security level is medium, with the emphasis on nice looking and user friendly qualities while still offering reasonable protection from unwanted “guests”. It has a basic design and its elements are easy to style and customize.
meioMask – a jQuery Mask Form Input Plugin
meioMask jQuery plugin is a simple to use plugin for creating and applying maskstot text input fields.
jQuery Watermarks for Inputfields
Did you ever see some input fields that have a description tag in it and as soon as you click into them, in order to write something, the description disappears? That’s exactly what this jQuery plugin does for you. Even picture watermarks are a piece of cake, in fact everything handled by a string of Text and/or a CSS-class assigned to an input field, is possible.
JavaScript HTML-Form Encryption Plugin – jCryption
jCryption is a JavaScript HTML-Form encryption plugin, which encrypts the POST/GET data submitted by forms. Normally, when you submit a form, data will be sent in plain text if no SSL is used. But SSL is neither supported by every webhost nor it’s easy to install/apply sometimes. So in this situation jCryption plugin helps you to encrypt your data very easily.
Elastic – Make Your Textareas Grow
This Jquery plugin makes your textareas grow and shrink to fit it's content. It was inspired by the auto growing textareas on Facebook. The major difference between Elastic and it's competitors is it's weight.
jQuery plugin: Password Validation
This plugin extends the jQuery validation plugin by providing two components: A function that rates passwords for factors like mixed upper/lower case, mix of characters (digits, special characters), length and similarity to a username (optional) and another function that uses the rating function to display a password strength meter, requiring the field to have a “good” rating. You can also easily customize the appearance of the strength meter and localize the messages and integrate it into existing forms.
0 yorum:
Yorum Gönder