It is possible to create stylish textboxes with auto-complete feature, just like Facebook has, using plugins for jQuery & MooTools.

For jQuery:

Autobox is a jQuery plugin that makes creating textboxes with auto-complete support easier.

Values expected can be mentioned staticly or called dynamically via Ajax requests. Documentation for the plugin can be found here.

For MooTools:

TextboxList, a MooTools plugin, for creating auto-complete enabled Facebook-like inputs has a new version (see WRD post for the old version).

It can be feeded with data from any data-source easily, makes a binary search for a better performance & offers various options for maximum flexibility.

jQuery Keypad is a plugin for creating more secure input entry by providing a keyboard like interface.

The values to be displayed can be easily set which makes it possible to show only numbers, foreign letters, etc.

The keypad can be displayed with various animations like "fade in" or "slide down".

It can display the letters/numbers randomized which is a very effective security solution against key loggers.

Besides these, there are many options provided like:

• isRTL: the text will be displayed from left-to-right or rightto-left
• clearText: for clearing the input field
• keypadClass: the stylesheet for the keybad for a better customization
• & many more..

This is a jQuery plugin for creating a file-upload functionality quickly & easily.

It inserts a Flash browse button (that can be customized) in to the webpage where users can select a single file or multiple files and view the upload progress.

The plugin comes with a PHP file for uploading the files. But that can be converted to any language of your preference.

There are various customization options provided like:

• Paths of the files used & the folder where files will be uploaded
• Enable/disable multiple uploads
• Browse & cancel buttons used
• Extensions & size limit allowed
• Enable/disable auto-upload after selection
• Callback functions at every step

It comes with the FLA file too & a demo can be found here.

MachForm, an easy to use & quality HTML form builder application, is giving away 3 licenses to WebResourcesDepot readers ($39/license).

You can find the details on winning the licenses at the bottom of the post.

What is MachForm?

It is a browser-based, installable HTML form builder that comes with full PHP source code (& uses MySQL for storing data).

Whether you’re a developer & can create your own forms or not, MachForms offers more than a standard form:

Front-end:

• It supports any types of elements:
  • text
  • paragraph
  • multiple choice
  • dropdown
  • address & more..
  • File uploads (users can upload files!)
• Secure: reCaptcha support.
• Form validation (required-duplicates allowed? or not? – with chic tooltips)
• Password protected forms
• Limiting to 1 entry per user
• Easy styling: each form has its own CSS
• Custom redirection after a form is filled

Back-end

• You can create new forms instantly
• Forms can be designed from an Ajaxed admin interface with drag’n drops
• Collected data can be exported to Excel & CVS
• Get notified when a form is filled (multiple e-mails supported)
• 1 click installation & more..

To sum up, MachForm is a complete form creator & manager for a website that can be used by anyone with ease.

There is a demo for the application, give it a try..

How to win the free licenses?

Commenting to this post is enough to join this giveaway.

Winners will be selected randomly via the query below on 20 January 2009 (1 week later).

SELECT * FROM wp_comments WHERE comment_post_id=740 AND comment_approved=1 AND comment_type='' GROUP BY comment_author_email ORDER BY RAND() LIMIT 3

Good luck to all : ).

JSValidate is a free library for validating forms that requires Prototype & Script.aculo.us to run.

Some rules it supports are:

• Required field
• Only numbers
• Only letters
• E-mail
• Credit card number format
• US zip code, phone number & state code formats

It works by simply updating class tags of forms with the related rule information.

It lets you define in which tag & class the errors will be displayed & some more.

There is also a jQuery port on the way, named JValidate, which is not out yet but will be sharing at WRD for sure when it is published.

Niceforms, a script to beautify web forms, was very popular for creating beautiful forms. And now the 2nd version is out.

Niceforms 2.0 is a totally re-written version which is very easy to apply, handles more elements & has more customization options.

How to use it?

The script simply replaces the most commonly used form elements with custom designed ones.

Inserting the niceforms.js & the CSS file is enough to use it.

Besides the default theme, new themes can be developed with CSS editing.

Niceforms works in all modern browsers except IE6 (it gracefully degrades).

jQuery.timepickr.js is a jQuery plugin that makes filling time inputs very easy.

With a maximum of 2 clicks, a user can fill the form & there is also a keyboard navigation support too.

Usage is so simple. Call the timepickr function with the id of the form to be transformed & that’s all.

The plugin is unostrusive & degrades gracefully.

Multi Bit Shift is an open source Flash file uploader.

It can be easily embedded to any webpage for multiple file uploads with the upload status information.

The  text and color schemes of the uploader is customizable via standard CSS & all text can also be changed.

The uploader has 2 different versions where the paid one has an advanced interface with thumbnail, image view & more.

Spinbox.JS is an unobstrusive solution for turning input textboxes into spinboxes.

It is very effortless to implement the code. Simply creating a normal textbox, giving an id to it & editing few arguments is enough.

Spinbox.JS has 10 predefined skins and new ones can be created via CSS in the skin file.

It supports multiple spinboxes on a single page, and  a different skin can be used for each SpinBox on the page.

Farbtastic is a jQuery color picker plugin for easily adding a color picker into any webpage.

The picker is linked to an existing element (e.g. a text field) and updates the value of the element when a color is selected.

Layered transparent PNGs are used for rendering a saturation/luminance gradient inside of a hue circle. It is not Flash or pixel sized divs.