Excellent Ajax CSS Forms
Styling FormsUni Form - an
attempt to standardize form markup (xhtml) and css, “modularize” it, to
get nice looking, well structured, highly customizable, semantic,
accessible and usable forms.
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.
Tableless Forms - has a great login form example, with a graphic in the input field.
A form with style - How to style and stop web forms from looking ugly.
Styling Form Elements
Niceforms 1.0
- is a script that will replace the most commonly used form elements
with custom designed ones. One of these improvements would be the
possibility of selecting a radio or check box by clicking its adjacent
label, it also highlights the labels of the selected boxes to make the
selections even clearer and more…
Fancy Form -
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 easy to use and degrades gracefully on all older,
non-supporting browsers.
Styling form controls with CSS, revisited
- 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 - Demo of accessible complex, grid-style (i.e. table-like) form using semantic markup (fieldset, legend, label etc…) and CSS.
Styling the Button Element with Sliding Doors - A technique that demonstrates a cross-browser technique for button elements with sliding doors.
Form Usability and Accessibility
Prettier Accessible Forms - Nick Rigby takes a look at how to make better and accessible forms using CSS instead of old-school tables.
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
Sensible Forms
- Web Usability - Roger Hudson provides a stunningly clear tutorial on
how a form that is well designed with good visual layout will benefit
all sighted users
Ajax Forms Processing
AJAX Contact Form - Excellent example of accessible AJAX. Uses unobtrusive Javascript. By Dustin Diaz.
AutoSuggest: An AJAX auto-complete text field
- where it 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.
FancyUpload using Mootools - Swf meets Ajax for beautiful file uploads using Mootools.
jQuery Form Plugin
- allows you to easily and unobtrusively upgrade HTML forms to use AJAX
to gather information from the form element to determine how to manage
the submit process which allows you to have full control over how the
data is submitted.
Cforms
- An AJAX Contact form plugin for Wordpress, offering convenient
deployment of multiple contact forms throughout your blog or even on
the same page.
Awesome Form Validation
Really Easy Field validation with Prototype - Here’s a form validation script that is very easy to use.
Live Validation - is a small open source javascript library built for giving users real-time validation information as they fill out forms.
Ajax form validation - Learn how to use AJAX in order to process and validate your forms.
fValidator - fValidator is an open source (free) unobtrusive javascript tool for easy handling form validation.
Form Field Hints
Validation Hints for your form - This article will explain one way of achieving Validation Hints effect while the user type using JavaScript and CSS.
Form Help without Popups - A nice technique for adding help info to forms without using pop-up windows.
Hide Form Fields
Trimming form fields
- Wouldn’t it be a cool idea to give users the option to hide these
optional fields at their own discretion, and with a clever use of
Javascript, the DOM and some CSS we can.
Great Tips for Creating Forms
Tips For Creating Great Web Forms - so truly important CSS tips for all form builders out there.
Simple Tricks for More Usable Forms
- A number of simple tricks for improving the usability of forms, and
hopefully inspire you to improve on them and create your own.
A Must See Examples
DOM Javascript Slider Bar
Ext File Upload Form Widget Example
Tutorials
Password strength meter for your register form - A small tutorial on how to build a password strength meter like the one on Google’s new account form.
AJAX Form POST/GET - HTML Form Submit with AJAX/Javascript Example/Tutorial
Degradable Ajax Form Validation - Learn how to provide real-time feedback to the user using server-side validation scripts.
STYLING FILE INPUTS WITH CSS AND THE DOM - Shaun Inman shows us a guide to achieving consistent, stylish file upload inputs via clever use of js and css.
Online Form Builder
Wufoo Form Builder - Free HTML Form Builder - Create Forms, Surveys and Invitations and more…
Web Form Factory - is an open source web form generator which automatically generates the necessary backend code to tie your form to a database.
Jot Form - is a great Web
based WYSIWYG form builder. You can select a form type(Contact Us,
Satisfaction Survey, Job Application, Suggest Website , Membership
Registration, Party RSVP , Wedding Attendance, Reservation, Submit
Product, and others).
Form Assembly - A Beautiful Collection of CSS Stylesheets For Web Forms
