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…
- 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
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):
- 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.
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!
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 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:
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
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
- 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)
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.
A lightweight and unobtrusive script that adds styling and static auto-suggest behaviour to your search form fields.
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.
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.
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 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.
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.
<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
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)
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
- Credit card number format
- US zip code, phone number & state code formats
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.
Password Strength Meter is a jQuery plug-in that provides a smart algorithm that shows the strength of the input.
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.
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!
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 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.
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.
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.
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 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.
Good looking and easy to use bar and slider.
- Horizontal or Vertical options
- snap to steps
- apply transitions to the slide
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
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.
<input type="text" ... class="required"/>
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.
- Numerous functions that performs common operations on objects, strings, arrays, form fields, events and more
- A dynamic table, supporting paging, sorting and editing, fully customizable using CSS (Cascading Style Sheets)
- Masks for restricting / formatting user input on form fields