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



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.



3) Ajax form validation

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



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.



5) Anchor Layout with Forms



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



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.



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.



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.




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.



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.



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!



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.



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.



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.



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.



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



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.



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.



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.



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.



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.



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.



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.



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.



27) Validation Hints for your form

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



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.


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