45+ Really Essential Free HTML [Form] Enhancements

Easy user interaction and data collection is really a key functionality on most websites and web applications.

Providing users high quality and intuitive input forms may be just what is needed to make your users take the time to fill in and submit the information you’re trying to collect. In this article I have collected a number of really essential enhancements to basic html forms.

The article content has been split up into 7 sections to help you find what you need faster. The tools included in this article are all free, good quality, documented and not to hard to set up. Lets get started there’s no time to miss…[exec]$filestr = file_get_contents(‘http://www.tripwiremagazine.com/googleadsensebelowmoretag.inc’);
echo $filestr;[/exec]

Index

• Form Upload Enhancements
• Form Auto Completion Enhancements
• Virtual Keyboard for Form Input Elements
• Form Input Validation
• Custom Form Elements Design
• Form Input Element Date Pickers
• Form Control Libraries

Form Upload Enhancements

FancyUpload – Swiff meets Ajax (v3.0)

This free open source upload form script is really interesting, works very well and looks good.

Swiff meets Ajax for powerful and elegant uploads. FancyUpload is a file-input replacement which features an unobtrusive, multiple-file selection menu and queued upload with an animated progress bar. It is easy to setup, is server independent, completely styleable via CSS and XHTML and uses MooTools to work in all.

Multiple file upload showcase:

Attach file upload showcase (google mail style):

Features

• Select and upload multiple files
• Filter files by type in the select dialog
• A lot of possible Events to add your own behaviour
• Show and filter useful file information before the upload starts
• Limit uploads by file count, type or size
• Platform and server independent, just needs Flash 9+ (> 95% penetration)
• Graceful Degradation, since the element is replaced after the Flash is loaded successfully
• Cancel running uploads, add files during upload
• Everything is optional, documented and easy editable
• New in 2.0
  • Get the server response after upload for showing additional informations or previewing the image, etc.
  • Shows the current upload speed and the time left
  • Send additional request data via GET or POST variables
  • Set the filename for the upload request
• New in 3.0 (Completely rewritten API)
  • Fully Flash 9 and 10 compatible and an additional IFrame-based uploader
  • Browse-button can be an invisible overlay or an interactive image sprite
  • Event based Flash communication, future-proof und more stable
  • File-specific options for setting url, data and method, intelligently merged
  • Append cookies automatically to the request data
  • Relative URLs are converted automatically

Visit the demo seen on image.

FancyUpload is available under the MIT License and can be downloded here.

Form Auto Completion Enhancements

Ajax Auto Suggest v.2

Very flexible and professionally looking auto complete Ajax script.

• Optional JSON Support
• Callback function support (set ID when user selects list item, or anything else…)
• Can display more information
• An optional message when no results are returned
• Completes field when enter key is pressed
• Slick new look (2.0 ready!) including fade effect!

view the demo download AutoSuggest v2.1.3 (make sure to check site for updates!)

JSON showcase:

XML showcase:

AutoCompleter (v1.1)

This AutoCompleter script for MooTools provides the functionality for text suggestion and completion. It features different data-sources (local, JSON or XML), a variety of user interactions, custom formatting, multiple selection, animations and much more.

Local Country showcase:

HTTP Request Showcase:

TextboxList

TextboxList turns normal textboxes into a widget which can be navigated with the keyboard, effectively turning your input into a “list” of items that can be easily deleted. It comes with an Autocomplete plugin.

Click here to see it in action.

TextboxList is essentially very easy to use, but is extremely configurable and extensible. Let’s review some sample usage scenarios:

loadXML($res);new TextboxList('form_tags_input');

This turns the <input id=”form_tags_input”> into a TextboxList widget. By default, as shown in the demo, the user can add new boxes by pressing enter, write between boxes, delete them with backspace and delete keys. Additionally, a delete button is shown in each of the added items. All these behaviors can be configured, as shown in the sections below.

var t = new TextboxList('form_tags_input');
t.add('Tag 1').add('Tag 2').add('Tag 3');

In this example we call the public add() method of the TextboxList instance to add items from JavaScript.

Spellify

AJAX driven web application which uses the Google spell checker to automatically spell check and display spelling suggestions after the user stops typing. It supports several languages and can spell check any pasted or typed text.

Spellify is a script.aculo.us/prototype based spell checker for form fields that utilizes Google as its spell check engine

Requirements
– PHP 4+ with CURL library installed (developed using PHP 4.4.6)
– script.aculo.us 1.8.0 (latest prototype.js, and effects.js required)

download form demo

AJAX – Powered AutoComplete (for Prototype.js)

The AutoComplete class adds a pulldown menu of suggested values to a text field. The user can either click directly on a suggestion to enter it into the field, or navigate the list using the up and down arrow keys, selecting a value using the enter key. The values for the suggestion list are to provided as XML, or as JSON (by a PHP, ASP, ASPX script, or similar). The results of the first request are cached on the client machine and are filtered as the user continues to type, to reduce the number of requests hitting the server.

Auto Complete Control

Form auto-completing feature is seen on many websites like Gmail, Yahoo and more. Auto-completing makes inputting experience easier & faster for the user. On the other hand it is very helpful for the standardization of content, keywords, tags, etc. It may prevent a user wrongly writing Mcrsoft rather than Microsoft for example. Auto Complete Control is a javascript script which offers a simple to use solution. It is not an Ajax, dynamic-keywords script. The keywords which will be shown while filling the form are defined staticly. Auto Complete Control has some nice features like defining “delimiters” which makes it easier to use for “tag inputs”. And it can be styled so easily.

SearchField

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.

Dynamic client lookup

This script uses Ajaxto autofill a form – based on Simple Ajax Code Kit library(SACK). Open the Demo and type in 1001 in the “client ID” text field. AJAX will when you have done this call a script on the server and auto fill the rest of the form with client data.

There are very good instructions on how to get this installed and configured.

Virtual Keyboard for Form Input Elements

Customizable jQuery Virtual Keypad Plugin

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.

Virtual Keyboard with jQuery Tutorial

Tutorial on creating a virtual keyboard with jQuery (script can be downloaded).

Such virtual keyboards are generally used in bank websites or forms that require extra security. They are a step for preventing keyloggers (but may not be an absolute solution as keyloggers are getting smarter).

Virtual keyboard

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.

Form Input Validation

There are several ways available to control and validate input from users in HTML Forms. Generally it is a good idea to do basic validation on the client side as long as this does not introduce any security problems. A good way to control that user input complies with the requirements is to use masks. Masks also visually help users to understand what is needed, why and in what structure. Really good tools for basic validation of input like e-mail adresses, urls is also good to have.

iMask

Who haven’t ever wanted to apply an input mask to an HTML form field? This very common feature in traditional GUI applications is not natively supported by web applications. iMask goal is to implement an easy way for developers to add mask into their form fields, increasing the database and software consistency with standard compliant XHTML and unobtrusive JavaScript.

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.

dFilter

A tiny JavaScript for input masking. This script will easily allow you to add an input mask to a textbox. The mask for a phone number could look like this for example “(###) ###-####”.

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. And who knows, it’ll probably end up doing even more! I’m currently working on the Suggest functionality which is coming along nicely. Typecast requires no JavaScript code in the <body>. Rather it scans the document on load and binds the appropriate Typecast Behaviours to the fields based on the information you specify in the field’s rel attribute.

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).

A mask is defined by a format made up of mask literals and mask definitions. Any character not in the definitions list below is considered a mask literal. Mask literals will be automatically entered for the user as they type and will not be able to be removed by the user. The following mask definitions are predefined:

• a – Represents an alpha character (A-Z,a-z)
• 9 – Represents a numeric character (0-9)
• * – Represents an alphanumeric character (A-Z,a-z,0-9)

JSValidate

Free library for validating forms that requires Prototype & Script.aculo.us to run. List of some of the supported validation rules:

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

LiveValidation

Validating forms as users type is a nice feature for users, it lets them see when they make a mistake.

An ajax live form validation library, LiveValidation is not only a form validation library, it can also be used for other types of validations.

jQuery Password Strength Meter

Password Strength Meter is a jQuery plug-in that provides a smart algorithm that shows the strength of the input.

Phatfusion form validation

Simple and easy to use form validation based on mootools.

Custom Form Elements Design

Custom Form Elements (CFE)

Ever wondered how you could style form elements like checkboxes, radiobuttons and select-fields in a way you like? You tried hard using the most ass-kicking XHTML/CSS tricks, but didn’t succeed without stuffing unnesscesary tags into your sleek sourcecode? Not to speak of the browsers and their “special abilities” in evaluating CSS.

Now this is for you! CFE finally found their way to SourceForge.net and allow you to style your forms individually!

Password Field Image Mask

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

Spinbox.JS

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. All you have to do is to create a normal text input on the page, give it an ID, edit a few arguments, set a skin in the initialization script and hit F5 to view the amazing transformation.

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

Niceforms 2.0

Niceforms is a script that will replace the most commonly used form elements with custom designed ones. You can either use the default theme that is provided or you can even develop your own look with minimal effort. So Niceforms baically is a script to beautify web forms…Try it out yourself!

The script is fully compatible and has been tested with most major browsers, with the exception of IE6.

CRIR

A combination of JavaScript & CSS that enables you to create custom checkbox and radio buttons. Behind the scenes, CRIR does it with a visual trick by hiding the original form elements (but transferring any values to them) and replacing them with images.

FancyForm

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.

Custom Checkbox with jQuery

This script provides you with the ability to customize the design of checkboxes in your web forms. You can use the default skin and the Safari skin which are provided with the package.

Custom HTML Form Elements

Custom HTML Form Elements is a JavaScript solution which enables you to create custom HTML form elements (radio buttons, checkboxes, etc.). In a nutshell, the JavaScript looks for any form element with class="styled" declared; hides the real element; sticks a span tag with a CSS class on it next to the element; and, finally, mouse events are added to the span that handles the stages when it is clicked.

dhtmlxCombo

dhtmlxCombo can be used in four modes: editable select box – the user can either select a value from the list or type a custom value; read-only select box – the user can select just one value from the associated list of choices; filter – the whole list is loaded on the client-side, and as user begins to type, the list is updated with the appropriate values (which contain or begin from the characters typed); autocomplete – the list is loaded and shown as the user types in the input box.

Like other dhtmlx components, dhtmlxCombo provides complete Javascript API to give developers enough possibilities to control its state and behavior.

dhtmlxSlider

A DHTML JavaScript component that allows you to implement vertical or horizontal slider into web pages. This component is highly customizable and really easy to implement. dhtmlxSlider is delivered with a number of predefined skins, but any other custom appearance can be created without any effort. Simple but effective, this JavaScript component is a neat way of creating nice-looking slider bars.

jsProgressBarHandler

Dynamic Unobtrusive Javascript Progress/Percentage Bar. jsProgressBarHandler is a Javascript based Percentage Bar / Progress Bar, inspired upon JS-code by WebAppers and CSS-code by Bare Naked App. Next to a structural rewrite of the WebAppers code, this javascript progress bar can easily be extended and tweaked just by setting a few parameters.

Phatfusion Slider

Good looking and easy to use bar and slider.

An Accessible Slider

Form Control Libraries

Lars

Lars started tripwire magazine back in January 2009. He is really passionate about web design, web development and loves to look into new technologies, techniques, tools etc. and to write articles for his readers.