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
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.
Let you know how to use AJAX in order to process and validate your forms.
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.
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.
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.
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.
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.
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.
The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX. The main methods,
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!
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
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
rows. Buttons will automatically expand to accommodate the amount of text present. Keyboard-only navigation is also supported.
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).
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.
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
onsubmitevent, 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.
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.
Showing Good Form is accessible complex, grid-style (i.e. table-like) form using semantic markup (fieldset, legend, label etc…) and CSS.
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.
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.