Sites with tutorials on forms

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.

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.

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.

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.