Sites with tutorials on forms

Turn a regular form into a AJAX form with jQuery. An overview of setting up jQuery, Error Checking + Validating and submitting the POST Request. Also read: Flexible and Semantic Forms with a Little jQuery.

Some simple tips useful to enrich your forms with various elements such as suggest messages, autosuggest feature instead of <select> tag, simple check during data input and how to show hidden fields selecting a radio element option.

An overview of form imput.

How to Interact with Web Forms. Part 1. Using data from forms from within PHP, checking forms and securing forms. (Part II here)

Forms and JavaScript Living Together in Harmony. What not to do.

JavaScript to use addEvent function and identifying label elements with the DOM; finding out the value of the for attribute for each label; then attach a behaviour to those label elements and their inputs.

Using AJAX to provide real-time feedback to the user using server-side validation scripts and eliminate the need for redundant validation functions without giving up a solution that degrades gracefully when JavaScript is disabled.

JavaScript attempts to focus the first form field once the page has loaded. However, if any content has been added to the other form fields it doesn't try to focus.

A step by step through the entire process of setting up a form on your website including: Basic Form Tutorial, Advanced Forms & Form Tips and Tricks.

A form-styling solution that is both accessible and portable without floats.

CSS and JS for giving feedback to the user as they are typing an input field, if they have satisfied that field's validation criteria. This article will explain one way of achieving this effect using JavaScript and CSS.

Using CSS to Create a Two-Column Layout.

An overview on how to style forms by adding title elements within the fieldset elements for cross-browser consistency.

A form layout example with standard form tags, accessible & XHTML valid.

JavaScript styling of form elements. Non-intrusive, respect preselected elements and allows you to re=size the form fields. An alternative is ARC - Adam's Radio & Checkbox Customisation Method. There's also peterned's Javascript for styling the buttons.

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 develop your own look.

Nicely styled form with icons included in the fields.

How to apply customized backgrounds to HTML forms, while preserving stucturally clean markup and accesibility.

Styling form controls with CSS, revisited - A demo page for each type of form control plus 224 screenshots showing the effects of various CSS rules applied to form controls. Screenshots are taken from 8 browsers on 4 operating systems, for a total of 14 different browser + OS combinations.

Give users the option to hide optional fields at their own discretion with Javascript, the DOM and some CSS

The tooltip is displayed when you move focus to one of the inputs on the page.

37 ways other blog designers have designed their comments form

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). Imask is an open source alternative javascript tool for creating input and textarea masking.

Autotab is a jQuery plugin that provides auto-tabbing and filtering on text fields in a form. Once the maximum number of characters has been reached within a defined text fields, the focus is automatically set to the defined target of the element. Likewise, clearing out the text field's content by pressing backspace eventually places the focus on the elements previous target.

A tutorial on using jQuery to pre-populate search boxes with text inside of the field. When you select the input text box it disappears and reappears when it’s not selected.

Browsers do not let you style file inputs. File Style plugin enables you to use an image as browse button. You can also style filename field as normal textfield using css. It is written using JavaScript and jQuery.

Contact Form With A Free PHP Email Script.

An open source web form generator which automatically generates the necessary backend code to tie your form to a database.

wForms is an open-source, unobtrusive javascript library that adds commonly needed behaviors to traditional web forms without the need for any programming skill.

FormArchitect automates the most time-consuming and error-prone aspects of form design.

fValidator is an open source (free) unobtrusive javascript tool for easy handling form validation. Includes masking option. Built over MooTools v1.1. Fully configurable. MIT unrestricted License.