45+ Really Essential Free HTML [Form] Enhancements

June 18, 2013 · 30 comments

by Lars

essential-form-tools

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…


ElegantThemes
ThemeForest

Advertisement

Index

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:

slideshow

Attach file upload showcase (google mail style):

slideshow

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:

slideshow

XML showcase:

slideshow

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:

slideshow

HTTP Request Showcase:

slideshow

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.

slideshow

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.

slideshow

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.

slideshow

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.

ajax-powered-autocomplete

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.

Auto-Complete-Control

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.

searchfield

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.

Dynamic client lookup

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.

keypad

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

vkeyboard

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.

Virtual-keyboard

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.

imask

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 “(###) ###-####”.

dfilter

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.

Typecast

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)

masked-input-plugin

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

jsvalidate

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.

livevalidation

jQuery Password Strength Meter

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

livevalidation

Phatfusion form validation

Simple and easy to use form validation based on mootools.

  • optional onFail function.
  • optional onSuccess function which will overide the form submition, this can be used to validate an ajax form.
  • onBlur validating
  • shows errors next to item or in a list.

validate

Validanguage

Validanguage is an inheritance-driven, open source javascript validation library designed to be the most feature-rich, user-friendly validation framework available. It has been verified to work in all major browsers, including Internet Explorer, Firefox, Safari, Opera, Konqueror and Chrome.

validanguage

Ajax form validation

Ajax_form_validation

wforms

wForms is an open-source, unobtrusive javascript library that adds commonly needed behaviors to traditional web forms.

wforms

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!

customformelements

Password Field Image Mask

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

password-mask

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.

Spin_Box_JS

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.

niceforms

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.

crir

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.

fancy-form

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.

jQuery-checkbox

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.

custom-checkboxes-and-radio-buttons

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.

dhtmlxCombo

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.

dhtmlxSlider

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.

jsProgressBarHandler

Phatfusion Slider

Good looking and easy to use bar and slider.

  • Horizontal or Vertical options
  • snap to steps
  • apply transitions to the slide

slider

An Accessible Slider

Slider control that allows users to choose one or a range of values on a continuum. Values on a slider can represent anything from hours on a clock to the volume on a music player to a complex, proprietary data set. In its simplest form, the slider is displayed as an axis of values with a handle to drag and select a value, or two handles for selecting a range.

Because there is currently no slider element in HTML, the slider is made up of non-semantic markup (divs, spans), and requires advanced CSS (positioning, background images) and Javascript to work properly. In the absence of CSS or Javascript, the slider is unusable, and the markup is meaningless to users navigating the page with keystrokes or screen readers.

accessible-slider

jQuery UI Slider from a Select Element

selectToUISlider plugin uses progressive enhancement to scrape the data from a select element (or two for a range) and generate a jQuery UI Slider in its place, acting as a proxy to the select element (regardless of whether it is still visible, or hidden from the user). This means you can use the jQuery Slider plugin alongside other input elements in a form and submit or serialize the form as if the slider is not even there. It also allows the user to interact and make a choice with or without javascript, since the select element can be used if the slider is unavailable.

slideshow

Form field Progress Bar

This script allows you to restrict the number of characters inside a form element (ie: textarea) while displaying a progress bar on the remaining characters beneath it. Very cool

Form field Progress Bar

Form Input Element Date Pickers

jQuery.timepickr.js

jQuery plugin that makes filling time inputs very easy. With a maximum of 2 clicks, a user can fill the form and there is also a keyboard navigation support too.

ui-timepickr

The sliding Date-Picker

Due to the development of Qash.nl, a Dutch personal finance website full of cool javascript features, it’s somewhat quiet around here. But to keep you satisfied, we present the sliding date-picker. This element enables you to pick dates with a simple slider bar. By dragging the bar over the time-line, the dates change instantly.

dateslider

JS Calendar

This is a cross browser Javascript calendar form Date Picker

JS Calendar

Form Control Libraries

wForms: Easy JavaScript Form Controls

For the projects that you don’t already have form controls, wForms is an open source unobtrusive JavaScript form controls library that you’ll find very useful. It includes input validation, tooltips, field synchronization controls and more.

It is pretty easy. After inserting the javaScript library to your pages you can control the field attributes with classes like:
<input type="text" ... class="required"/>

wforms

Uni-form

Uni-Form is an attempt to standardize form markup (xhtml) and css, “modularize” it, so even people with only basic knowledge of these technologies can get nice looking, well structured, highly customizable, semantic, accessible and usable forms.

uni-form

JavaScripTools

JavaScripTools is a set o JavaScript components, functions and classes to make the web developer’s life easier. Most modern browsers, like Firefox, Internet Explorer, Opera and Konqueror are supported.

Features:

  • Numerous functions that performs common operations on objects, strings, arrays, form fields, events and more
  • Parsers / formatters for many data types, including numbers and dates – i18n (internationalization) may be taken to JavaScript level
  • A dynamic table, supporting paging, sorting and editing, fully customizable using CSS (Cascading Style Sheets)
  • Masks for restricting / formatting user input on form fields

javascriptools

{ 11 comments… read them below or add one }

Marc Buurke December 6, 2010 at 2:37 pm

I like the minimalistic ones, too big and bright validation auto help just isn’t for me. And sometimes I feel forms are created with too much validation and tips, I like to think my users do know how to use a form if it is created in a good manner, it should speak for itself.

Reply

Arco Logon January 24, 2010 at 6:10 pm

Nice post! Thanks a lot!

Reply

Martin Ivanov December 20, 2009 at 7:14 am

Here is another one form styling routine: http://acidjs.wemakesites.net/forms-js.html

Reply

tripwiremag December 20, 2009 at 8:25 am

@martin, thanks for sharing the link!

Reply

jshapaka September 15, 2009 at 3:33 pm

Fantastic resource

Reply

Lincoln Plumber August 23, 2009 at 12:29 pm

Very nice collection.

I have been looking for a useful date and time picker for a form that only allows the viewer to pick a date and time from the present onwards. Do you have any suggestions for this?

Again, many thanks for the post.

Reply

Prasanth August 7, 2009 at 4:04 am

Very nice collection!
I was looking for some cool widgets to add to Simfatic Forms and got exactly that.

Thanks!

Reply

Emmanuel Oga May 28, 2009 at 11:33 pm

Also take a look at ui.jquery. Many cool (skinnable! http://jqueryui.com/themeroller/) widgets to choose from

Reply

masoud May 28, 2009 at 9:16 am

nice job.

this can be useful for web developers !

Reply

james May 27, 2009 at 9:58 pm

Lots of cool form widget on crazymenu.com, check out pick a place function, or group order.

Reply

3faycom May 27, 2009 at 9:19 am

very nice collections… thanks

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

{ 19 trackbacks }

Previous post:

Next post:


Web Analytics