In order to create forms (contact, send your friends, sharing, ...) on the websites, the web designers have to spend a lot of time and some skills; because these HTML forms should have a user-friendly, eye-catching layout and they must have a harmonious interface to the overall of website. However, with over 50 resources and tutorials introduced in this free JavaScript article, you are able to create your own HTML forms for the shortest time easily.

• Demo
• Enlarge
• Reload
• New window

Form field hints with CSS and JavaScript

It's a basic example of how helpful a little JavaScript and CSS can be in a form. Instead of the input hints always showing and potentionally cluttering a very simple form, only the hint for the currently focused input will show. This JavaScript tutorial will show a way to do this.

Improve form usability with auto messages

Animated auto messages are useful to improve FORM usability and Scriptaculous is a great framework to use in this case.

Nice & Clean Sliding Login Panel built with jQuery

“Select” Something New

With a little DOM scripting and some creative CSS, you too can make your <select>s beautiful... and you won't have to sacrifice accessibility, usability or graceful degradation.

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.

CSS-Only, Table-less Forms

Modern and comprehensive web form example. It works in Win/IE6, Firefox v1.0+, Win/Opera v8.0, has minor layout differences in Mac/Safari v1.0.3 and Mac/Safari v1.2, and is usable but fairly buggered in Mac/IE5.2.

FancyForm

FancyForm is a powerful checkbox replacement script used to provide the ultimate flexibility in changing the appearance and function of HTML form elements. It's accessible, easy to use and degrades gracefully on all older, non-supporting browsers.

Showing Good Form

The function of the interface is to input information, so semantically this is a form, so way of building it will be using form elements: fieldset, legend, label and input.

jQuery checkbox

Lightweight custom styled checkbox implementation for jQuery 1.2.x and 1.3.x.

AutoSuggest: An AJAX auto-complete text field

The AutoSuggest class adds a popdown 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 tab key. The values for the suggestion list are to provided as XML (by a PHP script, or similar).

Other JavaScript to use faster: JavaScript Auto-Complete Function on key press and JavaScript Simple Auto-Complete.

• Code
• Print

• Comment (1)
• Write

• Sent (0)
• New