28+ Useful Ajax CSS Forms You Shlould Know

imgname--how_reducing_ajax_coding_can_lead_to_better_results---50226711--ajax-visual-cuesIn previous article we have introduced a big collection about javascript 6 Ajax library/framework(see The Most Complete AJAX Framework and JavaScript Libraries List(124+) ). They can help us to quickly develop web pages, but we don’t always need a whole ajax library or framework — mostly we only need a part of them. For example, only a form, input text, button etc. Form is usually used in web applcations. Now we have collected 28+ useful ajax css-based forms. Hope it can save your time.

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

Tested on Safari 2.0.4, Firefox 2 Mac & PC, IE 6, IE 7

AutoSuggest-AJAX-auto-complete-text-field

 

2) A form with style


Discuss how to style and stop web forms. You can click on the text to activate the adjacent inputs, checkboxes and radios. Forms are not very friendly when it comes to CSS and each browser has its own way of handling them. Styles that work in one browser will not work in another, so depending on which browser you are using you will see a slightly different interpretation.

A-form-with-style

 

3) Ajax form validation


   Let you know how to use AJAX in order to process and validate your forms.

Ajax-form-validation

 

4) AJAX Contact Form


Excellent example of accessible AJAX. The author put together a page of what is inside the zip file as a try-out demo just to show that it does in fact work right out of the box.

AJAX-Contact-Form

 

5) Anchor Layout with Forms


Anchor-Layout-with-Forms

 

6) A CSS-based Form Template


  A-CSS-based-Form-Template

 

7) CSS-Only, Table-less Forms


A great example of a well designed form using modern css techniques. 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. It is simply unable or unwilling to pass focus to selects, radio buttons, checkboxes, file inputs, or buttons when the user tabs from an input or textarea.

CSS-Only-Table-less-Forms

 

8) Check it, don’t select it


An attempt to use multiple checkboxes in a scrollable list – better than using ctrl-click in a normal multi-select listbox.  This basic example is described in the Check it, don’t select it article on C82. View some nicer-looking samples of what’s possible with this method.

Check-it-don-select-it

 

9) Cforms


cforms is a powerful and feature rich form plugin for WordPress, offering convenient deployment of multiple Ajax driven contact forms throughout your blog or even on the same page.

Cforms

 

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

FancyForm

 

 

11) FancyUpload using Mootools


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.

FancyUpload-using-Mootools 

 

12) fValidator


fValidator is an open source (free) unobtrusive javascript tool for easy handling form validation. Nowadays everybody knows that javascript can be used to validate input data in HTML forms before sending off the content to a server. Despite of that, when there are many fields in the form, the JavaScript validation becomes too complex and boring to code.

fValidator

 

13) jQuery Form Plugin


The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX. The main methods, ajaxForm and ajaxSubmit, gather information from the form element to determine how to manage the submit process. Both of these methods support numerous options which allows you to have full control over how the data is submitted. Submitting a form with AJAX doesn’t get any easier than this!

jQuery-Form-Plugin

 

14) JotForm – a web based WYSIWYG form builder


JotForm is a completely web based form builder. It is developed for webmasters with minimum design experience. JotForm has an intuitive drag&drop and instant edit form editor. You can create web forms, collect submissions and payments from your web site visitors.

JotForm-a-web-based-WYSIWYG-form-builder

 

15) Live Validation


LiveValidation is a small open source javascript library for making client-side validation quick, easy, and powerful. It comprises of two main parts. Firstly, it provides developers with a rich set of core validation methods, which can also be used outside the context of forms. Secondly, it provides your visitors with real-time validation information as they fill out forms, helping them to get it right first time, making the forms easier, quicker and less daunting to complete.

Live-Validation

 

16) Masked Input Plugin


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). It has been tested on Internet Explorer 6/7, Firefox 1.5/2/3, Safari, Opera, and Chrome.

Masked-Input-Plugin

 

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

The form fields and the buttons created are fully scalable. You can specify their width (and height for textareas) through regular HTML properties such as size, cols and rows. Buttons will automatically expand to accommodate the amount of text present. Keyboard-only navigation is also supported.

Niceforms

 

18) Prettier Accessible Forms


Prettier Accessible Forms is a form-styling solution that is both accessible and portable (in the sense that we can move the code from one project to the next), anyone could easily reuse on any project: a style sheet that, when applied to a correctly marked up HTML form, would produce the basis of the required layout. So here it is—my attempt at portable, accessible forms.

This form technique has been tested with Safari 2.0.3, Firefox 1.5, Opera 8.5, Internet Explorer 7b2 , Internet Explorer 6, Internet Explorer 5 (Windows), Internet Explorer 5.2 (Macintosh), Netscape 7.2 (Macintosh), and Netscape 8.1 (Windows).

Prettier-Accessible-Forms

 

19) Prototype window login form


A simple tutorial to demonstrate the use of prototype Window login form with RubyOnRails and Ajax. The idea behind this is to override Ok event of Dialog.confirm() form and send Ajax request to controller. The demo application makes use of RJS for Ajax callbacks.

Prototype-window-login-form

 

20) Really Easy Field validation with Prototype


Really Easy Field validation with Prototype is a a form validation script that is very easy to use. The basic method is to attach to the form’s onsubmit event, read out all the form elements’ classes and perform validation if required. If a field fails validation, reveal field validation advice and prevent the form from submitting.

Really-Easy-Field-validation-with-Prototype

 

21) Styling form controls with CSS, revisited


The author spent way too much time creating a total of 224 screenshots showing the effects of various CSS rules applied to form controls. The screenshots are taken from 8 browsers on 4 operating systems, for a total of 14 different browser + OS combinations.

Styling-form-controls-with-CSS-revisited

 

22) Showing Good Form


Showing Good Form is accessible complex, grid-style (i.e. table-like) form using semantic markup (fieldset, legend, label etc…) and CSS.

Showing-Good-Form

 

23) Styling the Button Element with Sliding Doors


A technique that demonstrates a cross-browser technique for button elements with sliding doors. Each button shown uses the same markup and style — only the label text is different on the demo.

Styling-the-Button-Element-with-Sliding-Doors

 

24) Sensible Forms


Sensible Forms provides a stunningly clear tutorial on how a form that is well designed with good visual layout will benefit all sighted users. Forms can present problems for Web users with vision and/or mobility impairment and for people with cognitive or learning disabilities.

It is very easy for someone with impaired vision who relies on an assistive output device such as a screen reader, talking browser or Braille display to get lost in a form. For these technologies to work effectively the devices need to be able to associate a form label (request or prompt) with the correct form control, such as a text field or checkbox.

Sensible-Forms

 

25) Tableless Forms


Tableless Forms has a great login form example, with a graphic in the input field. You just need to apply classes to your page elements and than you will have to style those classes.

Tableless-Forms

 

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

Usage: Download it and you’re pretty much all set! It is encouraged to edit css properties only in the uni-form.css file, so you can easily upgrade to the newer versions as they come along by copying over the old copy of uni-form-generic.css.

Uni-Form

 

27) Validation Hints for your form


Explain one way of achieving Validation Hints effect while the user type using JavaScript and CSS.

Validation-Hints-for-your-form

 

28) Whizzywig – Rich text editor


Whizzywig not only a form, it is a good product. It lets people create rich, formatted text through a web form. It actually creates xhtml, if you but you need no HTML knowledge to use it. If you can use a word processor or email, then you can use this. Whizzywig is written in Javascript, which will run in nearly all web browsers. It is lightweight, at 25k, and is the most powerful rich text editor for its size. It does not require a Javascript library, and works independently of JQuery, MooTools, etc.

Whizzywig-Rich-text-editor

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • DZone
  • Reddit
  • Technorati
  • StumbleUpon
  • Twitter
RSS Enjoy this Post? Subscribe to Ntt.cc

RSS Feed   RSS Feed     Email Feed  Email Feed Follow us Follow us
You can leave a response, or trackback from your own site.

One Response to “28+ Useful Ajax CSS Forms You Shlould Know”

  1. Paul says:

    You might also want to add the From from dhtmlx toolkit, with Ajax support and data validation: http://www.dhtmlx.com/docs/products/dhtmlxForm/

Leave a Reply