For me, standard HTML Select element is pretty much annoying. It's ugly. It can't be styled properly in Internet Explorer. And it can't contain nothing but simple text. That is the reason why I needed to reinvent Drop Down element. This tutorial shows how to do that (easily, believe it or not).

In this example we will use a short list of 8 countries. List is created using Definition List (DL) element. Why this element? It is similar to unordered/ordered list.

View live demo

Download source code

Jquery label input 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.

CSS is needed to position the label nicely over the input or text area element, but since it all depends on how you have styled those elements, only the bare-bones are listed here.

View live demo

Download source code

This element enables you to pick dates with a simple slider bar. By dragging the bar over the time-line, the dates change instantly. Besides this, when the user decides to manually change the dates, the bar is automatically adjusted to the corresponding dates. As you are used to from us, the script is based on Prototype/Scriptaculous.but now combined with the very sexy DateJs library.

I've tested it in Firefox 2.x, and IE6/7, please notify me when your browser isn't supported. You can download the full package, including prototype 1.6 and scriptaculous 1.8, here, it's under the GPL license.

This is a jQuery plugin to allow users to select multiple items from a predefined list, using autocompletion as they type to find each item. You may have seen a similar type of text entry when filling in the recipients field sending messages on facebook.

Vertical list style item selection

Facebook style item selection

Features

• Intuitive UI for selecting multiple items from a large list
• Layout controlled fully in CSS, easily customisable
• Result caching reduces server load
• No images required, just the plugin's .js file and some CSS
• Handles json search data for autocompletion
• Smooth animations when results load
• Select items using the mouse or keyboard

Position Absolute is sharing an easy to use form validation engine built with jQuery.

It offers a flexible way of displaying errors that will possibly match any type of form design. When the script detects an error, it creates a div, positions it at the right-top corner of the input & displays it like a tooltip with the error message inside.

Validation rules are created inside the classes of every input field like:

<input class="validate[required,custom[onlyLetter],length[0,100]]"name="first" type="text" />

Also, you can define custom rules via RegEx & error