Virtual keyboard interfaces are generally used in websites where the highest level of security is a must like online banking applications.

Virtual keyboards help us to prevent any keylogging activies and/or provide users a special keyboard which they don’t already have (like a keyboard of another language).

This virtual keyboard very easy to use and already supports many languages.

How to use virtual keyboard?

You simply include the keyboard.js file and create a text element with the class = keyboardInput. That’s all.

mooRainbow is an easy to integrate JavaScript color picker built with mootools.

This color picker can be attached to any element in the DOM. A click event would automatically be attached to that element and simply clicking on it you will be able to show or hide mooRainbow.

This mootools powered JavaScript color picker:

• is fully customizable via CSS file.
• keeps clean your DOM and generates valid XHTML and CSS.
• provides you, as return, an object containing RGB, HSB and HEX of choosen color.
• works on Firefox/Safari/Opera/IE.

Input masks are handy for better form handling and creating more user-friendly forms.

Masks for different input types can be created easily with the tools below.

iMask

iMask is an open source (free) javascript tool for creating input and textarea masking. It is built on Mootools, supports keyboard control and dynamic charset definition.

Masked Input Plugin for jQuery

This is a masked input plugin for the jQuery javascript library. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc).

Password Field Image Mask

A nice JavaScript input mask which helps displaying the password field characters as images.

dFilter

A tiny JavaScript for input masking.

JavaScript Mask API

A simple yet nice input mask.

JavaScripTools

JavaScripTools is a set of JavaScript components, functions and classes which also includes a powerful input mask library.

Typecast – The Input Field Library

Typecast is an input field augmentation library. When complete it will add autocomplete, suggest and realtime character masking ability to the standard HTML input field.

SearchField is a lightweight and unobtrusive script that adds styling and static auto-suggest behaviour to your search form fields.

Auto-suggest data comes from a static data source, a JavaScript file, no data connections are necessary, updating the JavaScript with the common phrases is enough.

To use SearchField, all you need is linking to the CSS and JavaScript files, that’s all.

inWriter is a small JavaScript class that makes inline editing of textfields possible with a very simple coding.

How to use?

• Just execute the inwriter_init function, passing the ID off the field you want to edit and the name of the function to call after the editing has been completed.
• The called function receives two parameters:
  1. ID of the tag
  2. new value
• That’s all!

Phatfusion has beautiful Mootools JavaScript framework plugins which you’ll love.

Mootools plugins list:

• image menu – horizontal, accordion menu
• validate – form validation
• lightbox – an inline image popup
• multibox – lightbox that supports images, flash, video, mp3s, html
• slideshow – image transition
• sortable table – sort & filter tables
• slider
• rounded corners – rounded corners with divs
• page loader – loads a div from another page into this page.

Acordion image menu:

Sortable table:

Using Uni-Form, which is a standards-based form template, even web users with only basic knowledge of these technologies can get nice looking, well structured, highly customizable, semantic, accessible and usable forms.

Users can choose between most common form layouts by simply assigning a css class to the fieldset element in order to get a different layout of the form controls your design requires.

Within the Uni-Form community, there are some extensions built too, like a Prototype one.

Dynamic form autocomplete code, named TextboxList, is built on Mootools javascript framework and works just like the Facebook form inputs that are very functional.

TextboxList works by caching all the results from a JSON Request and feeding them to the autocompleter object. When an item is added as a box, it’ removed from the feed array, and when the box is disposed it’s added back, so that it becomes available in the list when the user types.

This dynamic form autocomplete solution has a "without autocomplete" version that can be found here.

Styling checkboxes & radio buttons to give them a look other than standard forms can be a key to impress site visitors.

Using FancyForm, which is a powerful checkbox replacement script used to provide the ultimate flexibility in changing the appearance and function of HTML form elements, gives very nice looking form outputs.

FancyForm is very quick to setup (only two lines of markup needed), extendible and will degrade if viewed from an older browser.

P.S. FancyForm uses the ultra-lightweight Mootools JavaScript framework (Mootools is included with the download).

This Asp.Net Ajax Auto-Complete Control which is created by Matt Berseth works similar to Google Suggest.

After you start typing the keyword, Asp.Net Ajax AutoComplete Control starts to offer you results from the dataset and when the keyword is typed results are filtered according to the keyword.

Code uses AjaxControlToolkit’s AutoComplete extender for suggesting the values.